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

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

赞 (0)

相关推荐

  • Node.js websocket使用socket.io库实现实时聊天室

    Node.js websocket使用socket.io库实现实时聊天室

    认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

  • 基于node实现websocket协议

    一.协议 WebSocket是一种基于TCP之上的客户端与服务器全双工通讯的协议,它在HTML5中被定义,也是新一代webapp的基础规范之一. 它突破了早先的AJAX的限制,关键在于实时性,服务器可以主动推送内容 到客户端!可能的应用有:多人在线游戏,即时聊天,实时监控,远程桌面,新闻服务器等等. 对于我自己,当前最想尝试的是canvas+websocket组合起来能做什么. 二.实现 由于握手的过程是一个标准的HTTP请求,因此 websocket 的实现有两种选择:1)TCP上实现: 2)

  • 基于html5和nodejs相结合实现websocket即使通讯

    基于html5和nodejs相结合实现websocket即使通讯

    最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏.这样的话就要用到实时通讯了,而WebSocket无疑是最合适的.WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量.所以WebSocket暂时来说是实时通讯的最佳协

  • 基于Node.js + WebSocket打造即时聊天程序嗨聊

    基于Node.js + WebSocket打造即时聊天程序嗨聊

    前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍. 源码 源码

  • node.js ws模块搭建websocket服务端的方法示例

    首先下载websocket模块,命令行输入 npm install ws node.js的 模块ws,可用于创建websocket服务,基本的express 和 http模块的使用 var express = require('express'); var http = require('http'); var WebSocket = require('ws'); var app = express(); var server = http.createServer(app); var wss

  • nodejs+websocket实时聊天系统改进版

    nodejs+websocket实时聊天系统改进版

    本文属于nodejs+websocket实时聊天系统的改进版本,具体内容如下 自己也是真的菜,一个websocket简单聊天系统硬被我搞了那么些天. 看来以后还是得写更多的代码. client.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

  • NodeJS简单实现WebSocket功能示例

    本文实例讲述了NodeJS简单实现WebSocket功能.分享给大家供大家参考,具体如下: 我们基于express和socket.io开发,首先我们需要安装以下包 npm install --save express npm install --save socket.io 服务器端代码: var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(ht

  • NodeJs 实现简单WebSocket即时通讯的示例代码

    NodeJs 实现简单WebSocket即时通讯的示例代码

    服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了: 服务端代码 根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象. var ws = require("nodejs-websoc

  • websocket+node.js实现实时聊天系统问题咨询

    websocket+node.js实现实时聊天系统问题咨询

    1.最近新学习websocket.做了一个实时聊天.用Node.js搭建的服务:serevr.js. 两个相互通信页面:client.html 和server.html 但是就是有很多问题,想让知道的人帮我看看哈: 我先把代码贴出来: server.js: var ws=require("nodejs-websocket"); console.log("开始建立连接..."); var str1=null,str2=null, clientReady=false,s

  • nodejs基于WS模块实现WebSocket聊天功能的方法

    本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法.分享给大家供大家参考,具体如下: WebSocket 模块众多,我选择了一个较为简单的模块 进行了实现. 工具:Sublime 技术:Node.js 引用模块 ws 最终效果如下 本来打算制作网络画板,因为工作忘记了,这里就简单实现了 群聊功能 没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是 node 导入模块问题了) 介绍一下安装模块: 找到安装node 目录,进入到 npm 目录下  运行

随机推荐