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教程之异步I/O
Nov 21 NodeJs
nodejs中实现阻塞实例
Mar 24 NodeJs
nodejs读写json文件的简单方法(必看)
Mar 09 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
Nodejs中Express 常用中间件 body-parser 实现解析
May 22 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 NodeJs
nodejs的路径问题的解决
Jun 30 NodeJs
使用nodejs分离html文件里的js和css详解
Apr 12 NodeJs
Nodejs中使用puppeteer控制浏览器中视频播放功能
Aug 26 NodeJs
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
Aug 20 NodeJs
Node.js实现爬取网站图片的示例代码
Apr 04 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中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php mail to 配置详解
2014/01/16 PHP
php 删除cookie方法详解
2014/12/01 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
js实现搜索栏效果
2018/11/16 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python并发和异步编程实例
2018/11/15 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
linux面试题参考答案(5)
2016/11/05 面试题
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
考研复习计划
2015/01/19 职场文书
小石潭记导游词
2015/02/03 职场文书
趣味运动会口号
2015/12/24 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers