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)文章
JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法分析
這篇文章主要介紹了JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5相關(guān)函數(shù)修改頁(yè)面圖片元素顯示效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)解析經(jīng)緯度功能,涉及微信小程序map組件結(jié)合高德地圖進(jìn)行經(jīng)緯度獲取相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
JS碰撞運(yùn)動(dòng)實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS碰撞運(yùn)動(dòng)實(shí)現(xiàn)方法,詳細(xì)分析了碰撞運(yùn)動(dòng)的原理及相應(yīng)的javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
javascript 正則替換 replace(regExp, function)用法
剛在弄網(wǎng)頁(yè)通過(guò)servlet返回的json數(shù)據(jù)來(lái)添加div元素,簡(jiǎn)單研究了下replace(regExp, function)方式的function參數(shù).2010-05-05
JavaScript實(shí)現(xiàn)斗地主游戲的思路
這篇文章主要介紹了JavaScript實(shí)現(xiàn)斗地主游戲的思路的相關(guān)資料,需要的朋友可以參考下2016-02-02
Openlayers實(shí)現(xiàn)測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)測(cè)量功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
JavaScript實(shí)現(xiàn)獲取兩個(gè)排序數(shù)組的中位數(shù)算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取兩個(gè)排序數(shù)組的中位數(shù)算法,涉及javascript數(shù)組遍歷及數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
微信小程序?qū)W習(xí)總結(jié)(五)常見(jiàn)問(wèn)題實(shí)例小結(jié)
這篇文章主要介紹了微信小程序常見(jiàn)問(wèn)題,結(jié)合實(shí)例形式總結(jié)分析了微信小程序常見(jiàn)錯(cuò)誤、數(shù)據(jù)緩存、界面交換等相關(guān)操作技巧,需要的朋友可以參考下2020-06-06

