要實作聊天室,核心就是:廣播
要做到廣播,就需要server.connections,這個數組記錄了所有連接配接到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實作一個網頁版的微信聊天工具》 盡請期待~
越努力,越幸運;阿門。