专栏首页前端说吧HTML5 - websocket的应用 之 简易聊天室

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

需要知识点:

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

聊天室思路/原理:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css笔记 - transition学习笔记(二)

    transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果。

    xing.org1^
  • vue-cli使用

    xing.org1^
  • HTML - 网页特殊字符大全(转)

    原文地址请跳转:https://blog.csdn.net/Iversons/article/details/78996776

    xing.org1^
  • 公众号开发:获取用户消息和回复消息

    最近在看微信公众号的开发文档,觉得很有意思,可以自定义开发一些功能,比如有人关注了公众号之后,你可以做出稍微复杂点的回复(简单的回复在公众号后台配置就好啦);比...

    Java技术编程
  • 免费主题暗藏后门,波及WordPress等知名CMS系统

    最近美国安全研究者爆料,针对CMS(内容管理系统)网站的数千种插件和主题被植入了名为CryptoPHP的后门,这可能导致大量的Web服务器被攻击者据为己有。 隐...

    FB客服
  • Java泛型

    先科普一下知识,什么是泛型?聊啥概念,直接上代码,直奔主题,先从 JDK 1.8 摘点源码出来,一起与泛型打个照面,混个脸熟。

    JAVA葵花宝典
  • 如何学python-第一课 入门简介

    最近在论坛上闲逛的时候,我发现了一些相当不错的python脚本编程的文章。不过,这些文章也有它们的局限性,因为它们更多的是在介绍一些基础的语法,而不是关于无比热...

    用户1631416
  • [C#] c# 验证手机号码 最新的17手机号

    跟着阿笨一起玩NET
  • 人生靠反省,Java靠泛型

    昨天有同事问 UserService、XxxService 都会调用 Dao 的 insert、update ... ...,这些重复的代码,有没有办法变得灵活...

    一猿小讲
  • SwiftUI 官方画图实例详细解析

    在前面几篇关于SwiftUI的文章中,我们用一个具体的基本项目Demo来学习了下SwiftUI,里面包含了常见的一些控件使用以及数据处理和地图等等,有兴趣的小伙...

    Mr.RisingSun

扫码关注云+社区

领取腾讯云代金券