场景
场景场景用户正常发送一个http请求,需要处理一个耗时很长的任务,有可能这个任务要处理好几分钟,在任务处理期间 后台要不断的发送当前处理的进度日志等信息,打印在前端。也就是说 用户先发出一个正常的http请求,后面的就由Websocket来完成技术点
技术点技术点当后端收到http请求后 如何确认是哪一个socket发出的?
实现思路实现思路实现思路

为每一个socket设置唯一socketId并存入cookie

后端接收到http取出其中的cookie信息拿到socketId,循环找到此id的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()


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({})
})


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
完整例子完整例子demo以上就是本文的全部内容,希望对大家的学习有所帮助。