Angular客户端无法接收Node-Express后端Socket.IO推送的数据如何解决

核心问题原因 #

你遇到的Socket事件无法接收的问题主要由以下几个常见错误导致：

• WebSocket服务（4444端口）未配置CORS跨域规则，被浏览器跨域策略拦截连接请求
• Socket.io客户端与服务端版本不匹配，导致连接握手失败
• 前端Socket连接缺少必要配置，默认的长轮询模式被拦截

修复步骤 #

1. 修复WebSocket服务的CORS配置 #

修改websocket.js文件，给Socket.io实例添加跨域规则：

const socketIO = require('socket.io');
const server = require('http').createServer();
server.listen(4444, () => {
    console.log("Socket IO is listening on port 4444");
});

// 新增cors配置
module.exports = socketIO(server, {
  cors: {
    origin: "http://localhost:4200",
    methods: ["GET", "POST"]
  }
});

2. 修复前端Socket连接配置 #

修改spinwheel.service.ts的Socket初始化逻辑，添加传输协议配置：

constructor(private http: HttpClient) { 
  this.socket = io(this.url, {
    // 强制优先使用websocket协议，避免长轮询被拦截
    transports: ['websocket', 'polling'],
    reconnection: true
  })
  // 可添加连接日志排查问题
  this.socket.on('connect', () => {
    console.log('Socket连接成功，ID：', this.socket.id)
  })
}

3. 版本一致性校验 #

确保服务端的socket.io包和前端的socket.io-client包大版本一致，比如服务端用v4版本，前端也要用v4版本，可通过以下命令校验：

• 服务端执行：npm list socket.io
• 前端执行：npm list socket.io-client
  如果版本不一致，安装对应版本即可：
  服务端安装指定版本：npm i socket.io@4
  前端安装指定版本：npm i socket.io-client@4

排查验证步骤 #

• 先启动后端服务，打开Angular应用，看后端控制台是否打印a user connected，如果没打印说明连接未建立，优先检查前两步的配置
• 如果连接建立成功，刚进入页面时前端控制台会打印服务端主动推送的from server，说明事件收发正常
• 此时在Twitch聊天输入!spin，看后端控制台是否打印spinning wheel，如果没打印则检查Twitch的身份配置、频道名称是否填写正确，tmi.js的debug日志是否有报错

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