Socket.IO与Express集成故障：重复连接日志及数据接收失败

我帮你拆解下这两个问题的原因和对应的解决办法：

问题1：重复输出“user connected”日志 #

这个情况大概率是客户端Socket.IO版本和服务端不兼容，或者跨域配置缺失导致连接反复重试（从你的代码看模块是单例加载，重复初始化的可能性很低）。

排查&解决步骤： #

• 先核对版本：客户端用的是1.3.5版本的Socket.IO，你可以在服务端执行npm list socket.io看看当前安装的版本。如果版本差异大，会导致连接频繁断开重连，触发多次connection事件。建议服务端也安装对应版本：npm install socket.io@1.3.5。
• 处理跨域问题：如果前端页面和服务端不在同一域名/端口，浏览器的跨域策略会拦截Socket.IO连接，导致连接重试。修改sockethandler.js，添加CORS配置：

  var socket_io = require('socket.io');
  var io = socket_io({
    cors: {
      origin: "http://192.168.168.49:3000", // 填你的前端页面地址
      methods: ["GET", "POST"]
    }
  });
  // 后面的代码保持不变
  

• 检查客户端是否重复创建连接：你的client.js里只创建了一个socket实例，没问题，但要确认ejs页面只引入了一次client.js，避免重复加载导致多连接。

问题2：前端收不到推送数据 #

结合你的代码，可能的原因有这几个，逐个排查：

1. 跨域限制导致客户端没连上服务端 #

如果跨域配置没做好，客户端根本无法成功连接服务端，自然收不到任何推送。按照上面的方法添加CORS配置后，再打开浏览器控制台，看看有没有connect_error的报错。

2. 推送用的io实例没绑定到HTTP服务器 #

虽然你在bin/www里执行了io.attach(server)，但可以验证下emit时用的是不是同一个实例。在sockethandler.js和emit代码里分别加日志：

// sockethandler.js创建io后
console.log('Socket.IO实例:', io);
// emit数据的代码里
console.log('正在推送数据的实例:', io);

如果两个日志输出的是同一个对象，说明实例没问题；如果不是，检查require('./sockethandler')的路径是否正确，有没有引入错文件。

3. 客户端监听事件晚于推送时机 #

有时候网络延迟会导致推送在客户端监听事件前发送，虽然Socket.IO会缓存事件，但保险起见，可以修改客户端代码，确认连接成功后再监听，同时加日志排查：

// client.js
var socket = io("http://192.168.168.49:3000");

socket.on('connect', () => {
  console.log('成功连接到服务端啦');
});

socket.on('extenstate', (state) => {
  console.log('收到推送数据:', state); // 先打日志确认是否收到
  var li = document.createElement('li');
  var Extension = document.createElement('h4');
  var Status = document.createElement('h4');
  Extension.textContent = 'Extension:' + state.exten;
  Status.textContent = 'Status:' + state.statustext;
  li.appendChild(Extension);
  li.appendChild(Status);
  document.getElementById('phone-calls').appendChild(li);
});

socket.on('connect_error', (err) => {
  console.error('连接出错:', err); // 看具体错误信息
});

4. 推送逻辑根本没被触发 #

检查来电时的emit代码是否真的执行了，在emit前加个日志：

console.log('准备推送来电数据:', {exten, statustext});
io.emit('extenstate', {exten, statustext});

如果服务端控制台没看到这条日志，说明你的来电触发逻辑有问题，得先排查为什么这段代码没被调用。

额外验证小技巧 #

1. 在服务端的connection事件里直接推送测试数据，看看客户端能不能收到：

   io.on('connection', (socket) => {
     console.log('a user connected');
     // 推送测试数据
     socket.emit('extenstate', {exten: 'test123', statustext: 'ringing'});
     socket.on('disconnect', () => {
       console.log('user disconnected');
     });
   });
   

   如果客户端能收到这条测试数据，说明推送逻辑没问题，问题出在来电触发的emit代码上。
2. 打开浏览器的Network面板，查看Socket.IO的连接请求，确认状态是200，没有报错。

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