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服务器(6):作出响应
Dec 18 NodeJs
NodeJS和BootStrap分页效果的实现代码
Nov 07 NodeJs
NodeJS整合银联网关支付(DEMO)
Nov 09 NodeJs
Nodejs+Socket.io实现通讯实例代码
Feb 13 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
nodejs 终端打印进度条实例代码
Apr 22 NodeJs
使用Nodejs连接mongodb数据库的实现代码
Aug 21 NodeJs
详解使用PM2管理nodejs进程
Oct 24 NodeJs
nodejs中art-template模板语法的引入及冲突解决方案
Nov 07 NodeJs
windows系统下更新nodejs版本的方案
Nov 24 NodeJs
nodeJS微信分享
Dec 20 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 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
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
浅析is_writable的php实现
2013/06/18 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
php cli配置文件问题分析
2015/10/15 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
JavaScript 事件系统
2010/07/22 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
办公室内勤工作职责
2013/12/11 职场文书
村干部培训班主持词
2014/03/28 职场文书
五好关工委申报材料
2014/05/31 职场文书
夏洛特的网观后感
2015/06/15 职场文书
结婚司仪主持词
2015/06/29 职场文书
欢送会主持词
2015/07/01 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
导游词之台湾阿里山
2019/10/23 职场文书