Nodejs + Websocket 指定发送及群聊的实现


Posted in NodeJs onJanuary 09, 2020

 目的

通过nodejs + ws (Websocket) 实现点对点发送及群聊发送
项目搭建直接跳过,这里列举一下用到的插件
yarn add ws

WebSocket

话不多说,直接上码

对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用,
webSocket 点对点也好,群聊也好,主要是用到一个方法 clients 它的作用就是存储了连接,
我们可以通过对每一个连接增加标识,然后根据接收到的信息进行解析,遍历然后发送正确的响应。

Nodejs + Websocket 指定发送及群聊的实现

先解析下代码(小声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", 
      "login":true,
     }));
    }
    ws.onmessage = function (e) {
     console.log(e,"eeee-");
    }
    </script>
   </head>
    
   <body >
  
   </body>
   </html>

展示

const ws = new WebSocket("ws://localhost:8181");
 localhost 可以换成的你的本机IP,这样页面在其他电脑也可以发送到你的页面上

Nodejs + Websocket 指定发送及群聊的实现

可以看到,在BBB的页面,接收到了AAA发送的信息

Nodejs + Websocket 指定发送及群聊的实现

无论是AAA发送的群里信息,还是BBB发送的群里信息,在群聊页面都是可以看到的

至此,一个简单的私聊,群聊 WebSocket 就完成了,最后希望大家有所收获,再会!!

参考网址如下:   https://3water.com/article/178117.htm

本篇文章是为记录小白的成长历程(主要是记性不好,记个笔记有保障,用到的时候可以拿出来瞅瞅) 2019/12/26

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
NodeJS学习笔记之网络编程
Aug 03 NodeJs
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
Sep 26 NodeJs
nodejs实现bigpipe异步加载页面方案
Jan 26 NodeJs
Nodejs获取网络数据并生成Excel表格
Mar 31 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
Sep 29 NodeJs
NodeJS实现视频转码的示例代码
Nov 18 NodeJs
nodejs更改项目端口号的方法
May 13 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
Sep 26 NodeJs
Nodejs文件上传、监听上传进度的代码
Mar 27 NodeJs
nodejs各种姿势断点调试的方法
Jun 18 NodeJs
在nodejs中创建child process的方法
Jan 26 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
Jan 06 #NodeJs
Nodejs封装类似express框架的路由实例详解
Jan 05 #NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 05 #NodeJs
nodejs开发一个最简单的web服务器实例讲解
Jan 02 #NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
Dec 05 #NodeJs
nodejs中使用archive压缩文件的实现代码
Nov 26 #NodeJs
NodeJS实现一个聊天室功能
Nov 25 #NodeJs
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
oracle资料库函式库
2006/10/09 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
一个JS翻页效果
2007/07/23 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
python中set()函数简介及实例解析
2018/01/09 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
简单了解python单例模式的几种写法
2019/07/01 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
python使用列表的最佳方案
2020/08/12 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Shell如何接收变量输入
2016/08/06 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
家长对学校的意见和建议
2015/06/03 职场文书