HTML5 - websocket的應用 之 簡易聊天室

 需要知識點：

• 前端知識
• jq操作dom
• nodejs
• socket.io

 

關於websocket api的知識點，見上篇章《HTML5-Websocket》。

 

聊天室思路/原理：

A和B聊天：

1. A發送消息到中間“聊天服務器”，
2. 服務器發送消息給B
3. 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實現一個網頁版的微信聊天工具》 盡請期待~