socket.io筆記
WebSocket
WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。
現很多網站為了實現即時通訊，所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然後由服務器返回最新的數據給客服端的瀏覽器，這種方式有一個很大的弊端，就是會占用很多的帶寬。
最新的輪詢效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通信，但依然需要發出請求。
使用WebSocket，瀏覽器和服務器只需要要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道，兩者之間就直接可以數據互相傳送。而且它為我們實現即時服務帶來了兩大好處：
- 節省資源：互相溝通的Header是很小的-大概只有 2 Bytes。
- 推送信息：不需要客戶端請求，服務器可以主動傳送數據給客戶端。
實現了websocket的瀏覽器：
socket.io
Socket.IO是一個WebSocket庫，包括了客戶端的js和服務器端的nodejs，它的目標是構建可以在不同瀏覽器和移動設備上使用的實時應用。
socket.io的特點
- 易用性：socket.io封裝了服務端和客戶端，使用起來非常簡單方便。
- 跨平臺：socket.io支持跨平臺，這就意味著你有了更多的選擇，可以在自己喜歡的平臺下開發實時應用。
- 自適應：它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現網絡實時應用，非常方便和人性化，而且支持的瀏覽器最低達IE5.5。
安裝部署
socket.io支持跨平臺，在不同平臺下，它的使用方法也是大同小異，下面我們就來安裝使用它
首先要下載安裝node環境，然後通過npm安裝socket.io
npm install socket.io
服務監聽
socket.io的服務端啟動非常的簡單，引用socket.io模塊。
var io = require(‘socket.io‘);
然後調用listen函數，傳入監聽的端口號，開始服務監聽。練習環境中啟用了80端口用於測試，在練習時只需要監聽80端口即可：
var io = require(‘socket.io‘)(80);
註冊事件
我們學習了如何啟動簡單的socket服務，下面來學習一下如何為服務端註冊一些常用的事件：
var io = require(‘socket.io‘)(80); io.on(‘connection‘,function(socket){ //連接成功... socket.on(‘disconnect‘,function(){ //用戶已經離開... }) })
connection事件在客戶端成功連接到服務端時觸發，有了這個事件，我們可以隨時掌握用戶連接到服務端的信息。
當客戶端成功建立連接時，在connection事件的回調函數中，我們還是可以為socket註冊一些常用的事件,如：disconnect事件，它在客戶端連接斷開是觸發，這時候我就知道用戶已經離開了。
啟動服務
目前為止，我們已經搭建好了一個最簡單的socket服務器，為了在瀏覽器中能夠訪問到我們的服務，我們還需要在服務端搭建一個簡單的web服務器，讓瀏覽器能夠訪問我們的客戶端頁面。
為了便捷，我們選用node.js中常用的express框架來實現web服務，示例如下：
var express = require(‘express‘); var app = express();// 創建express實例，賦值給app。 app.get(‘/‘,function(req,res){ res.status(200).send(‘Hello world！‘); }); var server = require(‘http‘).createServer(app); var io = require(‘socket.io‘)(server); io.on(‘connection‘,function(socket){ }); server.listen(80);
客戶端引用
服務端構建完畢，下面看一看客戶端應該如何使用。
服務端運行後會在根目錄動態生成socket.io的客戶端js文件，客戶端可以通過固定路徑/socket.io/socket.io.js添加引用。
首先添加網頁index.html,並在網頁中引用客戶端js文件：
<script src="/socket.io/socket.io.js"></script>
或者也可以引用官方的cdn文件
//官方CDN <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
連接服務
當客戶端成功加載socket.io客戶端文件後會獲取到一個全局對象io，我們將通過io.connect函數來向服務端發起連接請求。
var socket = io.connect(‘/‘); socket.on(‘connect‘,function(){ //連接成功 }); socket.on(‘disconnect‘,function(data){ //連接斷開 });
connect函數可以接受一個url參數，url可以socket服務的http完整地址，也可以是相對路徑，如果省略則表示默認連接當前路徑。與服務端類似，客戶端也需要註冊相應的事件來捕獲信息，不同的是客戶端連接成功的事件是connect。
了解了客戶端如何使用，下面我們創建網頁index.html，並添加如下內容(保存):
<html> <head> <script src="/socket.io/socket.io.js"></script> <script> window.onload = function(){ var socket = io.connect(‘/‘); socket.on(‘connect‘,function(){ document.write(‘連接成功!‘); }); }; </script> </head> <body> </body> </html>
頁面添加完畢還要記得在服務端app.js中為它添加路由，讓我們可以訪問測試網頁：
app.get(‘/index‘,function(req,res){ res.sendFile(‘index.html‘,{root:__dirname}); });
實時通訊
服務端和客戶端都構建完畢了，下面開始發送消息吧。
當我們成功建立連接後，我們可以通過socket對象的send函數來互相發送消息，示例-客戶端向服務端發送消息(index.html)：
var socket = io.connect(‘/‘); socket.on(‘connect‘,function(){ //客戶端連接成功後發送消息‘hello world!‘ socket.send(‘hello world!‘); }); socket.on(‘message‘,function(data){ alert(data); });
連接成功後，我們向服務端發送消息_hello world!_，還為socket註冊了_message_事件，它是_send_函數對應的接收消息的事件，當服務端向客戶端send消息時，我們就可以在_message_事件中接收到發送過來的消息。 服務端向客戶端發送消息也可以通過_send_的方式，示例 - 服務端向客戶端發送消息(app.js)：
var io = require(‘scoket.io‘); io.on(‘connection‘,function(socket){ socket.send(‘你好啊！‘); socket.on(‘message‘,function(data){ //收到消息 console.log(data); }); });
與客戶端相同，服務端也需要為socket註冊message事件來接收客戶端發送過來的消息。
小結
上面講了socket.io是什麽，它並不是一項新的功能或者技術，它只是對目前實時通訊技術的封裝，如HTML5中的網絡技術WebSocket、AJAX長輪詢、Iframe流等等，了解到它的一些優點，如跨平臺、自適應等，我們可以借助它快速創建統一高效的實時應用。
以上主要講了如何搭建一個最基本的socket服務器，使用最簡單的客戶端與服務器建立連接，並實現信息的互發，當然socket.io的功能遠不止如此，它還有很多非常實用的功能。
socket.io筆記