Необходимо предотвратить повторное подключение socket.io при повторном рендеринге в Nextjs - PullRequest
Новая
       3

Необходимо предотвратить повторное подключение socket.io при повторном рендеринге в Nextjs

0 голосов
/ 08 мая 2020

Как правильно подключить сокет, чтобы предотвратить повторное подключение при повторном рендеринге: 

// client
export default () => {
  const socket = io.connect('http://localhost:5000');
  ...
  // Do some stuff here that may cause this component to re-render
  // e.g. setState on change of an input value
}

// server
app.prepare().then(() => {
  io.on('connection', (socket) => {
    socket.on('something', (val) => {
      socket.val = val;
    });

    socket.on('something else', (val) => {
     // why is `socket.val` undefined here
   }));
  }));
});

В этом примере из socket.io кажется, что это должен работать. 

  socket.on('add user', function (username) {
    // we store the username in the socket session for this client
    socket.username = username;

Итак, когда я тестировал консоль, я смог увидеть, что он подключается снова каждый раз, когда состояние устанавливается из внешнего интерфейса: 

// server
app.prepare().then(() => {
  io.on('connection', (socket) => {
    console.log('this fires every time state gets set in the frontend');
    socket.on('something', (val) => {

Я пробовал обернуть io.connect в useEffect, но я не могу сделать сокет глобально доступным: 

// How do I make socket globally available?
let socket; // functions complain that socket is undefined
useEffect(() => {
  socket = io.connect('http://localhost:5000');
}, [])

Это также срабатывает io.connect() при каждом повторном рендеринге 

const [socket, setSocket] = useState(io.connect('http://localhost:5000'));
useEffect(() => {
  setSocket(io.connect('http://localhost:5000'));
}, [])
...