断开连接后重新连接到套接字通道

Question

这个问题有多种答案，但要么已经过时（我认为“重新连接”事件不存在了？），要么对我不起作用。

我有大量数据，客户端正在通过 socket.io 套接字等待来自服务器的数据。直到 10-15 分钟后套接字重新连接的结果超过 1600 时才正常。重新连接发生后，我不再获得服务器发出的数据，我认为这是因为我丢失了来自原始套接字连接的事件。

我必须刷新才能继续获取该数据。

如何在每次重新连接后重新连接到 socket.io？

客户：

socket.js（上下文）

import { createContext } from 'react';
import io from 'socket.io-client';

export const socket = io('http://localhost:5000');

export const SocketContext = createContext();

Layout.js

import { socket, SocketContext } from '../context/socket'

function MyApp({ Component, pageProps }) {

  return <SocketContext.Provider value={socket}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
  </SocketContext.Provider>
}

页数（next.js）

  import { SocketContext } from '../context/socket'; 
  ...
  const socket = useContext(SocketContext);
  useEffect(() => {
    socket.emit('joined', socketChannel);
    socket.on(socketChannel, handleStream);
  }, []);

服务器：

index.js（使用 fastify-socket.io）

    fastify.io.on('connection', socket => {
        socket.on('joined', (channel) => {
            socket.join(channel);
        })
    });
    redis.subscriber.on('message', (channel, message) => {
        io.to(channel).emit(channel, message);
    });

Answer 1

Socket.io 会在您断开连接时自动离开房间。

Rooms are left automatically upon disconnection.

在useEffect()，您加入房间一次：

  socket.emit('joined', socketChannel);
  socket.on(socketChannel, handleStream);

两个选项：

在客户端连接时自动加入：

  useEffect(() => {
    socket.on(socketChannel, handleStream);

    // connect fires when connected, also after reconnected
    socket.on('connect', () => {
      console.log('connect', socket.connected);
      // automatically join the room
      socket.emit('joined', socketChannel);
    });
  }, []);

在服务器上自动加入，但这假设所有客户端都加入了可能不合适的相关房间：

io.on('connection', (socket) => {
  console.log(`${socket.id} connected`);

  // automatically join the room
  socket.join(socketChannel);
  ...

断开连接后重新连接到套接字通道

Reconnecting to socket channel after disconnection in react

javascript

reactjs

socket.io

next.js

fastify