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實現一個網頁版的微信聊天工具》 盡請期待~