避免两次建立Socket.io连接

Question

我在前端使用react，在后端使用express

我编写了以下代码来将客户端连接到后端

import React, { useEffect,useState} from 'react'
import { io } from "socket.io-client"
const Video = () => {
    const [socket,setSocket] = useState(io("http://localhost:3001"));
    const myVideo = document.createElement('video')
    myVideo.muted = true;

    useEffect(() => {
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(stream => {
            addVideoStream(myVideo, stream)

        })
    }, [])

但是对于单个网页打开，套接字 onconnection 事件会触发两次。 请告诉我问题出在哪里，我添加或删除了什么以使每个用户仅建立一个连接。

Answer 1

尝试使用 useRef 进行调试，看看严格模式是否是问题所在：

import { useEffect, useState, useRef } from 'react'

export default function App() {
  const secondRender = useRef(false)
  const [count, setCount] = useState(0)
  useEffect(()=> {
    secondRender.current && setCount(count => count +1)
    secondRender.current = true
  },[])
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {count}
    </div>
  );
}

在这里你会看到计数保持在 1，所以 useEffect 中的函数只被触发一次

Answer 2

很快就有一个想法...它可能有点虚假，因为我还没有尝试过，但这里的想法是将您的 io 调用提取到自定义挂钩中，并实现一个条件，以便您的调用不会打了两次电话。您可以使用加载器条件来改进这一点，如果调用未成功等，则不会返回套接字。

import { useState, useEffect, useRef } from 'react

const useIo = () => {
 const isSecondRender = useRef(false)
 const [socket, setSocket] = useState (null) 

 useEffect (()=>{
  isSecondRender.current && setSocket(io("http://localhost:3001"))
  isSecondRender.current = true
 },[])
 
 return socket
}