Websocket 向指定用户发消息

场景

用户正常发送一个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