Websocket 向指定用戶發(fā)消息的方法
場景
用戶正常發(fā)送一個http請求,需要處理一個耗時很長的任務(wù),有可能這個任務(wù)要處理好幾分鐘,在任務(wù)處理期間 后臺要不斷的發(fā)送當(dāng)前處理的進度日志等信息,打印在前端。也就是說 用戶先發(fā)出一個正常的http請求,后面的就由Websocket來完成
技術(shù)點
當(dāng)后端收到http請求后 如何確認(rèn)是哪一個socket發(fā)出的?
實現(xiàn)思路
- 為每一個socket設(shè)置唯一socketId并存入cookie
- 后端接收到http取出其中的cookie信息拿到socketId,循環(huán)找到此id的socket發(fā)送消息
代碼實現(xiàn)
前端代碼
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 () { // 關(guān)閉 websocket console.log("連接已關(guān)閉...正在重連..."); 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
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:JS如何實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉(zhuǎn)對應(yīng)的代碼
欄 目:JavaScript
下一篇:你可能從未使用過的11+個JavaScript特性(小結(jié))
本文標(biāo)題:Websocket 向指定用戶發(fā)消息的方法
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9252.html


閱讀排行
本欄相關(guān)
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機閱讀
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-11ajax實現(xiàn)頁面的局部加載
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實例總結(jié)
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改