Next.js (React.js)，带有 Node.js 服务器 Socket.io 客户端多个 ID

Question

I'm having an issue where my React app is outputting the same one ID on every page that it loads, where as Backend Node.js Socket.io server is outputting multiple client IDs whenever I change route in my app...

Server:

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000",
  },
});
io.on("connection", (socket) => {
  console.log("client connected: ", socket.id);

  socket.on("disconnect", (reason) => {
    console.log("disconnect", reason);
  });
});

App.js:

 useEffect(() => {
    console.log("use effect", socket.id);

    return () => {
      socket.off("connect");
      socket.off("disconnect");
    };
  }, []);

Socket.ts:

import io from "socket.io-client";

const socket = io(`${process.env.NEXT_PUBLIC_SOCKET_IO_URL}`);
socket.on("connect", () => console.log("socket_id", socket.id));
export default socket;

server.js (backend - websocket)

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000",
  },
});
io.on("connection", (socket) => {
  console.log("client connected: ", socket.id);

  socket.on("disconnect", (reason) => {
    console.log("disconnect", reason);
  });});

Answer 1

First of all, socket.io server sometimes generates a new id due reconnections or others things:

https://socket.io/docs/v4/server-socket-instance/#socketid

So if you are planning keep the same id, i disencourage you.

Well, but looks you are wondering about fast recriation of ids. React is rendering according state changes, so create a stateless connection inside some component cause this behaviour. Yon can choose a lot of solutions but, i will present you a solution extensible, ease to mantain and deliver to componets the role of subscribe and unsubscribe to itself listeners, this sounds better than have a global listeners declaration:D

1. Create Socket Context We will use useContext hook to provide SocketContext to entire app.

Create a file in context/socket.js :

import React from "react"
import socketio from "socket.io-client"
import { SOCKET_URL } from "config"

export const socket = socketio.connect(SOCKET_URL)
export const SocketContext = React.createContext()

2. Use socket context and provide a value Add SocketContext provider at the root of your project or at the largest scope where socket is used:

import {SocketContext, socket} from 'context/socket';
import Child from 'components/Child';

const App = () => {
  return (
    <SocketContext.Provider value={socket}>
      <Child />
      <Child />
      ...
    </SocketContext.Provider
  );
};

3. Now you can use socket in any child component For example, in GrandChild component, you can use socket like this:

import React, {useState, useContext, useCallback, useEffect} from 'react';
import {SocketContext} from 'context/socket';

const GrandChild = ({userId}) => {

  const socket = useContext(SocketContext);

  const [joined, setJoined] = useState(false);

  const handleInviteAccepted = useCallback(() => {
    setJoined(true);
  }, []);

  const handleJoinChat = useCallback(() => {
    socket.emit("SEND_JOIN_REQUEST");
  }, []);


  useEffect(() => {
    // as soon as the component is mounted, do the following tasks:

    // emit USER_ONLINE event
    socket.emit("USER_ONLINE", userId); 

    // subscribe to socket events
    socket.on("JOIN_REQUEST_ACCEPTED", handleInviteAccepted); 

    return () => {
      // before the component is destroyed
      // unbind all event handlers used in this component
      socket.off("JOIN_REQUEST_ACCEPTED", handleInviteAccepted);
    };
  }, [socket, userId, handleInviteAccepted]);

  return (
    <div>
      { joined ? (
        <p>Click the button to send a request to join chat!</p>
      ) : (
        <p>Congratulations! You are accepted to join chat!</p>
      ) }
      <button onClick={handleJoinChat}>
        Join Chat
      </button>
    </div>
  );
};

What is useContext ?

useContext provides a React way to use global state, You can use context in any child component, Context values are states. React notices their change and triggers re-render.

What is useCallback ? Why did you put every handlers inside useCallback ? useCallback prevents reassigning whenever there is state update Functions will be reassigned only when elements in the second argument are updated

More reference: https://www.w3schools.com/react/react_usecallback.asp

This nice tutorial has obtained in: https://dev.to/bravemaster619/how-to-use-socket-io-client-correctly-in-react-app-o65