摘要:為了達到這種雙向的實時消息傳遞,很明顯地考慮用來實現。注意這個文件并不能用在實際的項目中,只是用來顯示消息推送的效果而已。參考資料本文在我博客上的原地址利用實現消息實時推送
項目背景介紹
最近在寫的項目中存在著社交模塊,需要實現這樣的一個功能:當發生了用戶被點贊、評論、關注等操作時,需要由服務器向用戶實時地推送一條消息。最終完成的項目地址為:socket-message-push,這里將介紹一下實現的思路及部分代碼。
項目的流程中存在著這樣的幾個對象:
用 Java 實現的后端服務器
用 Node.js 實現的消息推送服務器
用戶進行操作的客戶端
事件處理的流程如下:
用戶進行點贊操作時,后端服務器會進行處理,并向 Node.js 消息推送服務器發送一條消息
Node.js 消息推送服務器接收到后端發送的消息后,處理數據,并確定向哪個用戶進行推送
用戶的客戶端接收到由 Node.js 服務器推送來的消息后,即可進行通知的顯示。
上面的流程中,Java 后端服務器是如何實現的不在此篇文章的討論范圍內,本文將主要介紹如何使用 Node.js 來實現這個消息推送服務器。
考慮消息推送服務器上必須記錄下當前在線用戶的信息,這樣才能向特定的用戶推送消息。所以當用戶登錄時,必須將自身的用戶信息發到 Node.js 服務器上。為了達到這種雙向的實時消息傳遞,很明顯地考慮用 WebSocket 來實現。既然我們在消息推送服務器上使用了 Node.js,我們就有了一個很方便的選項:socket.io。
Socket.io 介紹Socket.io是一個用 JavaScript 實現的實時雙向通信的庫,利用它來實現我們的功能會很簡單。
socket.io 包含兩個部分:
服務器端(server):運行在 Node.js 服務器上
客戶端(client):運行在瀏覽器中
可以看看如下的 socket.io 的示例代碼,它給出了 socket.io 發出及監聽事件的基本用法:
io.on("connection", function(socket){ socket.emit("request", /* */); // emit an event to the socket io.emit("broadcast", /* */); // emit an event to all connected sockets socket.on("reply", function(){ /* */ }); // listen to the event });
關于 Socket.io 還有一點需要注意:Socke.io 并不完全是 WebSocket 的實現。
Note: Socket.IO is not a WebSocket implementation. Although Socket.IO indeed uses WebSocket as a transport when possible, it adds some metadata to each packet: the packet type, the namespace and the ack id when a message acknowledgement is needed.
接下來我們需要用 Express.js 來建立一個服務器端程序,并在其中引入 Socket.io。
Node.js 服務器的搭建 利用 Express.js 搭建基礎服務器我們使用了 Express.js 來搭建 Node.js 消息推送服務器,先利用一個簡要的例子來瀏覽其功能:
// server.js const express = require("express"); const app = express(); const path = require("path"); const http = require("http").Server(app); const port = 4001; app.use(express.static(path.join(__dirname, "public"))); app.get("/", function(req, res) { res.sendFile(__dirname + "/public/index.html"); }); app.get("/api", function(req, res) { res.send("."); }); http.listen(port, function() { console.log(`listening on port:${port}`); });
將上面的代碼保存為 server.js,新建一個 public 文件夾,在其中放入 index.html 文件。運行以下命令:
node server.js
現在即可在 localhost:4001 查看效果了。
引入 Socket.io現在已經有了一個基礎的 Express 服務器,接下來需要將 Socket.io 加入其中。
const io = require("socket.io")(http); io.on("connection", function(socket) { console.log("a user connected"); socket.broadcast.emit("new_user", {}); }
這里的 io 監聽 connection 事件,當 client 與 server 建立了連接之后,這里的回調函數會被調用(client 中的代碼將在下一節介紹)。
函數的參數 socket 代表的是當前的 client 和 server 間建立的這個連接。可在 client 程序中將這個建立的 socket 連接打印出來,如下圖所示:
其中的 id 屬性可以用于標識出這一連接,從而 server 可以向特定的用戶發送消息。
socket.broadcast.emit("new_user", {});
這一行代碼表示 socket 將向當前所有與 server 建立了連接的 client(不包括自己) 廣播一條名為 new_user 的消息。
后端推送消息的處理流程在 Node 服務器建立一個用戶信息和 socket id 的映射表,因為同一用戶可能打開了多個頁面,所以他的 socket id 可能存在多個值。當用戶建立連接時,往其中添加值;用戶斷開連接后,刪除相應值。
當 Java 后臺存在需要推送的消息時,會向 Node 服務器的 /api 路徑 post 一條消息,其中包括用于標識用戶的 tokenId 和其它數據。
Node 服務器接收到 post 請求后,對請求內容進行處理。根據 tokenId 找出與該用戶對應的 socket id,socket.io 會根據 id 來向用戶推送消息。
對用戶信息的處理方便起見,這里只用一個數組保存用戶信息,實際工作中可以根據需要放入數據庫中保存。
global.users = []; // 記錄下登錄用戶的tokenId, socketId
當用戶登錄時,client 會向 server 發送 user_login 事件,服務器接收到后會做如下操作:
socket.on("user_login", function(info) { const { tokenId, userId, socketId } = info; addSocketId(users, { tokenId, socketId, userId }); });
addSocketId() 會向 users 數組中添加用戶信息,不同用戶通過 tokenId 進行區分,每個用戶有一個 socketIds 數組,保存可能存在的多個 socketId。該函數的具體代碼可見 src/utils.js 文件。
同理,還有一個 deleteSocketId() 函數用于刪除用戶信息,代碼可見同一文件。
在獲取了用戶的 tokenId 之后,就需要找到對應的 socketId,然后向特定用戶推送消息。
// 只向 id = socketId 的這一連接發送消息 io.sockets.to(socketId).emit("receive_message", { entityType, data });
服務器的思路大致如此,接下來介紹客戶端中是如何進行相應的處理的。
客戶端 Socket.io 的初始化首先在 html 文件中引入 Socket.io 的 client 端文件,例如通過 CDN 引入:
其它的引入方式:
const io = require("socket.io-client"); // or with import syntax import io from "socket.io-client";
引入 Socket.io 后就獲得了 io 函數,通過它來與消息推送服務器建立連接。
// 假設你將 Node 服務器部署后的地址為:https://www.example.com/ws // 則: WS_HOST = "https://www.example.com" const msgSocket = io(`${WS_HOST}`, { secure: true, path: "/ws/socket.io" });
如果監聽本地:
const msgSocket = io("http://localhost:4001");
這里如果寫成 io("https://www.example.com/ws") 會出現錯誤,需要將 /ws 寫入path中。
為了能在其它文件使用這一變量,可將 msgSocket 作為一個全局變量:
window.msgSocket = msgSocket;用戶建立連接
// 用戶登錄時,向服務器發送用戶的信息。服務器會在收到信息后建立 socket 與用戶的映射。 msgSocket.emit("user_login", { userId, socketId: msgSocket.id, tokenId });接收到推送的消息后的處理
// WebSocket 連接建立后,監聽名為 receive_message 的事件 msgSocket.on("receive_message", msg => { store.dispatch({ type: "NEW_SOCKET_MSG", payload: msg }); });
當 WebSocket 服務器向客戶端推送了消息之后,客戶端需要監聽 receive_message 事件,接收到的參數中有相應待處理的信息。
由于使用了 Redux 進行數據的處理,所以這里 dispatch 了一個 NEW_SOCKET_MSG action,后續則是常規的 redux 處理流程了。
項目的使用GitHub 上的項目地址:socket-message-push
npm run dev
即可在 devlopment 環境下進行測試,現在你就有了一個運行在4001端口的消息推送服務器了。
但是這里并沒有后端的服務器來向我們發送消息,所以我們將利用 Postman 來模擬發送消息。
為了展示程序的功能,在項目的 client 文件夾下放置了一個 index.html 文件。注意這個文件并不能用在實際的項目中,只是用來顯示消息推送的效果而已。
在開啟了服務器之后,打開 client/index.html,根據提示隨意輸入一個 tokenId 即可。
現在利用 Postman 向 localhost:4001/api post 如下的一條信息:
{ // tokens 數組表示你想向哪個用戶推送消息 "tokens": ["1", "2"], "data": "You shall not pass!!!" }
至此,如果一切順利,你應該能夠在 client 的控制臺中看到收到的消息了。
你可以打開多個 client 頁面,輸入不同的 tokenId,然后檢查消息是否發送給了正確的用戶。
參考資料https://github.com/socketio/s...
https://socket.io/docs/
本文在我博客上的原地址:利用 socket.io 實現消息實時推送
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85156.html
摘要:并且指定收到消息,以及端口的監聽方法。四代碼示例多房間實時聊天室配置版本須在里配置定義,并設置。使同一個的請求能夠落在同一個機器同一個進程中。通過主進程統一管理維護子進程,每個進程監聽一個端口。 showImg(http://7tszky.com1.z0.glb.clouddn.com/FkhApdRySR927nkdDZuUPBQbJtXG); 一、相關技術介紹: 消息實時推送,指的...
摘要:同時借助實現在非接口中推送消息流。每分秒鐘最多的彈幕數目彈幕數量過多時優先加載最新的。 項目起始原因 源于數據庫課設和以前的一次突發奇想。其實還有其他微信公眾號的彈幕系統,但是我發現使用體驗不佳,因為那種彈幕系統都是私用,并且只支持同時進行一個房間的使用。所以便萌生了自己寫一個的想法。(第一次寫md,有點不會,希望諒解--) 主要技術點 Redis(結合socket實現在非socke...
摘要:目前網站有兩個用到實時消息推送的功能,源碼最新動態,實時顯示用戶的操作行為消息推送,如重要消息通知,任務指派等等考慮的問題既然要實現即時,那就少不了。 目前網站有兩個用到實時消息推送的功能,源碼:https://github.com/wuzhc/team 最新動態,實時顯示用戶的操作行為 消息推送,如重要消息通知,任務指派等等 考慮的問題 既然要實現即時,那就少不了socketi...
閱讀 3917·2021-11-24 09:38
閱讀 3088·2021-11-17 09:33
閱讀 3863·2021-11-10 11:48
閱讀 1234·2021-10-14 09:48
閱讀 3123·2019-08-30 13:14
閱讀 2543·2019-08-29 18:37
閱讀 3386·2019-08-29 12:38
閱讀 1410·2019-08-29 12:30