首頁 > 開發者 > JavaScript
關於websocket等反向ajax技術介紹
在即時web應用中，常見的方法是反向Ajax。反向Ajax的定義：
反向Ajax（Reverse Ajax）本質上則是這樣的一種概念：能夠從伺服器端向用戶端發送資料。在一個標準的HTTP Ajax請求中，資料是發送給伺服器端的，反向Ajax可以某些特定的方式來類比發出一個Ajax請求，這些方式本文都會論及，這樣的話，伺服器就可以儘可能快地向用戶端發送事件（低延遲通訊）。
反向Ajax技術主要有兩點內容：一是伺服器端保持住TCP串連直到其有資料發送給用戶端（可以使用迴圈和睡眠實現），二是用戶端js編程技巧。
websocket是html5的規範，也屬於反ajax技術。
socket.io實現反向AJAX技術執行個體
socket.io官方介紹：
Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It's care-free realtime 100% in JavaScript. In order to provide realtime connectivity on every browser, Socket.IO selects the most capable transport at runtime, without it affecting the API. WebSocket Adobe® Flash® Socket AJAX long polling AJAX multipart streaming Forever Iframe JSONP Polling
簡單來說socket.io是一個基於nodejs的庫，其對多種反向ajax技術進行了封裝並統一了介面。在運行時候socket.io自動根據瀏覽器的情況選擇合適的反向ajax技術與socket.io伺服器進行互動。如果說websocket等技術是規範的話，那麼socket.io則屬於應用。
下面說一下如何安裝（作者使用Linux Mint 16）：
安裝node.js：
複製代碼 代碼如下:sudo apt-get install nodejs
輸入命令nodejs即可進入shell模式。
安裝npm：
複製代碼 代碼如下:sudo apt-get install npm
安裝socket.io：
複製代碼 代碼如下:sudo npm install socket.io
安裝包存放在~/node_modules目錄下，用戶端socket.io.js存放在~/node_modules/socket.io/node_modules/socket.io-client/dist目錄下。
socket.io樣本
以下樣本來自官方網站並做了適當修改。
首先建立server端（服務端）代碼（檔案test.js）：
複製代碼 代碼如下:
var io = require('socket.io').listen(8080);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
服務端test.js綁定了8080連接埠，當一個用戶端串連服務端test.js時候，服務端test.js向用戶端發出news指令並傳送資料{ hello: 'world' }；而服務端test.js收到my other event指令時候會調用回呼函數function (data) { console.log(data);}來處理接收到的資料data。
筆者搭建了nginx伺服器，其使用的80連接埠，web根目錄為/usr/share/nginx/html。將~/node_modules/socket.io/node_modules/socket.io-client/dist下的socket.io.min.js複製到web根目錄，並在在web根目錄下建立檔案index.php（作為用戶端），內容如下：
複製代碼 代碼如下:
<html>
<head>
</head>
<script src="socket.io.min.js"></script>
<body>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('news', function (data) {
console.log(data);
console.log(data["hello"]);
socket.emit('my other event', { my: 'data' });
});
</script>
</body>
</html>
上面代碼中，socket綁定了8080連接埠，也就是綁定了server端。socket.on()指定了當收到news指令時候，應該如何處理收到的指令對應的資料，socket.emit()向server端發送指令和資料。
運行server端：
複製代碼 代碼如下:$ nodejs test.js
運行用戶端並進行觀察：開啟瀏覽器，進入http://127.0.0.1訪問index.php，並開啟firebug查看資訊。
來自firebug，表明了用戶端index.php串連服務端test.js後收到了來自服務端test.js的資料{hello:"world"}。同時也能夠看到index.php訪問server的網址並非簡單的http://localhost:8080。
顯示了服務端test.js的處理過程。
是用戶端index.php第一次向服務端test.js發送的http頭。
是用戶端index.php第2次向服務端test.js發送的http頭。使用了websocket規範。
當關掉服務端test.js時候用戶端index.php出現很多Aborted狀態（紅字部分）。
分析結束。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
