node.js中的socket.io入門實例

2019-11-20 20:46:56

字體：大中小

來源：轉載

供稿：網友

關于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頭。