如何使用Socket.IO将NodeJS API请求中的数据发送到前端

导致该问题的常见原因和对应修复方案如下： #

1. 最常见原因：服务监听对象错误 #

你创建的Socket.IO实例绑定在手动生成的server（http.createServer生成的实例）上，如果你后续使用app.listen()启动服务，Express会内部生成一个全新的http服务实例，和你绑定了Socket.IO的server完全无关，导致Socket.IO的消息根本无法发送。
修复方案： 改用server.listen启动服务，示例：

// 错误写法
// app.listen(3000, () => {
//   console.log('服务启动')
// })

// 正确写法
server.listen(3000, () => {
  console.log('服务启动，端口3000')
})

2. Socket.IO跨域配置缺失 #

如果你的Electron前端和后端服务端口/源不一致，未配置CORS会导致客户端连接失败，或消息无法正常推送。
修复方案： 初始化Socket.IO时增加跨域配置：

const io = new Server(server, {
  cors: {
    // 生产环境请替换为你Electron前端的实际源，本地文件加载可填"file://*"
    origin: "*",
    methods: ["GET", "POST"]
  }
});

3. 定向发送时Socket ID无效 #

如果使用to(socketId).emit发送失败，首先要确认目标Socket ID对应连接是活跃状态，未断开连接。建议全局维护活跃连接列表：

// 全局存储活跃socket连接
const activeSockets = new Map()

io.on('connection', (socket) => {
  // 连接成功后存入Map
  activeSockets.set(socket.id, socket)
  // 断开连接时删除
  socket.on('disconnect', () => {
    activeSockets.delete(socket.id)
  })
})

// API路由中调用时先校验连接是否存在
app.get('/api/run', (req, res) => {
  const io = req.app.get('socketIo')
  // 广播给所有已连接客户端
  io.emit('data', '全局广播数据')
  
  // 定向发送示例
  const targetId = '你要发送的目标socket id'
  if (activeSockets.has(targetId)) {
    io.to(targetId).emit('data', '定向发送数据')
    return res.json({code: 0, msg: '发送成功'})
  }
  res.json({code: 1, msg: '目标客户端未连接'})
})

4. 客户端连接状态校验 #

客户端需确认Socket连接成功后，才能收到推送消息，建议增加连接状态监听：

// 客户端需安装socket.io-client包，不要误用服务端的socket.io包
import { io } from 'socket.io-client'

const socket = io('http://你的后端服务地址:端口')
// 监听连接成功事件
socket.on('connect', () => {
  console.log('连接成功，当前socket id：', socket.id)
})
// 监听连接错误
socket.on('connect_error', (err) => {
  console.error('连接失败：', err)
})
// 监听数据推送
socket.on('data', (msg) => {
  console.log('收到推送：', msg)
})

完整可运行参考代码 #

const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const { Server } = require("socket.io");

// 初始化Socket.IO并配置跨域
const io = new Server(server, {
  cors: {
    origin: "*"
  }
});
// 存储活跃连接
const activeSockets = new Map()

io.on('connection', (socket) => {
  console.log('新客户端接入：', socket.id)
  activeSockets.set(socket.id, socket)
  socket.on('disconnect', () => {
    console.log('客户端断开：', socket.id)
    activeSockets.delete(socket.id)
  })
})

app.set('socketIo', io);

app.get('/api/run', (req, res) => {
  const ioEmitter = req.app.get("socketIo");
  ioEmitter.emit('data', 'api触发的广播数据');
  res.send('已推送数据')
})

// 用绑定了Socket.IO的server启动服务
server.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000')
})

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