Express集成WebSocket后关键词列表更新需手动刷新问题求助

问题原因 #

当前代码仅在WebSocket新连接建立时向客户端发送一次关键词列表，后续关键词列表更新时服务端没有主动向已连接的客户端推送新数据，因此需要刷新页面重新建立连接才能获取到更新后的值。

服务端修改方案 #

你需要新增活跃连接池维护逻辑，以及关键词更新后的全局推送逻辑，修改后代码如下：

const ws = require('ws');
const express = require('express');
// 此处改为let，方便后续修改关键词列表值
let keywordsList = require('./app');

const app = express();
const port = 3000;

// 新增：存储所有正常连接的WebSocket实例
const activeSockets = new Set();

const wsServer = new ws.Server({ noServer: true });
wsServer.on('connection', function connection(socket) {
  // 新连接加入连接池
  activeSockets.add(socket);
  socket.send(JSON.stringify(keywordsList));
  socket.on('message', message => console.log(message));

  // 新增：连接断开时从连接池移除，避免内存泄漏
  socket.on('close', () => {
    activeSockets.delete(socket);
  });

  // 新增：异常连接自动移除
  socket.on('error', () => {
    activeSockets.delete(socket);
  });
});

// 新增：全局推送方法，关键词列表更新后调用即可向所有在线客户端推送新数据
function broadcastKeywords() {
  activeSockets.forEach(socket => {
    if (socket.readyState === ws.OPEN) {
      socket.send(JSON.stringify(keywordsList));
    }
  })
}

// 示例：如果你有更新关键词列表的业务逻辑，修改完成后调用broadcastKeywords即可
// 例如新增一个更新关键词的接口
app.post('/update-keywords', express.json(), (req, res) => {
  keywordsList = req.body.keywords;
  broadcastKeywords();
  res.status(200).send('更新成功');
})

const server = app.listen(3000);
server.on('upgrade', (request, socket, head) => {
  wsServer.handleUpgrade(request, socket, head, socket => {
    wsServer.emit('connection', socket, request);
  });
}); 

客户端可选优化 #

你当前客户端代码已经对接收的数据做了JSON解析，但后续直接把原始字符串插入DOM，可根据需要调整渲染逻辑：

socket.addEventListener('message', function (e) {
  const keywordsList = JSON.parse(e.data);
  console.log("接收到新关键词列表：", keywordsList);
  // 示例渲染逻辑，可根据实际需求调整
  document.getElementById("keywordsList").innerHTML = keywordsList.map(item => `<li>${item}</li>`).join('');
}); 

内容的提问来源于stack exchange，提问作者J. Doe