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(一)--- Node.js简介及安装开发环境
May 20 NodeJs
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
Sep 26 NodeJs
nodejs加密Crypto的实例代码
Jul 07 NodeJs
Nodejs从有门道无门菜鸟起飞必看教程
Jul 20 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
nodejs爬虫初试superagent和cheerio
Mar 05 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
nodejs aes 加解密实例
Oct 10 NodeJs
nodeJS进程管理器pm2的使用
Jan 09 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 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 函数使用方法与函数定义方法
2010/05/09 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
二级域名转向类
2006/11/09 Javascript
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python多线程http下载实现示例
2013/12/30 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
课堂打架检讨书200字
2014/11/21 职场文书
教师先进个人材料
2014/12/17 职场文书
离婚协议书怎么写
2015/01/26 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
升学宴学生致辞
2015/09/29 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
Consul在linux环境的集群部署
2022/04/08 Servers
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技
Apache自带的ab压力测试工具的实现
2022/07/23 Servers