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

Posted padding1015

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实现一个网页版的微信聊天工具》 尽请期待~

 

以上是关于HTML5 - websocket的应用 之 简易聊天室的主要内容,如果未能解决你的问题,请参考以下文章

websocket之简易聊天室

php+websocket搭建简易聊天室实践

socket.io入门,简易聊天室

Html5之高级-14 Web Socket(概述API示例)

html5+go+websocket简单实例代码

HTML5之WebSocket