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 实现模拟form表单上传文件
Jul 14 NodeJs
Nodejs实现多人同时在线移动鼠标的小游戏分享
Dec 06 NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
Windows系统中安装nodejs图文教程
Feb 28 NodeJs
ubuntu下安装nodejs以及升级的办法
May 08 NodeJs
nodejs加密Crypto的实例代码
Jul 07 NodeJs
3分钟快速搭建nodejs本地服务器方法运行测试html/js
Apr 01 NodeJs
docker中编译nodejs并使用nginx启动
Jun 23 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
Nodejs 复制文件/文件夹的方法
Aug 24 NodeJs
nodejs对express中next函数的一些理解
Sep 08 NodeJs
nodejs基于express实现文件上传的方法
Mar 19 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
德劲1107的电路分析与打磨
2021/03/02 无线电
windows xp下安装pear
2006/12/02 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python中的yield浅析
2014/06/16 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
新东网科技Java笔试题
2012/07/13 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
数据员岗位职责
2013/11/19 职场文书
高中军训感想300字
2014/03/04 职场文书
2014年个人委托书范本
2014/10/13 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
明确岗位职责
2015/02/14 职场文书
高二数学教学反思
2016/02/18 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Django drf请求模块源码解析
2021/06/08 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers