HTML5 - websocket的应用 之 简易聊天室

 须要知识点：

• 前端知识
• jq操做dom
• nodejs
• socket.io

 

关于websocket api的知识点，见上篇章《HTML5-Websocket》。

 

聊天室思路/原理：

A和B聊天：

1. A发送消息到中间“聊天服务器”，
2. 服务器发送消息给B
3. B接收A的消息，实现第一次消息传输

 B再给A回消息的原理同上三步骤

 

其中原始HTTP协议和H5新增Websocket协议不一样的地方在于：

“服务器发送消息给B”这里。

 

HTTP协议中，服务器是基于“请求 到 响应”的一个模型的 。也就是说，服务器没法主动发送消息给客户端，他必须接收一个请求才能响应。

所以传统HTTP协议要想实现聊天室就必须客户端实时的（好比每秒1次）发送ajax轮询请求，若是服务器有消息须要返回就会响应，若是没有就是空轮询。

一次请求后，连接断开，下次再须要获取最新消息，还须要从新发送请求。这样来看，毫无疑问是耗费性能、浪费带宽。

 

在H5新增的Websocket协议中，实现服务器和客户端全双工的通讯方式，两台机器之间只要握手成功（创建链接）后，就能够互相主动给对方发送消息。

就像咱们现实中两我的聊天同样了。谁有话谁开口。

 

“聊天室”具体实现步骤：

初步应用代码见上篇《 HTML5 - 开发一个本身的websocket服务器》，主要记录了websocket怎么启动一个本地服务并应用的。

在以前代码的基础上，新增聊天室该有的广播内容、以及新增消息的append功能。
 

要实现聊天室，得须要如下三个主要功能：

1、 新人进入聊天室，服务器广播发送给你们“xx进入聊天室”

2、某人离开聊天室，服务器广播发送给你们“xx离开聊天室”

3、某人发送消息到聊天室，服务器广播发送给你们“xx：xx发送的消息”

 

综上所述，核心之处就是须要实现：广播

 

要作到广播，就须要server.connections，

这个数组记录了全部链接到websocket服务器的用户（也就是进入聊天室的人），经过遍历这个数组，而后给数组中每一个链接进来的用户对象发送消息便可。

 

源码以下地址：

聊天室源码

 

 

 

 聊天室效果以下：

三个标签页 - 模拟三我的进入了聊天室

 

聊天内容截图：

 

 

以上，来自腾讯课堂课程学习笔记。

腾讯课堂地址：https://ke.qq.com/course/355307

 

 

下篇：《socket.io实现一个网页版的微信聊天工具》 尽请期待~