web瀏覽器端im的實(shí)現(xiàn)（web瀏覽器端的即時(shí)通訊系統(tǒng)）。

目錄

http如何像tcp一樣實(shí)時(shí)的收消息？

一、webim如何實(shí)現(xiàn)消息推送

二、人們?yōu)槭裁磿?huì)誤解http長(zhǎng)輪詢不實(shí)時(shí)

三、長(zhǎng)輪詢實(shí)際怎么玩

四、結(jié)論

---

初次接觸web端即時(shí)通訊的實(shí)現(xiàn)，對(duì)其實(shí)現(xiàn)方案并不了解，所幸的是一次看到沈總發(fā)的一篇文章，使我茅塞頓開，初步實(shí)現(xiàn)了一個(gè)webim系統(tǒng)。下面把沈總的文章和已經(jīng)實(shí)現(xiàn)的技術(shù)共享給大家，由于時(shí)間倉(cāng)庫(kù)，本人水平有限，系統(tǒng)中仍有部分細(xì)節(jié)未完善，如果有同樣對(duì)此感興趣的前端大神，本人愿與其共同開發(fā)一套完善的im系統(tǒng)，為開源界盡一點(diǎn)綿薄之力。

沈總的文章（站在巨人的肩上）

http如何像tcp一樣實(shí)時(shí)的收消息？

http如何像tcp一樣實(shí)時(shí)的收消息？

一、webim如何實(shí)現(xiàn)消息推送

---

webim通常有三種方式實(shí)現(xiàn)推送通道：

1）WebSocket

2）FlashSocket

3）http輪詢

其中1）和2）是用Tcp長(zhǎng)連接實(shí)現(xiàn)的，其消息的實(shí)時(shí)性可以通過tcp保證。

方案3）才算是webim實(shí)現(xiàn)消息推送的“正統(tǒng)”方案，用http短連接輪詢的方式實(shí)現(xiàn)“偽長(zhǎng)連接”，既然是輪詢，有朋友就對(duì)消息的實(shí)時(shí)性產(chǎn)生了質(zhì)疑。本文要解答，webim使用http長(zhǎng)輪詢?nèi)绾伪ＷC消息的絕對(duì)實(shí)時(shí)性。
?

二、人們?yōu)槭裁磿?huì)誤解http長(zhǎng)輪詢不實(shí)時(shí)

---

什么是輪詢？我擦，這個(gè)該怎么解釋咧。

舉個(gè)栗子，在火車上想上洗手間，擠到洗手間旁，卻發(fā)現(xiàn)洗手間有人，于是你只能回座位繼續(xù)等。過了N分鐘，又朝洗手間的方向擠過去，卻發(fā)現(xiàn)洗手間還是有人，又只能回坐等。這么一而再，再而三的每隔N分鐘去洗手間查看洗手間是否有蹲位，這就是輪詢。

?

webim用輪詢的方式拉取消息會(huì)存在什么問題？

webim每隔N分鐘，輪詢調(diào)用 “獲取消息”接口，有可能出現(xiàn)消息的延時(shí)，某一時(shí)刻剛拉取完消息，突然又產(chǎn)生了一條新消息，這條消息就必須等到N分鐘之后，再次發(fā)起“獲取消息”輪詢時(shí)，才有機(jī)會(huì)獲取到。

?

減小輪詢時(shí)間間隔是否能解決消息延時(shí)的問題？

減小輪詢時(shí)間間隔的確可以縮短延時(shí)時(shí)間，但也不能保證消息絕對(duì)的實(shí)時(shí)，同時(shí)又會(huì)產(chǎn)生新的問題，絕大部分的輪詢調(diào)用，都沒有消息返回，造成服務(wù)端極大的資源浪費(fèi)。

很多人基于上述直覺，認(rèn)為webim使用http長(zhǎng)輪詢的方式拉取消息，會(huì)導(dǎo)致消息有延時(shí)，其實(shí)，webim的http長(zhǎng)輪詢根本不是這么玩的。
?

三、長(zhǎng)輪詢實(shí)際怎么玩

---

消息連接

webim和webserver之間建立一條http連接，專門用作消息通道，這條連接叫http消息連接【見下圖】

消息連接的4大特性

1）沒有消息到達(dá)的時(shí)候，這個(gè)http消息連接將被夯住，不返回，由于http是短連接，這個(gè)http消息連接最多被夯住90秒，就會(huì)被斷開（這是瀏覽器或者webserver的行為）

2）在1）的情況下，如果http消息連接被斷開，立馬再發(fā)起一個(gè)http消息連接【見下圖中的步驟1、2】


3）在1）和2）的配合下，瀏覽器與webserver之間將永遠(yuǎn)有一條消息連接在（極限情況下會(huì)出現(xiàn)4）），每次收到消息時(shí)，這個(gè)消息連接就能及時(shí)將消息帶回瀏覽器頁(yè)面，并且在返回后，會(huì)立馬再發(fā)起一個(gè)http消息連接【見下圖中的步驟1、2、3】


4）如果消息到達(dá)時(shí)，上一個(gè)http消息連接正在返回，沒有http消息連接可用（理論上http消息連接的返回是瞬時(shí)的，沒有連接可用出現(xiàn)的概率極小），則將消息暫存入消息池中，下一個(gè)消息連接到達(dá)后（上一個(gè)消息連接返回后，根據(jù)2）和3）會(huì)立馬返回新的消息連接，無等待時(shí)間），將消息帶回，并又立刻返回生成新的消息連接【見下圖中的步驟1、2、3、4、5、6、7】


上述1-4就能夠保證一直有一條http消息連接在，以保證webim消息推送的絕對(duì)實(shí)時(shí)性。
?

四、結(jié)論

---

webim通過http長(zhǎng)輪詢可以保證消息的絕對(duì)實(shí)時(shí)性。這種實(shí)時(shí)性的保證不是通過增加輪詢頻率來保證的，而是通過夯住http消息連接來保證的，在大部分時(shí)間沒有實(shí)時(shí)消息的情況下，這個(gè)http消息連接對(duì)于webserver的請(qǐng)求壓力是90秒1次，能夠大大節(jié)省了web服務(wù)器資源。

以上是沈總的文章（可能略有改動(dòng)），鞭辟入里，層層遞進(jìn)，層次分明，干貨滿滿，使人茅塞頓開。于是根據(jù)沈總的介紹，自己利用閑暇時(shí)間實(shí)現(xiàn)了一個(gè)webim系統(tǒng)。以下是實(shí)現(xiàn)的效果圖。

2.webim實(shí)現(xiàn)效果如下

動(dòng)圖過大，無法上傳動(dòng)態(tài)圖片（可進(jìn)群下載，群號(hào)：589847567）

?

功能點(diǎn)：

已實(shí)現(xiàn)的功能：用戶登錄，好友加載，群友加載，好友單聊，群聊，修改頭像，查詢用戶、群，換膚，搜索好友，表情添加等；

后續(xù)繼續(xù)改進(jìn)：完善的cms管理平臺(tái)，用戶量過大時(shí)分布式發(fā)布，redis集群緩存，對(duì)消息的確認(rèn)的確認(rèn)，離線用戶消息hbase30天。

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

參考文獻(xiàn)（站在巨人的肩上）：

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

?

?

總結(jié)

以上是生活随笔為你收集整理的webim--web端即时通讯的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。