Nodejs + Websocket 指定發(fā)送及群聊的實(shí)現(xiàn)
目的
通過nodejs + ws (Websocket) 實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)發(fā)送及群聊發(fā)送
項(xiàng)目搭建直接跳過，這里列舉一下用到的插件
yarn add ws
WebSocket
話不多說，直接上碼
對(duì)比上一篇文章 << Nodejs+MongoDB 搭建服務(wù)( demo ) >> server.js 主要是增加了ws的引用，
webSocket 點(diǎn)對(duì)點(diǎn)也好，群聊也好，主要是用到一個(gè)方法 clients 它的作用就是存儲(chǔ)了連接，
我們可以通過對(duì)每一個(gè)連接增加標(biāo)識(shí)，然后根據(jù)接收到的信息進(jìn)行解析，遍歷然后發(fā)送正確的響應(yīng)。
先解析下代碼（小聲BB）, 下面會(huì)有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 {
// 這里只做一個(gè)小的場景，不是登陸就是發(fā)送信息
// 根據(jù)存儲(chǔ)的id 是否是要 發(fā)送的對(duì)象 來單獨(dú)響應(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
這里我分別建了三個(gè)頁面其中兩個(gè)模擬用戶，一個(gè)模擬群聊
這是BBB用戶，另一個(gè)頁面是 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ā)送對(duì)象
"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) {
// 這里主要作用就是注冊(cè)下群成立了 ......
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 可以換成的你的本機(jī)IP，這樣頁面在其他電腦也可以發(fā)送到你的頁面上
可以看到，在BBB的頁面，接收到了AAA發(fā)送的信息
無論是AAA發(fā)送的群里信息，還是BBB發(fā)送的群里信息，在群聊頁面都是可以看到的
至此，一個(gè)簡單的私聊，群聊 WebSocket 就完成了，最后希望大家有所收獲，再會(huì)!!
參考網(wǎng)址如下： http://www.dbjr.com.cn/article/178117.htm
本篇文章是為記錄小白的成長歷程（主要是記性不好，記個(gè)筆記有保障，用到的時(shí)候可以拿出來瞅瞅） 2019/12/26
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了nodejs爬蟲初試superagent和cheerio的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了node.js如何充分利用多核cpu，想了解node.js的同學(xué)，可以參考下2021-04-04
nodejs獲取本機(jī)內(nèi)網(wǎng)和外網(wǎng)ip地址的實(shí)現(xiàn)代碼
這篇文章主要介紹了nodejs獲取本機(jī)內(nèi)網(wǎng)和外網(wǎng)ip地址的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-06-06
這篇文章我們將學(xué)習(xí)Node對(duì)文件夾的操作,當(dāng)我們學(xué)習(xí)完文件夾的操作后結(jié)合文件的操作我們就可以真正的通過Node在日常的工作生活中解決許多和文件相關(guān)的問題,這篇文章我們將首先講解文件夾操作的幾個(gè)API,然后完成一下最常見的文件夾遞歸的操作,需要的朋友可以參考下2024-08-08
Node.js dgram模塊實(shí)現(xiàn)UDP通信示例代碼
這篇文章主要介紹了Node.js dgram模塊實(shí)現(xiàn)UDP通信示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Nodejs中讀取中文文件編碼問題、發(fā)送郵件和定時(shí)任務(wù)實(shí)例
這篇文章主要介紹了Nodejs中讀取中文文件編碼問題、發(fā)送郵件和定時(shí)任務(wù)實(shí)例,本文使用了3個(gè)模塊來解決這3個(gè)需求,并給出了代碼操作實(shí)例,需要的朋友可以參考下2015-01-01
基于uniapp與node.js實(shí)現(xiàn)的微信授權(quán)登錄功能實(shí)例
前端一直是一塊充滿驚喜的土地,不僅是那些富有創(chuàng)造性的頁面,還有那些驚贊的效果及不斷推出的新技術(shù),下面這篇文章主要給大家介紹了關(guān)于如何基于uniapp與node.js實(shí)現(xiàn)的微信授權(quán)登錄功能的相關(guān)資料,需要的朋友可以參考下2023-05-05
本文給大家介紹的是node.js的初體驗(yàn)，從最簡單的內(nèi)容開始，慢慢的深入分析node.js。并附上一則很不錯(cuò)的文章《7天學(xué)會(huì)nodeJS》更加詳細(xì)的向我們展示了node.js的學(xué)習(xí)步驟。2015-03-03
詳解如何利用Nodejs構(gòu)建多進(jìn)程應(yīng)用
這篇文章主要為大家介紹了如何利用Nodejs構(gòu)建多進(jìn)程應(yīng)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了koa2的中間件功能及應(yīng)用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03