Nodejs + Websocket 指定发送及群聊

时间 2019-12-29

标签 nodejs websocket 指定发送繁體版

原文原文链接

目的

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

WebSocket

话很少说，直接上码html

对比上一篇文章 << 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

这里我分别建了三个页面其中两个模拟用户，一个模拟群聊node

这是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>
复制代码

下面的是只用来接收的群页面，更简单web

<!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发送的信息bash

不管是AAA发送的群里信息，仍是BBB发送的群里信息，在群聊页面都是能够看到的socket

至此，一个简单的私聊，群聊 WebSocket 就完成了，最后但愿你们有所收获，再会!!spa

参考网址以下
    https://www.jianshu.com/p/1a85c436917d
复制代码

本篇文章是为记录小白的成长历程（主要是记性很差，记个笔记有保障，用到的时候能够拿出来瞅瞅） 2019/12/26插件