Node.js+Socket.IO實現的WebSocket羣聊天室源碼

首先上圖上實例




聊天室地址：http://chat.52itstyle.com


WebSocket簡介

談到Web實時推送，就不得不說WebSocket。在WebSocket出現以前，不少網站爲了實現實時推送技術，一般採用的方案是輪詢 (Polling)和Comet技術，Comet又可細分爲兩種實現方式，一種是長輪詢機制，一種稱爲流技術，這兩種方式其實是對輪詢技術的改進，這些 方案帶來很明顯的缺點，須要由瀏覽器對服務器發出HTTP request，大量消耗服務器帶寬和資源。面對這種情況，HTML5定義了WebSocket協議，能更好的節省服務器資源和帶寬並實現真正意義上的實 時推送。

WebSocket協議本質上是一個基於TCP的協議，它由通訊協議和編程API組成，WebSocket可以在瀏覽器和服務器之間創建雙向鏈接， 以基於事件的方式，賦予瀏覽器實時通訊能力。既然是雙向通訊，就意味着服務器端和客戶端能夠同時發送並響應請求，而再也不像HTTP的請求和響應。

爲了創建一個WebSocket鏈接，客戶端瀏覽器首先要向服務器發起一個HTTP請求，這個請求和一般的HTTP請求不一樣，包含了一些附加頭信 息，其中附加頭信息」Upgrade: WebSocket」代表這是一個申請協議升級的HTTP請求，服務器端解析這些附加的頭信息而後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket鏈接就創建起來了，雙方就能夠經過這個鏈接通道自由的傳遞信息，而且這個鏈接會持續存在直到客戶端或者服務器端的某一方主動的關閉連 接。

項目功能分析：

一、兼容不支持WebSocket的低版本瀏覽器。
二、容許客戶端有相同的用戶名。
三、進入聊天室後能夠看到當前在線的用戶和在線人數。
四、用戶上線或退出，全部在線的客戶端應該實時更新。
五、用戶發送消息，全部客戶端實時收取。

在實際的開發過程當中，爲了使用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具備不錯的穩定性和性能。


如何安裝Node.js

http://www.52itstyle.com/thread-21549-1-1.html

本實例採用nodejs-socketio-chat，地址爲https://github.com/plhwin/nodejs-socketio-chat
解壓後目錄中會有一個服務端和客戶端，如圖：
 

搭建WebSocket服務端

服務器環境 centos6.5,Nginx,Node.js

1、首先下載文件並解壓
2、切換到server目錄下執行一下操做
npm install --save express
npm install --save socket.io

執行成功後，會在server目錄下生成了一個名爲node_modules的文件夾，裏面分別是express和socket.io。
3、啓動服務端
node index.js& 後臺運行。

搭建WebSocket客戶端

使用Ngin部署客戶端並綁定域名

1. server {
2.         listen       80;
3.         server_name   chat.52itstyle.com;
4.         location / {
5.    index  index.html index.htm;
6.    root  /home/chat/52chat/client;
7.         }
8.         error_page   500 502 503 504  /50x.html;
9.         location = /50x.html {
10.     root   html;
11.         }
12.     }

複製代碼

啓動Nginx，如今就能夠訪問客戶端了:http://chat.52itstyle.com