HTML5 - websocket的应用 之 简易聊天室
需要知识点:
- 前端知识
- jq操作dom
- nodejs
- socket.io
关于websocket api的知识点,见上篇章《HTML5-Websocket》。
聊天室思路/原理:
A和B聊天:
- A发送消息到中间“聊天服务器”,
- 服务器发送消息给B
- 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的应用 之 简易聊天室的更多相关文章
- html5 websocket + node.js 实现网页聊天室
1 client: socket.io server: node.js + express + socket.io 一个简单的聊天室 demo,没有注册,内置了一些测试用户 2 cli ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- node.js+websocket实现简易聊天室
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...
- node+websocket创建简易聊天室
关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- Django中使用websocket并实现简易聊天室
django使用websocket并实现简易聊天室 django默认只支持http协议 如果你想让django即支持http协议又支持websocket协议,则需要做以下配置 前期配置 前提需要安装c ...
- php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室)
php websocket-网页实时聊天之PHP实现websocket(ajax长轮询和websocket都可以时间网络聊天室) 一.总结 1.ajax长轮询和websocket都可以时间网络聊天室 ...
- Express+Socket.IO 实现简易聊天室
代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...
- 使用WebSocket实现简单的在线聊天室
前言:我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列,发现大佬们写得太高深了 我这种新手看不懂,所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq ) 话不多说,直接 ...
随机推荐
- WPF 时间编辑控件的实现(TimeEditer)
一.前言 有个项目需要用到时间编辑控件,在大量搜索无果后只能自己自定义一个了.MFC中倒是有这个控件,叫CDateTimeCtrl.大概是这个样子: 二.要实现的功能 要实现的功能包含: 编辑时.分. ...
- php xdebug的配置、调试、跟踪、调优、分析
xdebug 的 profiler 是一个强大的工具,它能分析 PHP 代码,探测瓶颈,或者通常意义上来说查看哪部分代码运行缓慢以及可以使用速度提升.Xdebug 2 分析器输出一种兼容 cacheg ...
- 深挖Jvm垃圾收集
垃圾收集(Garbage Collection,GC),它的任务是解决以下 3 件问题: 哪些内存需要回收? 什么时候回收? 如何回收? 其中第一个问题很好回答,在 Java 中,GC 主要发生在 J ...
- php服务端搜索,功能改进
php中 ,一直以来,服务端搜索,我都是写一堆条件判断,搜索条件少时还好,条件一多,就显的代码有点丑陋了: 看着非常不舒服.今天在园子里看到一篇文章(http://www.cnblogs.com/xq ...
- 2019-08-26 linux
1.question:什么是linux? answer:Linux由林纳斯·托瓦兹开发的一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU ...
- python高级编程——网络编程(三)
TCP和并发服务器 与UDP不同的是,他是一个面向连接的,可靠的数据传输协议 TCP通信比较复杂 先写一个TCP服务器,一般步骤如下: 1.首先是要创建一个socket套接字:socket() 2.服 ...
- Apache ActiveMQ 远程代码执行漏洞 (CVE-2016-3088) 复现
漏洞复现 直接写 shell 写 shell 的话,需要写在 admin 或者 api 中,也就是需要登录,没有密码的话完成不了写 shell 操作. 该环境默认的口令为 admin/admin. 访 ...
- Node.js自动本地重启服务器
node.js在本地项目中,更新 了代码 是不会自动刷新 的,要重启才能生效,每次更改代码又手动重启这样很麻烦. 可以安装 个supervisor.全局安装supervisor npm install ...
- React学习笔记③
生命周期的理解 class App extends Component{ constructor(){ console.log("constructor") //初始化属于组件的属 ...
- 实体类id的几种生成方式
@Id// @GeneratedValue(strategy = GenerationType.AUTO) // 自增// @GeneratedValue(strategy = GenerationT ...