JavaScript

超轻量级php框架startmvc

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

更新时间:2020-09-29 07:42:02 作者:startmvc
场景用户正常发送一个http请求,需要处理一个耗时很长的任务,有可能这个任务要处理好

场景

用户正常发送一个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 指定用户发消息 websocket指定用户 websocket发消息