Nodejs + Websocket 指定傳送及群聊的實現
阿新 • • 發佈：2020-01-10
目的
通過nodejs + ws (Websocket) 實現點對點發送及群聊傳送
專案搭建直接跳過，這裡列舉一下用到的外掛
yarn add ws
WebSocket
話不多說，直接上碼
對比上一篇文章 << Nodejs+MongoDB 搭建服務( demo ) >> server.js 主要是增加了ws的引用，
webSocket 點對點也好，群聊也好，主要是用到一個方法 clients 它的作用就是儲存了連線，
我們可以通過對每一個連線增加標識，然後根據接收到的資訊進行解析，遍歷然後傳送正確的響應。
先解析下程式碼（小聲BB）,下面會有HTML頁面
nbs.on("connection",(ws,req) => {
ws.on("message",message => {
// 這裡解析資料
const result = JSON.parse(message);
// 是否是登陸，登陸後繫結id
if (result.login) {
ws.socketIdxos = result.id;
} else {
// 這裡只做一個小的場景，不是登陸就是傳送資訊
// 根據儲存的id 是否是要 傳送的物件 來單獨響應
nbs.clients.forEach(s => {
if (s.socketIdxos == result.to && s.readyState == 1) {
s.send(JSON.stringify({ data: result.mes }));
}
});
}
});
ws.on("close",message => {
console.log(ws.socketIdxos,"退出連線");
});
});HTML
這裡我分別建了三個頁面其中兩個模擬使用者，一個模擬群聊
這是BBB使用者，另一個頁面是 AAA 只是改了下資訊而已，就不都貼上來了，很簡單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BBB111</title>
<script>
const ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
ws.send(JSON.stringify({
"id":"BBB111","login":true,}));
}
function sendMessage() {
ws.send(JSON.stringify({
"id":"BBB111",// 當前ID
"login":false,// 是否登陸
"to":"AAA111",// 傳送物件
"mes":"我是BBB111,這是傳送給AAA111的訊息" // 傳送內容
}));
}
function sendYUYUYU() {
ws.send(JSON.stringify({
"id":"BBB111","login":false,"to":"YUYUYU","mes":"我是BBB111,這是到群裡的訊息"
}));
}
ws.onmessage = function (e) {
console.log(e,"eeee-");
}
</script>
</head>
<body >
<button onclick="sendMessage();"> 傳送 </button>
<button onclick="sendYUYUYU();"> 群聊 </button>
</body>
</html>下面的是隻用來接收的群頁面，更簡單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>群聊</title>
<script>
const ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
// 這裡主要作用就是註冊下群成立了 ......
ws.send(JSON.stringify({
"id":"YUYUYU",}));
}
ws.onmessage = function (e) {
console.log(e,"eeee-");
}
</script>
</head>
<body >
</body>
</html>展示
const ws = new WebSocket("ws://localhost:8181");
localhost 可以換成的你的本機IP，這樣頁面在其他電腦也可以傳送到你的頁面上
可以看到，在BBB的頁面，接收到了AAA傳送的資訊
無論是AAA傳送的群裡資訊，還是BBB傳送的群裡資訊，在群聊頁面都是可以看到的
至此，一個簡單的私聊，群聊 WebSocket 就完成了，最後希望大家有所收穫，再會!!
參考網址如下：https://www.jb51.net/article/178117.htm
本篇文章是為記錄小白的成長曆程（主要是記性不好，記個筆記有保障，用到的時候可以拿出來瞅瞅） 2019/12/26
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。