实现一个简单的WebSocket聊天室
WebSocket 简介
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,请求必须先由浏览器发给服务器,服务器才能响应这个请求,再把数据发送给浏览器。换句话说,浏览器不主动请求,服务器是没法主动发数据给浏览器的。
Web
我们先用 express
搭一个基础的服务端。
创建 index.js
文件
var app = require('express')();
var http = require('http').createServer(app);app.get('/', function(req, res){res.send('<h1>Hello world</h1>');
});http.listen(3000, function(){console.log('listening on *:3000');
});
run node index.js
,并在浏览器打开 http://localhost:3000
,访问成功即可看到
HTML
设计我们的主页,实现一个简单的聊天窗口。
修改 index.js
app.get('/', function(req, res){res.sendFile(__dirname + '/index.html');
});
创建 index.html
<!doctype html>
<html><head><title>Socket.IO chat</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body { font: 13px Helvetica, Arial; }form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }#messages { list-style-type: none; margin: 0; padding: 0; }#messages li { padding: 5px 10px; }#messages li:nth-child(odd) { background: #eee; }</style></head><body><ul id="messages"></ul><form action=""><input id="m" autocomplete="off" /><button>Send</button></form></body>
</html>
重启应用并刷新页面你就可以看到一个如下图所示
Socket.io
引入socket.io
npm install --save socket.io
修改 index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);app.get('/', function(req, res){res.sendFile(__dirname + '/index.html');
});io.on('connection', function(socket){console.log('an user connected');
});http.listen(3000, function(){console.log('listening on *:3000');
});
修改 index.html
,在</body>
下添加如下代码
<script src="/socket.io/socket.io.js"></script>
<script>var socket = io();
</script>
重启应用并刷新页面,就可以看到命令行打印如下
Emitting event
当用户在聊天窗的输入框内输入,并提交时,触发 emit
事件,服务端监听到该事件并做出相应的反应。
修改 index.html
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>$(function () {var socket = io();$('form').submit(function(e){e.preventDefault(); // 防止页面重新加载socket.emit('chat message', $('#m').val());$('#m').val('');return false;});});
</script>
服务端监听该事件,在 index.js
文件添加该代码
io.on('connection', function(socket){socket.on('chat message', function(msg){console.log('message: ' + msg);});
});
展示消息
当服务端收到用户A发出的消息,服务端重新发出该消息,让客户端接收,客户端监听到该事件后展示该条消息,就可以实现用户 A, B, C 都接收到该消息。
修改 index.js
io.on('connection', function(socket){socket.on('chat message', function(msg){io.emit('chat message', msg);});
});
修改 index.html
,实现消息的展示
<script>$(function () {var socket = io();$('form').submit(function(e){e.preventDefault(); // prevents page reloadingsocket.emit('chat message', $('#m').val());$('#m').val('');return false;});socket.on('chat message', function(msg){$('#messages').append($('<li>').text(msg));});});
</script>
重启应用并刷新页面,可以打开多个浏览器页面同时访问 localhost:3000
,就可以体验简单聊天室的效果。
设置昵称
在每个用户进入的时候,随机生成一个数字作为用户的昵称,并且向所有用户广播该用户进入聊天室。当用户发送消息时,拼接上用户的昵称。
修改 index.js
io.on('connection', (socket) => {const nickname = 'user' + Math.ceil((Math.random() * 1000))socket.broadcast.emit('connection', nickname + ' connected')socket.on('chat message', (msg) => {io.emit('chat message', nickname + ': ' + msg)})
})
修改 index.html
,监听 connection
事件
<script>$(() => {const socket = io()$('form').submit((e) => {e.preventDefault()socket.emit('chat message', $('#m').val())$('#m').val('')return false});socket.on('chat message', (msg) => {$('#messages').append($('<li>').text(msg))})socket.on('connection', (msg) => {$('#messages').append($('<li>').text(msg))})});
</script>
重启应用并打开多个客户端,可以看到如下效果
参考资料
本文大部分案例出自 socket.io
的入门文档 https://socket.io/get-started/chat/
https://en.wikipedia.org/wiki/WebSocket
廖雪峰官网 WebSocket
菜鸟教程 WebSocket
转载于:https://www.cnblogs.com/chaohangz/p/10745489.html
实现一个简单的WebSocket聊天室相关推荐
- java控制层创建websocket_用Java构建一个简单的WebSocket聊天室
前言 首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...
- php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能(附带源码)
通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能.附带详细源码案例.这个聊天室是一个简单的聊天室,通过javascript setInterval() ...
- 实现一个简单的语音聊天室(源码)
语音聊天室,或多人语音聊天,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 这篇文章将实现一个简单的语音聊天室,让多个人可以进入同一个房间进行语音沟通.先看运行效果截图: ...
- 实现一个简单的视频聊天室(源码)
在 <实现一个简单的语音聊天室>一文发布后,很多朋友建议我也实现一个视频聊天室给他们参考一下,其实,视频聊天室与语音聊天室的原理是差不多的,由于加入了摄像头.视频的处理,逻辑会繁杂一些,本 ...
- 实现一个简单的语音聊天室(多人语音聊天系统)
多人语音聊天,或语音聊天室,是即时通信应用中常见的功能之一,比如,QQ的语音讨论组就是我们用得比较多的. 本文将基于最新版本的OMCS(V3.5)实现一个简单的语音聊天室,让多个人可以进入同一个房间进 ...
- 使用socket.io做一个简单的WEB聊天室
使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...
- 详细介绍附代码:使用jquery,和php文件构建一个简单的在线聊天室,通过ip显示googlemap
最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步. 首先介绍一下相关文件信息和功能 ...
- 如何在Linux系统搭建一个简单的用户聊天室
基于Linux的多用户聊天室 作者:Cabin_V 本篇文章是我大三下学期嵌入式系统设计课程中的期末大作业,时限是两个星期.刚开始拿到这个题目的时候都愣住了,觉得时间太少(当时还有其他课程的大作业)难 ...
- 聊天室 一个简单的mqtt聊天室的实现
一.架构总体 云端服务器 负责 1.mqtt代理服务器 2.网页服务器 3.聊天数据账户的db 客户端 逻辑/能力 描述 1.页面刚打开时,服务端从数据库下发用户下的所有好友关系(topic形式存在) ...
最新文章
- Transformer在深度推荐系统中的应用及2019最新进展
- QQ炫舞手游显示进入服务器失败6,qq炫舞手游进不去怎么办 游戏进不去方法详解[多图]...
- ECCV 2020 | 清华提出基于循环关联的自监督行人再识别, 无标签ReID仅需两个摄像头!...
- M0最高优先级的中断设计
- 带父节点的平衡二叉树_平衡二叉树 通俗易懂
- 车载wince系统刷界面ui_UI入门秘笈,你想知道吗?
- 不用POI技术,JAVA给Word文档中的数据区域赋值
- WebService实现文件上传下载
- manjaroLinux下安装mysql时初始化mysql出错解决办法
- 模糊评价模型-以2018美赛为例
- 浅析欢乐时光(HAPPY TIME)病毒
- 施耐德M241 plc与IAI伺服电缸通过ethernet/ Ip通讯,plc与伺服套装,送软件和资料
- WPS删除多余空白页
- 华为平均每天收入23.5亿元!重磅发布2019年年报!
- ESP32播放MP3音乐-无需SD卡-WM8978-ESP32解码MP3
- Mysql Oracle Sql server 三种数据库默认端口
- 神州数码交换机路由器防火墙ACAP基本配置
- 89C52RC控制 WS2812B
- mySQL中stuff,SQL 中STUFF用法
- 华清远见上海中心22071班 9.7作业
热门文章
- Python读取.set文件和.locs文件
- 借助液态金属传感器和AI,这次机械手可能真的找到感觉了
- Python-EEG工具库MNE中文教程(2)-MNE中数据结构Epoch及其创建方法
- HTC打算一条道走到黑,开始资助「脑后插管操作」
- mysql中00933错误_java.sql.SQLException: ORA-00933: SQL 命令未正确结束错误解决
- 清华唐杰团队:一文看懂NLP预训练模型前世今生
- 录音降噪哪家强?搜狗西工大联合团队DNS挑战赛夺冠
- 战网AI危机!AlphaStar匿名潜入星际2天梯PK,进化版让人类玩家瑟瑟发抖
- 三种方式搭建yum源
- C++ BigInt模板手打