初探websocket

tracy丶傑發表於2017-12-08

Web領域的實時推送技術,也被稱作Realtime技術。這種技術要達到的目的是讓使用者不需要重新整理瀏覽器就可以獲得實時更新。它有著廣泛的應用場景,比如線上聊天室、線上客服系統、評論系統、WebIM等。

今天將以多人線上聊天應用作為例項場景,我們先來確定這個聊天應用的基本需求。

##需求分析

1、相容不支援WebSocket的低版本瀏覽器。

2、允許客戶端有相同的使用者名稱。

3、進入聊天室後可以看到當前線上的使用者和線上人數。

4、使用者上線或退出,所有線上的客戶端應該實時更新。

5、使用者傳送訊息,所有客戶端實時收取。

在實際的開發過程中,為了使用WebSocket介面構建Web應用,我們首先需要構建一個實現了 WebSocket規範的服務端,服務端的實現不受平臺和開發語言的限制,只需要遵從WebSocket規範即可,目前已經出現了一些比較成熟的 WebSocket服務端實現,比如本文使用的Node.js+Socket.IO。為什麼選用這個方案呢?先來簡單介紹下。

##Node.js##

Node.js採用C++語言編寫而成,它不是Javascript應用,而是一個Javascript的執行環境,據Node.js創始人 Ryan Dahl回憶,他最初希望採用Ruby來寫Node.js,但是後來發現Ruby虛擬機器的效能不能滿足他的要求,後來他嘗試採用V8引擎,所以選擇了 C++語言。

Node.js支援的系統包括*nux、Windows,這意味著程式設計師可以編寫系統級或者伺服器端的Javascript程式碼,交給 Node.js來解釋執行。Node.js的Web開發框架Express,可以幫助程式設計師快速建立web站點,從2009年誕生至今,Node.js的 成長的速度有目共睹,其發展前景獲得了技術社群的充分肯定。

##Socket.IO

Socket.IO是一個開源的WebSocket庫,它通過Node.js實現WebSocket服務端,同時也提供客戶端JS庫。Socket.IO支援以事件為基礎的實時雙向通訊,它可以工作在任何平臺、瀏覽器或移動裝置。

Socket.IO支援4種協議:WebSocket、htmlfile、xhr-polling、jsonp-polling,它會自動根據瀏覽 器選擇適合的通訊方式,從而讓開發者可以聚焦到功能的實現而不是平臺的相容性,同時Socket.IO具有不錯的穩定性和效能。 ##搭建WebSocket服務端

我們用node.js的express + socket.io 來實現今天的任務。

先進入到你的工作目錄,比如

初探websocket

  • app.js 服務端

  • /public 客戶端

程式碼不貼了,可以在github看到原始碼。

本文中原始碼:地址

##總結

和ajax的一些區別:

ajax實現了從客戶端到伺服器的推送技術,而要實現從伺服器到客戶端就比較麻煩了,我們知道的反向ajax就是從伺服器到客戶端。

socket可以平等的實現客戶端伺服器之間的通訊。