webim--web端即时通讯的实现
web浏览器端im的实现（web浏览器端的即时通讯系统）。
目录
http如何像tcp一样实时的收消息？
一、webim如何实现消息推送
二、人们为什么会误解http长轮询不实时
三、长轮询实际怎么玩
四、结论
初次接触web端即时通讯的实现，对其实现方案并不了解，所幸的是一次看到沈总发的一篇文章，使我茅塞顿开，初步实现了一个webim系统。下面把沈总的文章和已经实现的技术共享给大家，由于时间仓库，本人水平有限，系统中仍有部分细节未完善，如果有同样对此感兴趣的前端大神，本人愿与其共同开发一套完善的im系统，为开源界尽一点绵薄之力。
- 沈总的文章（站在巨人的肩上）
http如何像tcp一样实时的收消息？
http如何像tcp一样实时的收消息？
一、webim如何实现消息推送
webim通常有三种方式实现推送通道：
1）WebSocket
2）FlashSocket
3）http轮询
其中1）和2）是用Tcp长连接实现的，其消息的实时性可以通过tcp保证。
方案3）才算是webim实现消息推送的“正统”方案，用http短连接轮询的方式实现“伪长连接”，既然是轮询，有朋友就对消息的实时性产生了质疑。本文要解答，webim使用http长轮询如何保证消息的绝对实时性。
二、人们为什么会误解http长轮询不实时
什么是轮询？我擦，这个该怎么解释咧。
举个栗子，在火车上想上洗手间，挤到洗手间旁，却发现洗手间有人，于是你只能回座位继续等。过了N分钟，又朝洗手间的方向挤过去，却发现洗手间还是有人，又只能回坐等。这么一而再，再而三的每隔N分钟去洗手间查看洗手间是否有蹲位，这就是轮询。
webim用轮询的方式拉取消息会存在什么问题？
webim每隔N分钟，轮询调用 “获取消息”接口，有可能出现消息的延时，某一时刻刚拉取完消息，突然又产生了一条新消息，这条消息就必须等到N分钟之后，再次发起“获取消息”轮询时，才有机会获取到。
减小轮询时间间隔是否能解决消息延时的问题？
减小轮询时间间隔的确可以缩短延时时间，但也不能保证消息绝对的实时，同时又会产生新的问题，绝大部分的轮询调用，都没有消息返回，造成服务端极大的资源浪费。
很多人基于上述直觉，认为webim使用http长轮询的方式拉取消息，会导致消息有延时，其实，webim的http长轮询根本不是这么玩的。
三、长轮询实际怎么玩
消息连接
webim和webserver之间建立一条http连接，专门用作消息通道，这条连接叫http消息连接【见下图】
消息连接的4大特性
1）没有消息到达的时候，这个http消息连接将被夯住，不返回，由于http是短连接，这个http消息连接最多被夯住90秒，就会被断开（这是浏览器或者webserver的行为）
2）在1）的情况下，如果http消息连接被断开，立马再发起一个http消息连接【见下图中的步骤1、2】
3）在1）和2）的配合下，浏览器与webserver之间将永远有一条消息连接在（极限情况下会出现4）），每次收到消息时，这个消息连接就能及时将消息带回浏览器页面，并且在返回后，会立马再发起一个http消息连接【见下图中的步骤1、2、3】
4）如果消息到达时，上一个http消息连接正在返回，没有http消息连接可用（理论上http消息连接的返回是瞬时的，没有连接可用出现的概率极小），则将消息暂存入消息池中，下一个消息连接到达后（上一个消息连接返回后，根据2）和3）会立马返回新的消息连接，无等待时间），将消息带回，并又立刻返回生成新的消息连接【见下图中的步骤1、2、3、4、5、6、7】
上述1-4就能够保证一直有一条http消息连接在，以保证webim消息推送的绝对实时性。
四、结论
webim通过http长轮询可以保证消息的绝对实时性。这种实时性的保证不是通过增加轮询频率来保证的，而是通过夯住http消息连接来保证的，在大部分时间没有实时消息的情况下，这个http消息连接对于webserver的请求压力是90秒1次，能够大大节省了web服务器资源。
以上是沈总的文章（可能略有改动），鞭辟入里，层层递进，层次分明，干货满满，使人茅塞顿开。于是根据沈总的介绍，自己利用闲暇时间实现了一个webim系统。以下是实现的效果图。
2.webim实现效果如下
动图过大，无法上传动态图片（可进群下载，群号：589847567）
功能点：
已实现的功能：用户登录，好友加载，群友加载，好友单聊，群聊，修改头像，查询用户、群，换肤，搜索好友，表情添加等；
后续继续改进：完善的cms管理平台，用户量过大时分布式发布，redis集群缓存，对消息的确认的确认，离线用户消息hbase30天。
参考文献（站在巨人的肩上）：
https://www.w3cschool.cn/architectroad/architectroad-the-reliable-delivery-of-offline-messages.html
https://www.w3cschool.cn/architectroad/architectroad-the-reliable-delivery-of-instant-messaging.html
https://www.w3cschool.cn/architectroad/architectroad-online-and-offline-group-messages.html
https://www.w3cschool.cn/architectroad/architectroad-qq-status-consistency.html
https://www.w3cschool.cn/architectroad/architectroad-multi-point-login-and-message-roaming.html
https://www.w3cschool.cn/architectroad/architectroad-message-timing-and-consistency.html
https://www.w3cschool.cn/architectroad/architectroad-58-home-real-time-messaging-platform.html
https://www.w3cschool.cn/architectroad/architectroad-wechat-save-flow.html
webim--web端即时通讯的实现相关推荐
- Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE
摘要 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯 方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server- ...
- 新手入门：史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- 二维码登录原理+Web端即时通讯技术
前言 上周在写项目过程中遇到需要实现二维码的登录功能,将这个过程细节记录下来 二维码的登录过程,主要难点在于用户扫码了浏览器展示的二维码,但是浏览器本身是无法知道的,需要服务端告知信息. 涉及到 we ...
- Web端即时通讯实践干货：如何让WebSocket断网重连更快速？
本文作者网易智慧企业web前端开发工程师马莹莹.为了提升内容质量,收录时有修订和改动. 1.引言 在一个完善的即时通讯IM应用中,WebSocket是极其关键的一环,它为基于Web的即时通讯应用提供了 ...
- WEB端即时通讯技术
一:传统WEB通讯的原理 浏览器本身作为一个瘦客户端,不具备直接通过系统调用来达到和处于异地的另外一个客户端浏览器通信的功能.这和我们桌面应用的工作方式是不同的,通常桌面应用通过socket可以和远程 ...
- 新手入门贴：史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- 实现Web端即时通讯的四种方式
Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的.但是在Web中,由于浏览器的限制,实现即 ...
- Web端即时通讯技术原理详解
Web端即时通讯技术原理详解 前言 在web端的IM即时通讯应用,由于浏览器的兼容性以及其固有的"客户端请求服务器处理并响应"的C/S通信模型,造成了要在浏览器中实现一个兼容性较好 ...
- Web端即时通讯、消息推送的实现
在浏览某些网页的时候,例如 WebQQ.京东在线客服服务.CSDN私信消息等类似的情况下,我们可以在网页上进行在线聊天,或者即时消息的收取与回复,可见,这种功能的需求由来已久,并且应用广泛. 网上关于 ...
- Web端即时通讯之SSE
Sse可以视为轻量级的webSocket,基于HTTP协议,以流的形式实现服务端到客户端单向消息推送. 模型: 它的原理是在客户端构造一个eventSource对象,同时eventSource对象会保 ...
最新文章
- 用shape结合selector实现点击效果
- 【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 )
- Scala基础教程（八）：模式匹配、正则表达式
- 洛谷 P3521 [POI2011]ROT-Tree Rotations 解题报告
- 64win7+64Oracle+32plsql
- Net设计模式实例之代理模式（Proxy Pattern）
- Spark家族：Win10系统下搭建Scala开发环境
- B-Tree/B+-Tree/二叉树/红黑树/Hash表/MySQL底层到底用哪个数据表建立索引做快速查找？
- 给爱设计的你，一个理由爱上(和使用)渐变素材的理由
- php判断是不是iphone访问,php基于http协议访问,判断访问来源iphone,android,微信浏览器,pc电脑...
- python机器学习分析影响房价的主要因素
- html如何发送语音,浏览器实现HTML5发送语音功能
- 计算机学院宣传橱窗,校园橱窗、报栏、展板、宣传标语管理办法
- LINUX中EABI和ABI的理解
- 什么是原型、原型链、组合继承？
- StopWatch使用注意S
- 阿里云国际中什么是边缘运算？
- 李一男离开华为时给属下的忠告
- 西邮Linux小组22-20纳新面试题目及题解
- 某建筑市场监管平台-AES加密逆向