无法在react useEffect中使用socket.io客户端id设置peerJS自定义客户端id

Question

我在我的 server.js 文件中实现了一个自定义 PeerServer 以及 Express 中的 socket.io 服务器 如此处所述。两者都在单独的服务器中提供服务。我想在初始化套接字客户端的 useEffect 函数中使用 socket.io 服务器提供的 id 设置对等 id。

这是我的 useEffect 函数。

useEffect(() => {
  const newSocket = io('http://localhost:8080');
  setSocket(newSocket);
  const newPeer = new Peer(newSocket?.id, {
    host: 'localhost',
    port: 9000,
    path: '/',
  });
  setPeer(newPeer);
  return () => newSocket.close();
}, []);

这是socket.io 和peer 的服务器实现。

const http = require('http');
const express = require('express');
const { Server } = require('socket.io');
const { PeerServer } = require('peer');
const { fetchData } = require('./utils');

const port = process.env.PORT || 8080;

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: ['http://localhost:3000'],
  },
});
const peerServer = new PeerServer({
  port: 9000,
  path: '/',
});
app.get('/', (req, res) => {
  res.send({ title: 'user connected' });
});
// ...
// socket.io events
// ...
server.listen(port, () => {
  console.log(`Server running at port: ${port}`);
});

每当应用程序安装时，socket.id 就会变得未定义，并导致对等 id 由对等服务器生成，而不是与 socket.id 相同。

我尝试使用两种不同的 useEffect 函数，但这并没有解决问题。任何帮助将不胜感激。

Answer 1

您可以在套接字上监听“connect”事件，一旦连接建立就会触发该事件。尝试这样的事情，

useEffect(() => {
  const newSocket = io('http://localhost:8080');
  setSocket(newSocket);

  // wait for the 'connect' event before setting up the Peer with socket.id
  newSocket.on('connect', () => {
    const newPeer = new Peer(newSocket.id, {
      host: 'localhost',
      port: 9000,
      path: '/',
    });
    setPeer(newPeer);
  });

  return () => newSocket.close();
}, []);