天天看點

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

要實作聊天室,核心就是:廣播

要做到廣播,就需要server.connections,這個數組記錄了所有連接配接到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伺服器的使用者(也就是進入聊天室的人),通過周遊這個數組,然後給數組中每個連接配接進來的使用者對象發送消息即可。

源碼如下位址:

聊天室源碼

 聊天室效果如下:

三個标簽頁 - 模拟三個人進入了聊天室

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

聊天内容截圖:

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

以上,來自騰訊課堂課程學習筆記。

騰訊課堂位址:https://ke.qq.com/course/355307

下篇:《socket.io實作一個網頁版的微信聊天工具》 盡請期待~

越努力,越幸運;阿門。

繼續閱讀