如何正确使用 Socket.IO 在文件更新后向所有客户端广播消息-js教程

本文讲解如何修复 socket.io 中因错误注册连接事件导致的“socket not firing”问题，通过全局维护客户端 socket 列表并在文件生成完成后统一广播消息，确保每次更新都能实时通知所有已连接客户端。

在你当前的代码中，核心问题在于：io.on(“connection”, …) 被错误地放在了异步链 .then() 内部（即 getRandomGists 函数中）。这意味着每次调用 getRandomGists() 时，都会为 新连接的客户端 注册一次监听器——但更严重的是，它完全不会触发已存在的连接，因为 connection 事件只在客户端首次建立 WebSocket 连接时触发一次，而非每次 emit 前都需要重新绑定。

结果就是：
✅ 浏览器刷新 → 新建连接 → 触发 connection 回调 → 立即 emit(“imageUpdate”) → 客户端收到；
❌ 后续定时任务执行 → connection 回调不执行 → emit 永远不会发生 → 客户端静默等待。

✅ 正确做法：连接与广播解耦

你需要将 Socket.IO 连接管理 和 业务逻辑广播 分离：

• 在服务启动时，一次性注册 connection 事件，收集并维护活跃客户端列表；
• 在 getRandomGists() 的最终 .then() 中，遍历该列表，主动向每个 socket 发送 imageUpdate；
• 同时做好异常处理，自动清理断开的连接。

以下是优化后的服务端关键代码（含注释说明）：

const { Server } = require('socket.io');
const PORT = 8080;
const SOCKET_PORT = 3000;
const interval = 5000;
const io = new Server(SOCKET_PORT);

// ✅ 全局维护在线客户端 socket 数组
let clients = [];

// ✅ 仅在启动时注册一次 connection 监听器
io.on('connection', (socket) => {
  console.log('✅ 新客户端已连接:', socket.id);
  clients.push(socket);

  // 可选：监听客户端断开，自动清理
  socket.on('disconnect', () => {
    console.log('⚠️ 客户端断开:', socket.id);
    clients = clients.filter(s => s.id !== socket.id);
  });

  // ✅ 处理来自客户端的自定义消息（如心跳、日志上报等）
  socket.on('customMessage', (arg) => {
    console.log('? 收到客户端消息:', arg);
  });
});

const getRandomGists = () => {
  return fetch(rndGist)
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.text();
    })
    .then(body => {
      const { window } = new JSDOM(body);
      const { document } = window;
      const codeBlock = document.querySelectorAll('.blob-code-inner');
      console.log(`? 获取 Gist: ${rndGist} | 时间: ${new Date().toLocaleTimeString()}`);

      const fauxCode = new FauxCode(codeBlock, options);
      fs.writeFileSync(filename, fauxCode.render());
      console.log('✅ SVG 文件已写入:', filename);

      // ✅ 关键：向所有当前在线客户端广播更新
      clients.forEach((socket, i) => {
        try {
          socket.emit('imageUpdate', { timestamp: Date.now(), message: 'Image updated' });
        } catch (err) {
          console.warn('⚠️ 向客户端发送失败，准备清理:', socket.id, err.message);
          clients[i] = null; // 标记为失效
        }
      });

      // ✅ 清理无效 socket（如连接已关闭但未触发 disconnect 事件）
      clients = clients.filter(Boolean);
    })
    .catch(err => {
      console.error('❌ 获取/渲染 Gist 失败:', err);
    });
};

// ✅ 首次立即执行 + 启动定时轮询
getRandomGists();
setInterval(getRandomGists, interval);

// ✅ Express 静态服务与主端口监听
app.use(express.static('public'));
app.listen(PORT, () => console.log(`? HTTP 服务运行于 http://localhost:${PORT}`));
console.log(`? Socket.IO 服务运行于 ws://localhost:${SOCKET_PORT}`);

? 客户端增强建议（可选但推荐）

你当前的 reloadImg() 存在两个小问题：