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端即时通讯的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。