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 相关文章推荐
ubuntu下安装nodejs以及升级的办法
May 08 NodeJs
NodeJS远程代码执行
Aug 28 NodeJs
nodejs连接mongodb数据库实现增删改查
Dec 01 NodeJs
浅谈Nodejs中的作用域问题
Dec 26 NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
Nodejs进阶:express+session实现简易登录身份认证
Apr 24 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
Nodejs实现爬虫抓取数据实例解析
Jul 05 NodeJs
nodejs基础之多进程实例详解
Dec 27 NodeJs
NodeJs入门教程之定时器和队列
Mar 08 NodeJs
nodejs文件夹深层复制功能
Sep 03 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php截取字符串函数分享
2015/02/02 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python控制台中实现进度条功能
2015/11/10 Python
python分数表示方式和写法
2019/06/26 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
新郎新娘婚礼答谢词
2014/01/11 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
激励口号大全
2014/06/17 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
餐厅开业活动方案
2019/07/08 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
keepalived + nginx 实现高可用方案
2022/12/24 Servers