Nodejs + Websocket 指定发送及群聊的实现

 更新时间:2020年01月09日 10:12:13   作者:秦九世  
这篇文章主要介绍了Nodejs + Websocket 指定发送及群聊的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

 目的

通过nodejs + ws (Websocket) 实现点对点发送及群聊发送
项目搭建直接跳过,这里列举一下用到的插件
yarn add ws

WebSocket

话不多说,直接上码

对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用,
webSocket 点对点也好,群聊也好,主要是用到一个方法 clients 它的作用就是存储了连接,
我们可以通过对每一个连接增加标识,然后根据接收到的信息进行解析,遍历然后发送正确的响应。

先解析下代码(小声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,这样页面在其他电脑也可以发送到你的页面上

可以看到,在BBB的页面,接收到了AAA发送的信息

无论是AAA发送的群里信息,还是BBB发送的群里信息,在群聊页面都是可以看到的

至此,一个简单的私聊,群聊 WebSocket 就完成了,最后希望大家有所收获,再会!!

参考网址如下:   https://www.jb51.net/article/178117.htm

本篇文章是为记录小白的成长历程(主要是记性不好,记个笔记有保障,用到的时候可以拿出来瞅瞅) 2019/12/26

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Node.js创建一个Express服务的方法详解

    Node.js创建一个Express服务的方法详解

    这篇文章主要介绍了Node.js创建一个Express服务的方法,结合实例形式分析了node.js创建Express服务的具体步骤、实现方法及相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • nodejs 中的读取文件fs模块示例详解

    nodejs 中的读取文件fs模块示例详解

    这篇文章主要为大家介绍了nodejs中的读取文件fs模块示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • nodejs6下使用koa2框架实例

    nodejs6下使用koa2框架实例

    本篇文章主要介绍了nodejs6下使用koa2框架实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • node.js中stream流中可读流和可写流的实现与使用方法实例分析

    node.js中stream流中可读流和可写流的实现与使用方法实例分析

    这篇文章主要介绍了node.js中stream流中可读流和可写流的实现与使用方法,结合实例形式分析了node.js stream流可读流和可写流基本分类、原理、定义、使用方法及相关注意事项,需要的朋友可以参考下
    2020-02-02
  • Node.js视频流应用创建之后端的全过程

    Node.js视频流应用创建之后端的全过程

    这篇文章主要给大家介绍了关于创建Node.js视频流应用之后端的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Koa代理Http请求的示例代码

    Koa代理Http请求的示例代码

    这篇文章主要介绍了Koa代理Http请求的示例代码,详解介绍了Koa 代理http请求,解决跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • node.js解决获取图片真实文件类型的问题

    node.js解决获取图片真实文件类型的问题

    这篇文章主要介绍了node.js解决获取图片真实文件类型的问题,本文根据二进制流及文件头获取文件类型mime-type,然后读取文件二进制的头信息,获取其真实的文件类型,需要的朋友可以参考下
    2014-12-12
  • Node.js实现的简易网页抓取功能示例

    Node.js实现的简易网页抓取功能示例

    这篇文章主要介绍了Node.js实现的简易网页抓取功能示例,本文使用了PhantomJS、node-phantomjs等库实现,需要的朋友可以参考下
    2014-12-12
  • 详解Node项目部署到云服务器上

    详解Node项目部署到云服务器上

    本篇文章主要介绍了详解Node项目部署到云服务器上,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 前端node Session和JWT鉴权登录示例详解

    前端node Session和JWT鉴权登录示例详解

    关于前端鉴权登录是比较常见的需求了,本文将从服务端渲染和前后端分离的不同角度下演示鉴权,为大家介绍前端node Session和JWT鉴权登录示例详解
    2022-07-07

最新评论