快捷導(dǎo)航

node.js中的socket.io入門實(shí)例

更新時(shí)間：2014年04月26日 10:13:58 作者：

這篇文章主要介紹了node.js中的socket.io入門實(shí)例,并對websocket等反向ajax技術(shù)做了介紹,需要的朋友可以參考下

關(guān)于websocket等反向ajax技術(shù)介紹

在實(shí)時(shí)web應(yīng)用中，常見的方法是反向Ajax。反向Ajax的定義：

反向Ajax（Reverse Ajax）本質(zhì)上則是這樣的一種概念：能夠從服務(wù)器端向客戶端發(fā)送數(shù)據(jù)。在一個(gè)標(biāo)準(zhǔn)的HTTP Ajax請求中，數(shù)據(jù)是發(fā)送給服務(wù)器端的，反向Ajax可以某些特定的方式來模擬發(fā)出一個(gè)Ajax請求，這些方式本文都會論及，這樣的話，服務(wù)器就可以盡可能快地向客戶端發(fā)送事件（低延遲通信）。

反向Ajax技術(shù)主要有兩點(diǎn)內(nèi)容：一是服務(wù)器端保持住TCP連接直到其有數(shù)據(jù)發(fā)送給客戶端（可以使用循環(huán)和睡眠實(shí)現(xiàn)），二是客戶端js編程技巧。

websocket是html5的規(guī)范，也屬于反ajax技術(shù)。

socket.io實(shí)現(xiàn)反向AJAX技術(shù)實(shí)例

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是一個(gè)基于nodejs的庫，其對多種反向ajax技術(shù)進(jìn)行了包裝并統(tǒng)一了接口。在運(yùn)行時(shí)候socket.io自動根據(jù)瀏覽器的情況選擇合適的反向ajax技術(shù)與socket.io服務(wù)器進(jìn)行交互。如果說websocket等技術(shù)是規(guī)范的話，那么socket.io則屬于應(yīng)用。

下面說一下如何安裝（作者使用Linux Mint 16）：

安裝node.js：

復(fù)制代碼代碼如下:

sudo apt-get install nodejs

輸入命令nodejs即可進(jìn)入shell模式。

安裝npm：

復(fù)制代碼代碼如下:

sudo apt-get install npm

安裝socket.io：

復(fù)制代碼代碼如下:

sudo npm install socket.io

安裝包存放在~/node_modules目錄下，客戶端socket.io.js存放在~/node_modules/socket.io/node_modules/socket.io-client/dist目錄下。

socket.io示例

以下示例來自官方網(wǎng)站并做了適當(dāng)修改。

首先建立server端（服務(wù)端）代碼（文件test.js）：

復(fù)制代碼代碼如下:

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);
});
});

服務(wù)端test.js綁定了8080端口，當(dāng)一個(gè)客戶端連接服務(wù)端test.js時(shí)候，服務(wù)端test.js向客戶端發(fā)出news指令并傳送數(shù)據(jù){ hello: 'world' }；而服務(wù)端test.js收到my other event指令時(shí)候會調(diào)用回調(diào)函數(shù)function (data) { console.log(data);}來處理接收到的數(shù)據(jù)data。

筆者搭建了nginx服務(wù)器，其使用的80端口，web根目錄為/usr/share/nginx/html。將~/node_modules/socket.io/node_modules/socket.io-client/dist下的socket.io.min.js復(fù)制到web根目錄，并在在web根目錄下建立文件index.php（作為客戶端），內(nèi)容如下：

復(fù)制代碼代碼如下:

<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()指定了當(dāng)收到news指令時(shí)候，應(yīng)該如何處理收到的指令對應(yīng)的數(shù)據(jù)，socket.emit()向server端發(fā)送指令和數(shù)據(jù)。

運(yùn)行server端：

復(fù)制代碼代碼如下:

$ nodejs test.js

運(yùn)行客戶端并進(jìn)行觀察：打開瀏覽器，進(jìn)入http://127.0.0.1訪問index.php，并打開firebug查看信息。

上圖來自firebug，表明了客戶端index.php連接服務(wù)端test.js后收到了來自服務(wù)端test.js的數(shù)據(jù){hello:"world"}。同時(shí)也能夠看到index.php訪問server的網(wǎng)址并非簡單的http://localhost:8080。

上圖顯示了服務(wù)端test.js的處理過程。
上圖是客戶端index.php第一次向服務(wù)端test.js發(fā)送的http頭。