Websocket 向指定用户发消息的方法

2022-10-09,,,,

场景

用户正常发送一个http请求,需要处理一个耗时很长的任务,有可能这个任务要处理好几分钟,在任务处理期间 后台要不断的发送当前处理的进度日志等信息,打印在前端。也就是说 用户先发出一个正常的http请求,后面的就由websocket来完成

技术点

当后端收到http请求后 如何确认是哪一个socket发出的?

实现思路

  • 为每一个socket设置唯一socketid并存入cookie
  • 后端接收到http取出其中的cookie信息拿到socketid,循环找到此id的socket发送消息

代码实现

前端代码

if (!cookies.get('socketid')) {
  // 这里为模拟生成唯一id 建议 require('uuid')
  var uuid = math.random() * 1000;
  cookies.set('socketid', uuid)
}

function connectwebsocket() {
  let url = `ws://${document.location.host}`;

  var ws = new websocket(url);

  ws.onopen = function () {
    console.log("连接成功!");
    ws.send(
      json.stringify({
        type: "setsocketid",
        data: cookies.get('socketid')
      })
    );
  };
  ws.onclose = function () {
    // 关闭 websocket
    console.log("连接已关闭...正在重连...");
    connectwebsocket()
  };
  ws.onmessage = res => {
    console.log("收到socket消息:", res.data)
    var data = json.parse(res.data)
    document.queryselector('#content').innerhtml += data.data;
  };
}

connectwebsocket()

后端代码

wss.on('connection', function connection(ws, req) {
    ws.req = req;
    ws.sendjson = function (json) {
      if (this.readystate == 1) {
        this.send(json.stringify(json))
      }
    }
    ws.on('message', function (message) {
      message = json.parse(message);
      switch (message.type) {
        case 'setsocketid':
          ws.socketid = message.data;
          console.log(ws.socketid)
          break;
      }
    });
});
app.post('/api/socket/msg', function (req, res) {
    var query = req.body;
    console.log(query)

    var socketid = req.cookies.socketid;

    res.wss.clients.foreach(ws => {
      if (ws.socketid == socketid && ws.readystate == 1) {
        ws.sendjson({
          type:'testmsg',
          data:query.msg
        });
      }
    })

    res.send({})
})

完整例子
demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

《Websocket 向指定用户发消息的方法.doc》

下载本文的Word格式文档,以方便收藏与打印。