Nodejs + Websocket 指定發(fā)送及群聊的實現(xiàn)
目的
通過nodejs + ws (Websocket) 實現(xiàn)點對點發(fā)送及群聊發(fā)送
項目搭建直接跳過，這里列舉一下用到的插件
yarn add ws
WebSocket
話不多說，直接上碼
對比上一篇文章 << Nodejs+MongoDB 搭建服務(wù)( demo ) >> server.js 主要是增加了ws的引用，
webSocket 點對點也好，群聊也好，主要是用到一個方法 clients 它的作用就是存儲了連接，
我們可以通過對每一個連接增加標(biāo)識，然后根據(jù)接收到的信息進行解析，遍歷然后發(fā)送正確的響應(yīng)。
先解析下代碼（小聲BB）, 下面會有HTML頁面
nbs.on("connection", (ws, req) => {
ws.on("message", message => {
// 這里解析數(shù)據(jù)
const result = JSON.parse(message);
// 是否是登陸，登陸后綁定id
if (result.login) {
ws.socketIdxos = result.id;
} else {
// 這里只做一個小的場景，不是登陸就是發(fā)送信息
// 根據(jù)存儲的id 是否是要 發(fā)送的對象 來單獨響應(yīng)
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", // 當(dāng)前ID
"login":false, // 是否登陸
"to":"AAA111", // 發(fā)送對象
"mes":"我是BBB111,這是發(fā)送給AAA111的消息" // 發(fā)送內(nèi)容
}));
}
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();"> 發(fā)送 </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",
"login":true,
}));
}
ws.onmessage = function (e) {
console.log(e,"eeee-");
}
</script>
</head>
<body >
</body>
</html>
展示
const ws = new WebSocket("ws://localhost:8181");
localhost 可以換成的你的本機IP，這樣頁面在其他電腦也可以發(fā)送到你的頁面上
可以看到，在BBB的頁面，接收到了AAA發(fā)送的信息
無論是AAA發(fā)送的群里信息，還是BBB發(fā)送的群里信息，在群聊頁面都是可以看到的
至此，一個簡單的私聊，群聊 WebSocket 就完成了，最后希望大家有所收獲，再會!!
參考網(wǎng)址如下： http://m.fzitv.net/article/178117.htm
本篇文章是為記錄小白的成長歷程（主要是記性不好，記個筆記有保障，用到的時候可以拿出來瞅瞅） 2019/12/26
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
nodejs不用electron實現(xiàn)打開文件資源管理器并選擇文件
最近在開發(fā)一些小腳本,用 nodejs 實現(xiàn),其中很多功能需要選擇一個/多個文件,或者是選擇一個文件夾,這種情況下網(wǎng)上給出的解決方案都是 electron,但是我一個小腳本用 electron 屬實有點夸張了,后來轉(zhuǎn)念一想可以通過 powershell 來實現(xiàn)類似的功能,需要的朋友可以參考下2024-01-01
node.js實現(xiàn)批量修改git項目的數(shù)據(jù)源(步驟詳解)
文章介紹了如何使用Node.js腳本批量修改大型項目中各個項目的Git地址域名,通過引入模塊、聲明域名常量、定義遍歷函數(shù)和修改目錄等步驟,實現(xiàn)一次性批量修改,從而節(jié)省時間和精力2024-11-11
這篇文章主要為大家詳細(xì)介紹了nodejs multer實現(xiàn)文件上傳與下載的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
node.js支持多用戶web終端實現(xiàn)及安全方案
這篇文章主要介紹了node.js支持多用戶web終端實現(xiàn)方案以及web終端安全性保證的解決方法，一起學(xué)習(xí)參考下。2017-11-11
本文主要介紹了用nvm來管理Node.js版本,通過nvm用戶可以輕松地在不同版本的Node.js之間切換,具有一定的參考價值,感興趣的可以了解一下2024-12-12
node.js將MongoDB數(shù)據(jù)同步到MySQL的步驟
這篇文章主要給大家介紹了關(guān)于node.js將MongoDB數(shù)據(jù)同步到MySQL的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
服務(wù)器管理是系統(tǒng)上線后，必須要面對的問題。最好有一個軟件可以提供整套的服務(wù)器運行解決方案：要求運行穩(wěn)定，支持高并發(fā)，啟動/停止命令簡單，支持熱部署，宕機重啟，監(jiān)控界面和日志，集群環(huán)境。2014-06-06
nodejs實現(xiàn)獲取當(dāng)前url地址及url各種參數(shù)值
這篇文章主要介紹了nodejs實現(xiàn)獲取當(dāng)前url地址及url各種參數(shù)值,本文直接給出代碼實例,需要的朋友可以參考下2015-06-06
在傳統(tǒng)的開發(fā)模式中，瀏覽器端與服務(wù)器端是由不同的前后端兩個團隊開發(fā)，但是模版卻又在這兩者中間的模糊地帶。因此模版上面總不可避免的越來越多復(fù)雜邏輯，最終難以維護。2014-09-09
nodejs調(diào)用cmd命令實現(xiàn)復(fù)制目錄
本文給大家介紹的是如何在nodejs中調(diào)用CMD命令，從而實現(xiàn)目錄的復(fù)制，非常的實用，有需要的小伙伴可以參考下。2015-05-05