使用React+Socket.io+simple-peer时遇process未定义错误求助

一、修复process is not defined错误 #

这个错误的根源是simple-peer默认依赖Node.js环境的process全局变量，但React项目（尤其是Vite/Create React App 5+）默认不会在浏览器中注入该变量。可以通过以下两种方式解决：

方案1：使用浏览器专用版本的simple-peer #

修改你的导入语句，直接引入为浏览器打包的版本：

import SimplePeer from 'simple-peer/browser'

这个版本剔除了Node.js相关依赖，无需额外配置即可在浏览器中运行。

方案2：手动注入process全局变量 #

• 如果你用Vite，在vite.config.js中添加全局定义：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    define: {
      'process.env': {}
    }
  })
  

• 如果你用Create React App，在public/index.html的<head>标签内添加：

  <script>
    window.process = { env: { NODE_ENV: '%NODE_ENV%' } };
  </script>
  

二、修正代码中的逻辑问题 #

除了环境错误，你的代码还有几处逻辑问题会导致连接失败：

1. 事件绑定位置错误 #

在startCall中，你将socket.on('callaccepted')放在了peer.on('stream')的回调内，这会导致只有收到本地流时才绑定该事件，无法及时处理对方的接受信号。应将其移到外部：

function startCall(){
    const peer=new SimplePeer({
      initiator:true,
      trickle:false,
      stream:stream,
    })

    peer.on('signal',(data)=>{
      socket.emit('calluser',{userToCall:chatInfo.current.userToCall,url:chatInfo.current.url,signalData:data,from:userId});
    });

    peer.on('stream',(stream)=>{
      if(peerVideoElement.current){
        peerVideoElement.current.srcObject=stream;
      }
    });

    // 移到外部，确保及时监听接受信号
    socket.on('callaccepted',(data)=>{
      peer.signal(data);
    })
}

2. 缺失peerStream.current的赋值逻辑 #

在acceptCall中调用peer.signal(peerStream.current)，但代码中没有对peerStream.current赋值的逻辑。需要在收到对方呼叫信号时保存数据：

// 接收呼叫的事件监听（需放在组件挂载时，比如useEffect内）
socket.on('call', (data) => {
  // 保存对方的信号数据，供acceptCall使用
  peerStream.current = data.signalData;
  // 此处可添加呼叫提示UI，触发acceptCall
})

3. 避免重复绑定Socket事件 #

每次调用startCall或acceptCall都会绑定新的Socket事件，多次执行会导致事件重复触发。建议将Socket事件监听放在useEffect中，组件挂载时仅绑定一次，或者在绑定前用socket.off移除旧监听：

useEffect(() => {
  const handleCallAccepted = (data) => {
    // 处理接受信号逻辑，注意需保留peer实例的引用
  };
  socket.on('callaccepted', handleCallAccepted);

  return () => {
    socket.off('callaccepted', handleCallAccepted);
  };
}, []);

内容的提问来源于stack exchange，提问作者DevEnma