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

作者：潘良虎
鏈接：https://www.zhihu.com/question/20215561/answer/26419995
來源：知乎
原文地址：http://www.plhwin.com/2014/05/28/nodejs-socketio/
WebSocket簡介

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

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

為了建立一個WebSocket連接，客戶端瀏覽器首先要向服務器發起一個HTTP請求，這個請求和通常的HTTP請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協議升級的HTTP請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，客戶端和服務器端的WebSocket連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。

作者：潘良虎
鏈接：https://www.zhihu.com/question/20215561/answer/26419995
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

前面講到WebSocket是HTML5中新增的一種通信協議，這意味著一部分老版本瀏覽器（主要是IE10以下版本）并不具備這個功能， 通過百度統計的公開數據顯示，IE8目前仍以33%的市場份額占據榜首，好在chrome瀏覽器市場份額逐年上升，現在以超過26%的市場份額位居第二，同時微軟前不久宣布停止對IE6的技術支持并提示用戶更新到新版本瀏覽器，這個曾經讓無數前端工程師為之頭疼的瀏覽器有望退出歷史舞臺，再加上幾乎所有的智能手機瀏覽器都支持HTML5，所以使得WebSocket的實戰意義大增，但是無論如何，我們實際的項目中，仍然要考慮低版本瀏覽器的兼容方案：在支持WebSocket的瀏覽器中采用新技術，而在不支持WebSocket的瀏覽器里啟用Comet來接收發送消息。

WebSocket實戰

本文將以多人在線聊天應用作為實例場景，我們先來確定這個聊天應用的基本需求。

需求分析

1、兼容不支持WebSocket的低版本瀏覽器。
2、允許客戶端有相同的用戶名。
3、進入聊天室后可以看到當前在線的用戶和在線人數。
4、用戶上線或退出，所有在線的客戶端應該實時更新。
5、用戶發送消息，所有客戶端實時收取。

在實際的開發過程中，為了使用WebSocket接口構建Web應用，我們首先需要構建一個實現了 WebSocket規范的服務端，服務端的實現不受平臺和開發語言的限制，只需要遵從WebSocket規范即可，目前已經出現了一些比較成熟的WebSocket服務端實現，比如本文使用的Node.js+http://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的成長的速度有目共睹，其發展前景獲得了技術社區的充分肯定。

http://Socket.IO

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

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

編碼實現

本文一開始的的插圖就是效果演示圖：可以點擊這里查看在線演示，整個開發過程非常簡單，下面簡單記錄了開發步驟：

作者：潘良虎
鏈接：https://www.zhihu.com/question/20215561/answer/26419995
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

安裝Node.js

根據自己的操作系統，去Node.js官網下載安裝即可。如果成功安裝。在命令行輸入node -v和npm -v應該能看到相應的版本號。

<img src="https://pic4.zhimg.com/9bae01a50a77c4f238d7afe632873343_b.jpg" data-rawwidth="278" data-rawheight="79" class="content_image" width="278">
搭建WebSocket服務端

這個環節我們盡可能的考慮真實生產環境，把WebSocket后端服務搭建成一個線上可以用域名訪問的服務，如果你是在本地開發環境，可以換成本地ip地址，或者使用一個虛擬域名指向本地ip。

先進入到你的工作目錄，比如 /workspace/wwwroot/plhwin/http://realtime.plhwin.com，新建一個名為package.json的文件，內容如下：

<img src="https://pic1.zhimg.com/3d487b79444ca0d1e69004ba8aa1ac54_b.jpg" data-rawwidth="372" data-rawheight="105" class="content_image" width="372">

接下來使用npm命令安裝express和http://socket.io

<img src="https://pic1.zhimg.com/e2177bce610448a115a9716219448878_b.jpg" data-rawwidth="268" data-rawheight="45" class="content_image" width="268">

安裝成功后，應該可以看到工作目錄下生成了一個名為node_modules的文件夾，里面分別是express和http://socket.io，接下來可以開始編寫服務端的代碼了，新建一個文件：index.js

<img src="https://pic1.zhimg.com/e636acfe7577ee8511dc4840cdd92198_b.jpg" data-rawwidth="437" data-rawheight="180" class="origin_image zh-lightbox-thumb" width="437" data-original="https://pic1.zhimg.com/e636acfe7577ee8511dc4840cdd92198_r.jpg">

命令行運行node index.js，如果一切順利，你應該會看到返回的listening on *:3000字樣，這說明服務已經成功搭建了。此時瀏覽器中打開 http://localhost:3000 應該可以看到正常的歡迎頁面。

如果你想要讓服務運行在線上服務器，并且可以通過域名訪問的話，可以使用Nginx做代理，在nginx.conf中添加如下配置，然后將域名（比如：http://realtime.plhwin.com）解析到服務器IP即可。

<img src="https://pic3.zhimg.com/f3614ed8bd74aa69f74f10aa7a52f2c2_b.jpg" data-rawwidth="326" data-rawheight="131" class="content_image" width="326">

完成以上步驟，http://realtime.plhwin.com:3000的后端服務就正常搭建了。

<img src="https://pic1.zhimg.com/3defa7f8c03ac8a9edcd56ec9faac8d0_b.jpg" data-rawwidth="424" data-rawheight="114" class="origin_image zh-lightbox-thumb" width="424" data-original="https://pic1.zhimg.com/3defa7f8c03ac8a9edcd56ec9faac8d0_r.jpg">
服務端代碼實現

前面講到的index.js運行在服務端，之前的代碼只是一個簡單的WebServer歡迎內容，讓我們把WebSocket服務端完整的實現代碼加入進去，整個服務端就可以處理客戶端的請求了。完整的index.js代碼如下：

<img src="https://pic3.zhimg.com/9f83d36396cf25fc5c26c28e48027482_b.jpg" data-rawwidth="785" data-rawheight="901" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic3.zhimg.com/9f83d36396cf25fc5c26c28e48027482_r.jpg">
客戶端代碼實現

進入客戶端工作目錄/workspace/wwwroot/plhwin/http://demo.plhwin.com/chat，新建一個index.html:

<img src="https://pic2.zhimg.com/443f426e187102685e738c18e127b879_b.jpg" data-rawwidth="930" data-rawheight="719" class="origin_image zh-lightbox-thumb" width="930" data-original="https://pic2.zhimg.com/443f426e187102685e738c18e127b879_r.jpg">

上面的html內容本身沒有什么好說的，我們主要看看里面的4個文件請求：
1、http://realtime.plhwin.com:3000/socket.io/socket.io.js
2、style.css
3、json3.min.js
4、client.js

第1個JS是http://Socket.IO提供的客戶端JS文件，在前面安裝服務端的步驟中，當npm安裝完http://socket.io并搭建起WebServer后，這個JS文件就可以正常訪問了。

第2個style.css文件沒什么好說的，就是樣式文件而已。

第3個JS只在IE8以下版本的IE瀏覽器中加載，目的是讓這些低版本的IE瀏覽器也能處理json，這是一個開源的JS，詳見：JSON 3

第4個client.js是完整的客戶端的業務邏輯實現代碼，它的內容如下：

<img src="https://pic1.zhimg.com/a1589ae83cf934578d4b1832cabe9c44_b.jpg" data-rawwidth="929" data-rawheight="2094" class="origin_image zh-lightbox-thumb" width="929" data-original="https://pic1.zhimg.com/a1589ae83cf934578d4b1832cabe9c44_r.jpg">

至此所有的編碼開發工作全部完成了，在瀏覽器中打開 http://demo.plhwin.com/chat/ 就可以看到效果了。

上面所有的客戶端和服務端的代碼可以從Github上獲得，地址：https://github.com/plhwin/nodejs-socketio-chat

<img src="https://pic2.zhimg.com/6841cebd770b3ec0cc850356eff9d185_b.jpg" data-rawwidth="620" data-rawheight="45" class="origin_image zh-lightbox-thumb" width="620" data-original="https://pic2.zhimg.com/6841cebd770b3ec0cc850356eff9d185_r.jpg">

下載本地后有兩個文件夾 client 和 server，client文件夾是客戶端源碼，可以放在Nginx/Apache的WebServer中，也可以放在Node.js的WebServer中。后面的server文件夾里的代碼是websocket服務端代碼，放在Node.js環境中，使用npm安裝完 express 和 http://socket.io 后，node index.js 啟動后端服務就可以了。

留給我們的思考

1、假設是一個在線客服系統，里面有許多的公司使用你的服務，每個公司自己的用戶可以通過一個專屬URL地址進入該公司的聊天室，聊天是一對一的，每個公司可以新建多個客服人員，每個客服人員可以同時和客戶端的多個用戶聊天。

2、又假設是一個在線WebIM系統，實現類似微信，qq的功能，客戶端可以看到好友在線狀態，在線列表，添加好友，刪除好友，新建群組等，消息的發送除了支持基本的文字外，還能支持表情、圖片和文件。

有興趣的同學可以繼續深入研究。

--------------------------

上面是我前段時間寫的一篇與WebSocket這個主題相關的文檔，就直接貼過來了，原文請見：使用Node.js+Socket.IO搭建WebSocket實時應用

轉載于:https://www.cnblogs.com/ameile/p/6692263.html

總結

以上是生活随笔為你收集整理的使用Node.js+Socket.IO搭建WebSocket实时应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。