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实现PHP的print_r函数代码
Mar 14 NodeJs
跟我学Nodejs(一)--- Node.js简介及安装开发环境
May 20 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
Nodejs调用WebService的示例代码
Sep 29 NodeJs
nodejs+mongodb+vue前后台配置ueditor的示例代码
Jan 02 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 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
短波的认识
2021/03/01 无线电
解决GD中文乱码问题
2007/02/14 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Flask之flask-session的具体使用
2018/07/26 Python
python3学生名片管理v2.0版
2018/11/29 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
2015年酒店年度工作总结
2015/05/23 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android