避免使插座.io连接两次

发布于 2025-02-05 02:46:29 字数 625 浏览 2 评论 0原文

我正在frontend上使用React，并在后端表示

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

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)

        })
    }, [])

但是插座连接事件为单个网页打开了两次。请告诉我问题在哪里，我添加或删除的内容仅在每个用户中建立一个连接。

原文

I am using react at frontend and express on backend

I wrote the following code to connect client to backend

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)

        })
    }, [])

But the socket onconnection event fired twice for a single webpage opening.
Please tell me where is the problem, what i add or remove to make only one connection per user .

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山人契 2025-02-12 02:46:29

尝试一个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，因此使用效果中的函数仅触发一次

try a useRef for debugging to see if strict mode is the problem:

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>
  );
}

here you will see that the count stays at 1, so the functin in useEffect is only fired once

回复收藏 0 原文

瞎闹 2025-02-12 02:46:29

很快这是一个想法...这可能有点虚假，因为我没有尝试过，但是这里的想法是将您呼叫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
}

Pretty quickly here is an idea... it might be a bit falsy because i haven't tried it out, but the idea here is to extract you io call into a custom hook, and implement a condition so that your call is not called twice. You can probably improve this with a loader condition that does not return your socket if the call hasn't been successfull etc..

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
}

回复收藏 0 原文

~没有更多了~