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插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。