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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
nodejs基于WS模块实现WebSocket聊天功能的方法
本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法.分享给大家供大家参考,具体如下: WebSocket 模块众多,我选择了一个较为简单的模块 进行了实现. 工具:Sublime 技术:Node.js 引用模块 ws 最终效果如下 本来打算制作网络画板,因为工作忘记了,这里就简单实现了 群聊功能 没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是 node 导入模块问题了) 介绍一下安装模块: 找到安装node 目录,进入到 npm 目录下 运行
-
Node.js websocket使用socket.io库实现实时聊天室
认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部
-
基于html5和nodejs相结合实现websocket即使通讯
最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏.这样的话就要用到实时通讯了,而WebSocket无疑是最合适的.WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量.所以WebSocket暂时来说是实时通讯的最佳协
-
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功能.分享给大家供大家参考,具体如下: 我们基于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实时聊天系统的改进版本,具体内容如下 自己也是真的菜,一个websocket简单聊天系统硬被我搞了那么些天. 看来以后还是得写更多的代码. client.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q
-
基于Node.js + WebSocket打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍. 源码 源码
-
NodeJs 实现简单WebSocket即时通讯的示例代码
服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了: 服务端代码 根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象. var ws = require("nodejs-websoc
-
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
-
基于node实现websocket协议
一.协议 WebSocket是一种基于TCP之上的客户端与服务器全双工通讯的协议,它在HTML5中被定义,也是新一代webapp的基础规范之一. 它突破了早先的AJAX的限制,关键在于实时性,服务器可以主动推送内容 到客户端!可能的应用有:多人在线游戏,即时聊天,实时监控,远程桌面,新闻服务器等等. 对于我自己,当前最想尝试的是canvas+websocket组合起来能做什么. 二.实现 由于握手的过程是一个标准的HTTP请求,因此 websocket 的实现有两种选择:1)TCP上实现: 2)