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教程 安装express及配置app.js文件的详细步骤
May 11 NodeJs
Nodejs关于gzip/deflate压缩详解
Mar 04 NodeJs
nodejs通过phantomjs实现下载网页
May 04 NodeJs
windows 下安装nodejs 环境变量设置
Feb 02 NodeJs
使用 NodeJS+Express 开发服务端的简单介绍
Apr 07 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 NodeJs
nodejs实现连接mongodb数据库的方法示例
Mar 15 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
nodejs同步调用获取mysql数据时遇到的大坑
Mar 02 NodeJs
Nodejs在局域网配置https访问的实现方法
Oct 17 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
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php导出生成word的方法
2015/12/25 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
JS模拟实现京东快递单号查询
2020/11/30 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python实现udp聊天窗口
2020/03/31 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
python 8种必备的gui库
2020/08/27 Python
如何写出好的Java代码
2014/04/25 面试题
装修致歉信
2014/01/15 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
处级干部考察材料
2014/12/24 职场文书
护理培训心得体会
2016/01/22 职场文书
使用Python拟合函数曲线
2022/04/14 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
php解析非标准json、非规范json的方式实例
2022/05/10 PHP