Websocket 向指定用戶發(fā)消息的方法
場(chǎng)景
用戶正常發(fā)送一個(gè)http請(qǐng)求,需要處理一個(gè)耗時(shí)很長(zhǎng)的任務(wù),有可能這個(gè)任務(wù)要處理好幾分鐘,在任務(wù)處理期間 后臺(tái)要不斷的發(fā)送當(dāng)前處理的進(jìn)度日志等信息,打印在前端。也就是說(shuō) 用戶先發(fā)出一個(gè)正常的http請(qǐng)求,后面的就由Websocket來(lái)完成
技術(shù)點(diǎn)
當(dāng)后端收到http請(qǐng)求后 如何確認(rèn)是哪一個(gè)socket發(fā)出的?
實(shí)現(xiàn)思路
- 為每一個(gè)socket設(shè)置唯一socketId并存入cookie
- 后端接收到http取出其中的cookie信息拿到socketId,循環(huán)找到此id的socket發(fā)送消息
代碼實(shí)現(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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- springboot集成WebSockets廣播消息(推薦)
- vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
- SpringBoot集成WebSocket實(shí)現(xiàn)前后端消息互傳的方法
- java WebSocket實(shí)現(xiàn)聊天消息推送功能
- php實(shí)現(xiàn)websocket實(shí)時(shí)消息推送
- JS實(shí)現(xiàn)websocket長(zhǎng)輪詢實(shí)時(shí)消息提示的效果
- SpringBoot webSocket實(shí)現(xiàn)發(fā)送廣播、點(diǎn)對(duì)點(diǎn)消息和Android接收
- Java中websocket消息推送的實(shí)現(xiàn)代碼
- 詳解在Spring Boot框架下使用WebSocket實(shí)現(xiàn)消息推送
- Spring和Websocket相結(jié)合實(shí)現(xiàn)消息的推送
相關(guān)文章
關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法
這篇文章主要介紹了關(guān)于同時(shí)使用swiper和echarts遇到的問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04微信小程序8種數(shù)據(jù)通信的方式小結(jié)
這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02js關(guān)于getImageData跨域問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js關(guān)于getImageData跨域問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果,手機(jī)登錄、填手機(jī)號(hào)獲取驗(yàn)證碼,倒計(jì)時(shí)后重新獲取效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)
在使用easyUI做前端樣式展示時(shí),遇到了文件上傳的問(wèn)題,而且是在彈出層中提交表單,想做到不刷新頁(yè)面,所以選擇了使用ajaxFileUpload插件。下面通過(guò)本文給大家分享springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng),需要的朋友參考下吧2017-04-04