node.js_javascript クラス ライブラリのソケット.io の使用を開始する

WebSocket およびその他のリバース Ajax テクノロジーの概要

リアルタイム Web アプリケーションでは、一般的な方法は逆 Ajax です。逆 Ajax の定義:

Reverse Ajax (リバース Ajax) は、本質的にサーバーからクライアントにデータを送信できる概念です。標準の HTTP Ajax リクエストでは、データがサーバーに送信されます。リバース Ajax は、いくつかの特定の方法で Ajax リクエストをシミュレートできます。この方法で、サーバーはデータをサーバーに送信できます。クライアントはイベントを送信します (低遅延通信)。

リバース Ajax テクノロジーには主に 2 つの内容があります。1 つはクライアントに送信するデータが得られるまでサーバーが TCP 接続を維持すること (ループとスリープを使用して実装可能)、もう 1 つはクライアントの JS プログラミング スキルです。

Websocket は HTML5 の標準であり、反 Ajax テクノロジでもあります。

リバース AJAX テクノロジーの Socket.io 実装例

socket.io 公式紹介:

Socket.IO は、さまざまなトランスポート メカニズム間の違いを曖昧にし、あらゆるブラウザーでリアルタイム接続を提供することを目的としています。 IO は、API に影響を与えることなく、実行時に最も能力のあるトランスポートを選択します。 WebSocket Adob​​e® Flash® Socket AJAX ロング ポーリング AJAX マルチパート ストリーミング Forever Iframe JSONP ポーリング

簡単に言うと、socket.io は、複数のリバース Ajax テクノロジーをパッケージ化し、インターフェイスを統合する、nodejs をベースにしたライブラリです。実行時に、socket.io はブラウザの条件に基づいて、socket.io サーバーと対話するための適切なリバース Ajax テクノロジーを自動的に選択します。 WebSocket などのテクノロジーが標準であれば、socket.io はアプリケーションです。

インストール方法は次のとおりです (著者は Linux Mint 16 を使用しています):

node.js をインストールします:

コードをコピーします コードは次のとおりです:

sudo apt- get install nodejs

コマンドnodejsを入力してシェルモードに入ります。

npm をインストールします:

コードをコピーします コードは次のとおりです:

sudo apt-get install npm

socket.io をインストールします:

コードをコピーします コードは次のとおりです:

sudo npm installsocket.io

インストール パッケージは ~/node_modules ディレクトリに保存され、クライアントのソケット.io.js は ~/node_modules/socket.io/node_modules/socket.io- に保存されます。 client/dist ディレクトリ。

socket.io の例

次の例は公式 Web サイトからのものであり、適切に変更されています。

最初にサーバー側 (サーバー側) コード (ファイル test.js) を作成します。

コードをコピーしますコードは次のとおりです:

var io = require('socket.io').listen(8080);

io.sockets.on('接続', function (socket) {
socket.emit('ニュース', { hello: 'world' });
socket.on('私の他のイベント' 、 function (data) {
console.log(data);
});
});

サーバー test.js はポート 8080 にバインドされています。クライアントが接続するときサーバー test.js が実行されている場合、サーバー test.js はニュース コマンドをクライアントに送信し、データ { hello: 'world' } を送信します。サーバー test.js が他のイベント コマンドを受信すると、コールバックが呼び出されます。 function function (data) { console.log(data);} 受信したデータ data を処理します。

著者はポート 80 を使用する nginx サーバーを構築し、Web ルート ディレクトリは /usr/share/nginx/html です。 ~/node_modules/socket.io/node_modules/socket.io-client/dist の下にあるsocket.io.min.jsをWebルートディレクトリにコピーし、Webルートディレクトリにファイルindex.phpを作成します(クライアントとして)。内容は次のとおりです:

コードをコピーします コードは次のとおりです:

<script><BR> varソケット = io.connect('http://localhost:8080');<BR>ソケット.on('ニュース', function (data) {<BR> console.log(data) ;<BR> console .log(data["hello"]);<BR>ソケット.emit('私の他のイベント', { my: 'data' });<BR> });<BR></スクリプト><BR> <P><BR></script>

上面程式碼中，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狀態（紅字部分）。

分析結束。