使用socket.io无法建立连接，请求排查问题（附前后端代码）

安全阿岳

2026-7-17

React Native Socket.io 连接失败排查与修复

核心问题：后端事件名拼写错误

你后端代码里的连接监听事件名写错了——把connection拼成了conection，导致无法捕获客户端的连接请求，自然不会输出连接日志。

其他潜在问题与修复

1. 后端代码修正

把io.on("conection")改为io.on("connection")，修正后的server.js：

const io = require("socket.io")();

io.on("connection", socket => {
    console.log("a user has connected");
    socket.on("message", message => {
        console.log(message);
    });
})

io.listen(3001, function() {
    console.log("listening on port 3001");
});

2. 前端清理函数错误

useEffect的清理函数里，你直接调用socket.disconnect()，但socket是useRef创建的引用，需要访问current属性才能操作实例，建议加可选链避免未初始化的报错：

useEffect(() => {
   socket.current = io("http://localhost:3001");
   // 可选：添加连接状态监听用于调试
   socket.current.on('connect', () => {
       console.log('已连接到后端');
   });
   socket.current.on('disconnect', () => {
       console.log('与后端断开连接');
   });

  return () => {
    socket.current?.disconnect();
  };
}, []);

3. 模拟器/真机的地址适配

Android模拟器无法直接用localhost指向本地电脑，需要替换为http://10.0.2.2:3001
iOS模拟器可以用localhost，但如果是真机或跨设备测试，要换成你电脑的局域网IP（比如http://192.168.x.x:3001）

4. 前端发送消息的安全检查

在sendMessage里加判断，避免未连接时调用emit报错：

const sendMessage = () => {
    if (socket.current?.connected) {
        socket.current.emit("message", message);
        setMessage(""); // 发送后清空输入框
    } else {
        console.log("尚未连接到后端");
    }
}