天天看點

Node.js+Socket.IO實作的WebSocket群聊天室源碼

首先上圖上執行個體

Node.js+Socket.IO實作的WebSocket群聊天室源碼

websocket簡介

談到web實時推送,就不得不說websocket。在websocket出現之前,很多網站為了實作實時推送技術,通常采用的方案是輪詢 (polling)和comet技術,comet又可細分為兩種實作方式,一種是長輪詢機制,一種稱為流技術,這兩種方式實際上是對輪詢技術的改進,這些

方案帶來很明顯的缺點,需要由浏覽器對伺服器發出http request,大量消耗伺服器帶寬和資源。面對這種狀況,html5定義了websocket協定,能更好的節省伺服器資源和帶寬并實作真正意義上的實 時推送。

websocket協定本質上是一個基于tcp的協定,它由通信協定和程式設計api組成,websocket能夠在浏覽器和伺服器之間建立雙向連接配接, 以基于事件的方式,賦予浏覽器實時通信能力。既然是雙向通信,就意味着伺服器端和用戶端可以同時發送并響應請求,而不再像http的請求和響應。

為了建立一個websocket連接配接,用戶端浏覽器首先要向伺服器發起一個http請求,這個請求和通常的http請求不同,包含了一些附加頭信 息,其中附加頭資訊”upgrade: websocket”表明這是一個申請協定更新的http請求,伺服器端解析這些附加的頭資訊然後産生應答資訊傳回給用戶端,用戶端和伺服器端的

websocket連接配接就建立起來了,雙方就可以通過這個連接配接通道自由的傳遞資訊,并且這個連接配接會持續存在直到用戶端或者伺服器端的某一方主動的關閉連 接。

項目功能分析:

1、相容不支援websocket的低版本浏覽器。

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

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

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

5、使用者發送消息,所有用戶端實時收取。

在實際的開發過程中,為了使用websocket接口建構web應用,我們首先需要建構一個實作了 websocket規範的服務端,服務端的實作不受平台和開發語言的限制,隻需要遵從websocket規範即可,目前已經出現了一些比較成熟的 websocket服務端實作,比如本文使用的node.js+socket.io。為什麼選用這個方案呢?先來簡單介紹下他們兩。

node.js

c++語言。

成長的速度有目共睹,其發展前景獲得了技術社群的充分肯定。

socket.io

socket.io是一個開源的websocket庫,它通過node.js實作websocket服務端,同時也提供用戶端js庫。socket.io支援以事件為基礎的實時雙向通訊,它可以工作在任何平台、浏覽器或移動裝置。

socket.io支援4種協定:websocket、htmlfile、xhr-polling、jsonp-polling,它會自動根據浏覽 器選擇适合的通訊方式,進而讓開發者可以聚焦到功能的實作而不是平台的相容性,同時socket.io具有不錯的穩定性和性能。

如何安裝node.js

<a target="_blank" href="http://www.52itstyle.com/thread-21549-1-1.html">http://www.52itstyle.com/thread-21549-1-1.html</a>

解壓後目錄中會有一個服務端和用戶端,如圖:

Node.js+Socket.IO實作的WebSocket群聊天室源碼

搭建websocket服務端

伺服器環境 centos6.5,nginx,node.js

一、首先下載下傳檔案并解壓

二、切換到server目錄下執行一下操作

npm install --save express

npm install --save socket.io

執行成功後,會在server目錄下生成了一個名為node_modules的檔案夾,裡面分别是express和socket.io。

三、啟動服務端

node index.js&amp; 背景運作。

搭建websocket用戶端

使用ngin部署用戶端并綁定域名

server {

        listen       80;

        server_name   chat.52itstyle.com;

        location / {

   index  index.html index.htm;

   root  /home/chat/52chat/client;

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

    root   html;

    }

複制代碼

繼續閱讀