小案例-WebSocket实现简易聊天室
前言
在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的“请求-问答模式”这一局限，实现了服务器主动向客户端传送数据。而本章将通过一种在单个TCP连接上进行全双工通信的协议--websocket协议，实现一个简单的聊天室（本文转载自xing.org1^大佬的博客，详情请点击此处跳转）
核心要点
聊天室的核心要点是由服务器向每个正在连接的用户发送消息，也就是上面讲到的改变。如果不是这样，只能是客户端以一个很短的时间间隔向服务端请求数据。
要做到广播，就需要server.connections，这个数组记录了所有连接到websocket服务器的用户（也就是进入聊天室的人），通过遍历这个数组，然后给数组中每个连接进来的用户对象发送消息即可。
实现这一功能的代码如下：
const ws = require('nodejs-websocket');
const server = ws.createServer((connect)=>{
/*
......
*/
// 对连接到服务端的每个对象发送数据
function broadcast(jsonStr){
server.connections.forEach((element)=>{
//切记，send参数必须是字符串类型，所以这里将对象字符串化
element.send(JSON.stringify(jsonStr));
});
}
})
聊天室实现代码
环境：
- nodejs
- npm install nodejs-websocket
客户端 test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小石头的群聊</title>
</head>
<body>
<div class="container">
<input type="text" placeholder="请输入要发送的内容" id="ipt">
<button id="btn">发送</button>
<button id="closeBtn">退出群聊</button>
<p>
群聊内容如下：
</p>
<div id="rst" style="width: 800px;height: 500px;background-color: greenyellow;"></div>
</div>
<script>
// 聊天室功能
const ws = new WebSocket('ws://localhost:8081'),
ipt = document.getElementById('ipt'),
btn = document.getElementById('btn'),
closeBtn = document.getElementById('closeBtn'),
content = document.getElementById('rst');
// 初次进入聊天室，给个提醒
ws.addEventListener('open', (e) => {
console.log('加入聊天室成功', e);
content.appendChild(creatEle('您已成功加入小石头的群聊~')); //
// 聊天区滚动到底
goBottom();
});
// 接收ws服务器发送的消息，并展示到div#rst当中
ws.addEventListener('message', (e) => {
console.log(e.data);
content.appendChild(creatEle(e.data));
goBottom();
});
// 一个带滚动条的DIV元素,怎么让它的滚动条位置默认保持在最底部?
function goBottom() {
content.scrollTop = content.scrollHeight;
}
// btn被点击时发送请求
btn.onclick = function () {
btnClickEvent();
}
ipt.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
btnClickEvent();
}
});
// close-btn被点击时退出群聊
closeBtn.onclick = function () {
ws.close();
}
// 创建一个p标签，存储对应内容，以追加到内容展示区域
function creatEle(str) {
console.log(str.indexOf('{'));
const TYPE_LEAVE = 0; //leave,离开
const TYPE_ENTRY = 1; //entry,进入
const TYPE_SPEAK = 2; //speak,发言
const eleP = document.createElement('p');
if (str.indexOf('{') == 0) {
let parseStr = JSON.parse(str);
eleP.innerHTML = `<span class="timer">${parseStr.time}</span><br/><span class="msg">${parseStr.msg}</span>`;
switch (parseStr.type) {
case TYPE_LEAVE:
eleP.className = 'leave';
break;
case TYPE_ENTRY:
eleP.className = 'entry';
break;
case TYPE_SPEAK:
eleP.className = 'speek';
break;
default:
eleP.className = 'default';
break;
}
} else {
eleP.innerText = str;
}
return eleP;
}
// 添加回车发送消息事件
function btnClickEvent() {
if (ipt.value.length <= 0) {
alert('不能发送空消息');
return;
}
ws.send(ipt.value);
ipt.value = '';
}
</script>
</body>
</html>
服务端 server.js:
/*
* @Author: @Guojufeng
* @Date: 2019-06-02 19:42:06
* @Last Modified by: @Guojufeng
* @Last Modified time: 2019-06-02 21:39:56
* 优化 - 加入消息类型和当前时间的响应
*/
const ws = require('nodejs-websocket');
const POST = 8081;
let count = 0;//记录加入人数
const TYPE_LEAVE = 0;//leave,离开
const TYPE_ENTRY = 1;//entry,进入
const TYPE_SPEAK = 2;//speak,发言
const server = ws.createServer((connect)=>{
count++;// 有人加入，计数加一
connect.userName = `用户${count}`;//connet是一个对象，新增一个属性用以标记该用户的名字（标识）
// 1、通知所有人，connect用户加入群聊
broadcast({
type: TYPE_ENTRY,
msg: `${connect.userName}加入群聊。`
});
// 2、通知所有人，connect用户发言
connect.on('text',(rst)=>{
broadcast({
type: TYPE_SPEAK,
msg: `${connect.userName}: ${rst}`
});
});
// 3、通知所有人，connect用户退出群聊
connect.on('close',(code,reason)=>{//个人认为利用code和reason这里，还可以模拟微信群聊中，用户被群主踢出群的情况
broadcast({
type: TYPE_LEAVE,
msg: `${connect.userName}退出了群聊。`
});
count--;// 有人退出，计数减一
});
// error事件
connect.on('error',()=>{
console.log('发生异常');
})
});
// 广播功能代码
function broadcast(cont){
// 利用connections是存放所有加入群聊用户的数组，来给所有人广播内容
let sendCont = {
type: cont.type,
msg: cont.msg,
time: new Date().toLocaleTimeString()
};
server.connections.forEach((element)=>{
element.send(JSON.stringify(sendCont));//切记，send参数必须是字符串类型，所以这里将对象字符串化
});
}
server.listen(POST,()=>{
console.log(`${POST}服务器启动成功。`)
});
启动服务：
- nodejs执行server.js文件，并成功监听到对应端口
- 浏览器打开index.html（可开启多个页面模拟多个用户），进行测试
结语
无
时间：2020/08/16 11:10
坐标：广东深圳
小案例-WebSocket实现简易聊天室的更多相关文章
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- node.js+websocket实现简易聊天室
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- node+websocket创建简易聊天室
关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...
- 使用Html5下WebSocket搭建简易聊天室
一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...
- WebSocket实现简易聊天室
前台页面: <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- 基于WebSocket的简易聊天室
用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...
- Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...
- Servlet WebSocket的简易聊天室
添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...
随机推荐
- SELECT from Nobel Tutorial
02.SELECT from Nobel Tutorial 注意:where语句中对表示条件的需要用单引号, 下面的译文使用的是有道翻译如有不正确,请直接投诉有道 01.Change the quer ...
- C++模板沉思录（上）
花下猫语: 在我们读者群里,最近出现了比较多关于 C++ 的讨论,还兴起了一股学习 C++ 的风气.樱雨楼小姐姐对 C++ 的模板深有研究,系统地梳理成了一篇近 4 万字的文章!本文是上篇,分享给大家 ...
- luogu3706 [SDOI2017]硬币游戏
LINK:硬币游戏 对于40分的暴力 构造出AC自动机 列出转移矩阵 暴力高消.右转上一篇文章. 对于100分 我们不难想到这个矩阵过大 且没有用的节点很多我们最后只要n个节点的答案 其他节点的答案可 ...
- Linux 如何以管理员身份运行终端
如何以管理员身份在终端执行指令: 目录 如何以管理员身份在终端执行指令: 1. 以sudo 指令在其他指令前加上sudo 2. 以su 进入root权限,以管理员方式执行命令 设置root初始密码: ...
- Hadoop学习之常用输入输出格式总结
目的 总结一下常用的输入输出格式. 输入格式 Hadoop可以处理很多不同种类的输入格式,从一般的文本文件到数据库. 开局一张UML类图,涵盖常用InputFormat类的继承关系与各自的重要方法(已 ...
- CSP-J 2019游记
准备篇 11.16早上,在南校集合后,大巴车开往日照. 在车上颓了一上午 中午到达日照,考场在山东外国语技术大学(SWUV) 到了大学里的餐厅潦草的吃完饭后去学术报告厅继续颓废 一到山外突然想起了暑假 ...
- 当asp.net core偶遇docker一（模型验证和Rabbitmq 二）
上一篇我们说到构建了一个Rabbitmq容器 现在我们说说如何在一个悄悄传输消息到队列 我们现在设计一个Rabbitmq发送消息部分的模块 先设计一个远程发送的接口 public interface ...
- “随手记”开发记录day17
继续开发账单的图形展示这一部分,丰富“随手记”的显示方法,对我们的APP进行添砖加瓦.
- Python3.x+Fiddler抓取APP数据
随着移动互联网的市场份额逐步扩大,手机APP已经占据我们的生活,以往的数据分析都借助于爬虫爬取网页数据进行分析,但是新兴的产品有的只有APP,并没有网页端这对于想要提取数据的我们就遇到了些问题,本章以 ...
- C语言学习笔记之数据类型转换
1.整数与整数相除,结果也为整数 2.不同类型的运算,精度低的向精度高的转化 整数与浮点数运算就是个很好的例子,只要有一方为浮点数,结果也是浮点数,这也体现出精度低向精度高转化 3.在赋值运算中,等号 ...