Websocket 向指定用戶發(fā)消息的方法
更新時間:2020年01月09日 10:04:46 作者:lihao_李浩
這篇文章主要介紹了Websocket 向指定用戶發(fā)消息的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
場景
用戶正常發(fā)送一個http請求,需要處理一個耗時很長的任務,有可能這個任務要處理好幾分鐘,在任務處理期間 后臺要不斷的發(fā)送當前處理的進度日志等信息,打印在前端。也就是說 用戶先發(fā)出一個正常的http請求,后面的就由Websocket來完成
技術點
當后端收到http請求后 如何確認是哪一個socket發(fā)出的?
實現思路
- 為每一個socket設置唯一socketId并存入cookie
- 后端接收到http取出其中的cookie信息拿到socketId,循環(huán)找到此id的socket發(fā)送消息
代碼實現
前端代碼
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
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
JavaScript+Canvas實現彩色圖片轉換成黑白圖片的方法分析
這篇文章主要介紹了JavaScript+Canvas實現彩色圖片轉換成黑白圖片的方法,結合實例形式分析了javascript結合HTML5相關函數修改頁面圖片元素顯示效果相關操作技巧,需要的朋友可以參考下2018-07-07
javascript 正則替換 replace(regExp, function)用法
剛在弄網頁通過servlet返回的json數據來添加div元素,簡單研究了下replace(regExp, function)方式的function參數.2010-05-05

