場景

使用者正常傳送一個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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。