猿创征文|前端进阶必备——WebSockt实现聊天室(附源码)
WebSockt 实现聊天室
- 1. websocket 是什么?
- 2. 作用场景
- 3. 传统http实现推送技术的弊端
- 4. WebSockt 常用API
- 5. WebSocket实现聊天室
1. websocket 是什么?
- WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
- 在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
2. 作用场景
- 即时通讯(各种聊天软件)
- 多玩家在线游戏(数据需要同步刷新)
- 协同编辑/编程
- 股票基金报价
- 体育实况、新闻更新
- …
通常来说,对数据敏感度高、需要及时更新数据的产品基本都会用到 websocket
3. 传统http实现推送技术的弊端
- 传统的技术一般使用 http + 定时器的方式(轮询)去实现
- 很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。
- 这种传统的模式带来很明显的缺点,即:浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
- 而比较新的技术去做轮询的效果是Comet。
- 这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。
4. WebSockt 常用API
- 实例化websocket的对象
const ws = new WebSocket('ws://127.0.0.1:8080')
- 监听连接状态
ws.onopen = function () {console.log('ws连接状态:' + ws.readyState);// 成功则发送一个数据ws.send('111');}
- 接收消息
ws.onmessage = function(data){// data.data 就是接收到的数据}
- 发送消息
ws.send(data) // data必须是字符串
- 监听连接关闭事件
ws.onclose = function () {console.log('ws连接状态:' + ws.readyState);
}
- 监听错误
ws.onerror = function (error) {console.log(error);
}
5. WebSocket实现聊天室
1. 项目结构
2.app.js 代码
let WebSocketServer = require('ws').Server;wss = new WebSocketServer({ip: '0.0.0.0', port: 8080 });let wsolist = []console.log('启动服务器:ws://127.0.0.1:8080');
wss.on('connection', function (ws, req) {wsolist.push(ws)console.log('和客服端' + req.connection.remoteAddress+ '建立了一个连接,是连接的第'+ (wsolist.length +1) +'个用户');ws.on('message', function (message) {console.log(message.toString());wsolist.forEach((wso) => {wso.send(message.toString())})});ws.on('close', function close() {wsolist = wsolist.filter(obj => obj !== ws)});
});
3. index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{margin: 10px 0;border: 1px solid pink;}</style>
</head>
<body><h1>websocket聊天室</h1><div><input type="text" placeholder="请输入消息内容" id="msg"><button id="sendBtn">发送</button> <button id="closeBtn">关闭ws聊天室</button></div><div class="container"></div>
</body>
</html>
4. js 代码
// 1. 获取元素
let msg = document.querySelector('#msg')
let send_btn = document.querySelector('#sendBtn')
let close_btn = document.querySelector('#closeBtn')
let container = document.querySelector('.container')// 2. 建立ws连接
let ws = new WebSocket('ws://192.168.29.54:8080')// 3. 实现消息的发送
send_btn.addEventListener('click', function(){ws.send(msg.value)msg.value = ''
})
// 4. 实现消息的接收
ws.onmessage = function(data){console.log(data.data);container.innerHTML += ` <div>${data.data}</div>`
}// 5. 关闭ws连接
close_btn.addEventListener('click', function(){ws.close()
})
1. 希望本文能对大家有所帮助,如有错误,敬请指出
2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)
猿创征文|前端进阶必备——WebSockt实现聊天室(附源码)相关推荐
- 聊天室软件源码前端性能优化,缓存角度的相关分析
在我们考虑提高聊天室软件源码页面渲染速度之前先来思考一个问题,一个页面的速度由什么决定?显而易见,这里主要包含两方面的影响因素. 1.资源传输时间(tcp链接时间和响应时间) 2.dom渲染时间 这两 ...
- 前端搭建小人逃脱游戏(内附源码)
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面 上周我们实通过前端基础实现了打字通,当然 ...
- 前端搭建打字通游戏(内附源码)
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 打字通功能介绍 ✨ 页面搭建 ✨ 样式代码 ✨ 功能实现 ✨ 写在前面 上周我们实通过前端基础实现了名言生 ...
- 前端搭建猜数字游戏(内附源码)
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 完整代码 ✨ 写在前面 上周我们实通过前端基础实现 ...
- 猿创征文|我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅 自我介绍 我浑噩的大一大二(是不是另一个你) 我的大三生活 大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...
- 猿创征文|当我在追光 我与光同航--我与Java的技术成长之路
文章目录 前言 材料转码 初识JAVA 大学建议 1. 参加比赛 2. 坚持创作 3.养成看书的习惯 Java路线 1. java基础 2. 数据库 3. javaWeb 4. 框架 前言 今天借着官 ...
- 猿创征文|六年一日,我的焚膏继晷之路
猿创征文|我在Python领域的焚膏继晷之路 一.自我介绍 二.我和师父的机缘 三.拜师 or 闹剧? 四.我在CSDN的收获 五.关于我的学习 六.我的憧憬 一.自我介绍 大家好,我是 热爱科技的刘 ...
- 猿创征文 | 开箱即用 yyg-cli:快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
- 猿创征文 | Linux运维工程师的10个日常使用工具分享
猿创征文 | Linux运维工程师的10个日常使用工具分享 一.本次分享工具导航 二.Adminer数据库管理工具 1.Adminer介绍 2.Adminer的特点 3.Adminer的使用 4.Ad ...
最新文章
- pandas 增加行、列
- echarts词云图形状_怎么用Python画出好看的词云图?
- python和软件自动化_软件测试和自动化测试
- Redis的三种启动方式【转】
- Dataset:(公交车、恐龙、大象、花朵、骏马)六类图片数据集(AutoKeras测试)的简介、下载、使用方法之详细攻略
- jvm在不同系统中的最大内存空间地址
- 前端常见算法的JS实现
- 同步请求和ajax请求,ajax 同步请求和异步请求的差异分析
- vue组件系列3、查询下载
- 剑指offer python版 剪绳子
- java密码验证代码_java用户名密码验证示例代码分享
- c语言去尾法和进一法的例子,用“进一法”和“去尾法”解决问题教学案例
- tumblr_如何在您的Tumblr博客中添加论坛
- 梦殇 chapter three
- 光盘自动播放 html,插入dvd光盘直接播放 禁用dvd菜单制作刻录dvd光盘 光盘直接放在DVD中就可以自动播放...
- 把PDF转换成图片,大家都这么做
- 基于opencv实现人脸识别及签到系统
- 跨境电商财税合规问题汇总 如何推动跨境电商财税合规
- 智伴机器人三级分销模式_三级分销系统的模式有哪些
- 网页自动关机代码HTML,电脑如何自动关机