nextjs-rust-twitter-stream-websoket-index.js

nextjs-rust-twitter-stream-websoket-index.js

import { useState } from 'react';
import { w3cwebsocket as W3CWebSocket } from "websocket";
import TopicForm from '../components/topicForm';
import TwitterCard from '../components/twitterCard';

export default function Home() {

  const [wss, setWss] = useState();
  const [wsSession, setWssSession] = useState();
  const [twitterMsg, setTwitterMsg] = useState([]);
  const [loading, setLoading] = useState(false);
  const [disconnecting, setDisconnecting] = useState(false);

  const currentWsSession = (ws_session) => {
    console.log("current session: " + ws_session);
    setWssSession(ws_session);
    setLoading(true);
    tracking(ws_session);
  }

  const disconnect_ws = async () => {
    console.log("state: " + wss.readyState);
    console.log("disconnect session " + wsSession);
    setDisconnecting(true);
    wss.close();
    console.log("state: " + wss.readyState);
    const post_data = {
      "user_id": wsSession,
    };

    const unregister_response = await fetch("/api/unregister", {
      method: "POST",
      body: JSON.stringify(post_data)
    }).catch((error) => {
      console.error('API Register Error:', error);
    });

    console.log(unregister_response.status);
  }

  const tracking = (ws_session) => {
    let socket = new W3CWebSocket('ws://127.0.0.1:8000/ws/' + ws_session);

    setWss(socket);

    socket.addEventListener("open", () => {
      console.log("[websockets] Connected");
    });

    socket.addEventListener("message", (event) => {
      if (event?.data) {
        setLoading(false);
        setTimeout(() => setTwitterMsg([...'', JSON.parse(event.data)]), 5000);
      }
    });

    socket.addEventListener("close", () => {
      console.log("[websockets] closed");
      setTwitterMsg([]);
      setDisconnecting(false);
    });

  }

  return (

    <div className="bg-blue-200 flex">
      <div className="flex-col flex ml-auto mr-auto items-center w-full lg:w-2/3 md:w-3/5">

        <h1 className="font-bold text-2xl my-5"> Rust + NextJS Twitter Streaming Demo</h1>

        {twitterMsg.length == 0 ?
          <TopicForm currentWsSession={currentWsSession} loading={loading}></TopicForm> : <></>}

        <div className="mt-2 flex flex-col lg:w-1/2 w-8/12">
          {twitterMsg.length != 0 ?
            <div>
              <i className="text-xs">Your current session :  {wsSession} </i>
              <TwitterCard tweet={twitterMsg}></TwitterCard>
              {disconnecting ?
                <div className="flex items-center bg-blue-400 border-l-4 border-blue-700 py-2 px-3 shadow-md mb-5 mt-5">
                  <div className="text-blue-500 rounded-full bg-white mr-3">
                    <svg width="1.8em" height="1.8em" viewBox="0 0 16 16" className="bi bi-info" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z" />
                      <circle cx="8" cy="4.5" r="1" />
                    </svg>
                  </div>
                  <div className="text-white max-w-xs ">
                    Please wait while we disconnect your session from Twitter streaming...
                  </div>
                </div> :
                <div className="flex w-full mb-5 mt-5">
                  <button id="topic-submit-button"
                    onClick={disconnect_ws}

                    className="w-full bg-gray-800 hover:bg-grey-900 text-white text-sm py-2 px-4 font-semibold rounded focus:outline-none focus:shadow-outline h-10"
                  >
                    Stop This Topic Streaming
                  </button>
                </div>
              }
            </div>
            : <></>}

        </div>

      </div>
      
    </div>
  )
}