WebSocketチュートリアル
9413 ワード
転載先:http://www.ruanyifeng.com/blog/2017/05/websocket.html
WebSocketはネットワーク通信プロトコルであり、多くの高度な機能が必要です.
WebSocketプロトコルの使用方法について説明します.
一、なぜWebSocketが必要なのか.
WebSocketに初めて触れた人は、同じ質問をします.私たちはすでにHTTPプロトコルを持っていますが、なぜ別のプロトコルが必要ですか.何のメリットがありますか?
答えは簡単です.HTTPプロトコルには欠陥があります.通信はクライアントからしか開始できません.
たとえば、今日の天気を知りたいのは、クライアントがサーバに要求し、サーバがクエリー結果を返すことだけです.HTTPプロトコルではサーバがクライアントに情報を積極的にプッシュすることはできない.
このような一方向要求の特徴は,サーバが連続的に状態が変化すると,クライアントが知るのは非常に面倒であることに決まっている.ポーリングは、サーバに新しい情報があるかどうかを確認するために、一定の間隔で質問するだけです.最も典型的なシーンはチャットルームです.
ポーリングの効率が低く、リソースが非常に浪費されます(接続を停止しないか、HTTP接続を常に開く必要があるため).そのため、エンジニアたちはもっと良い方法があるかどうかを考えています.WebSocketはこのように発明された.
二、紹介
WebSocket協定は2008年に誕生し、2011年に国際標準となった.すべてのブラウザがサポートされています.
その最大の特徴は、サーバーが自発的にクライアントに情報をプッシュすることができて、クライアントも自発的にサーバーに情報を送信することができて、本当の双方向の平等な対話で、サーバーのプッシュ技術の1種に属します
その他の特徴は次のとおりです.
(1)TCPプロトコル上で確立され,サーバ側の実現が容易である.
(2)HTTPプロトコルとの互換性が良好である.デフォルトポートも80と443であり、握手段階ではHTTPプロトコルを採用しているため、握手時にマスクしにくく、各種HTTPプロキシサーバを通過することができる.
(3)データフォーマットが比較的軽量で、性能コストが小さく、通信が効率的である.
(4)テキストを送信してもよいし,バイナリデータを送信してもよい.
(5)同源制限がなく,クライアントは任意のサーバと通信できる.
(6)プロトコル識別子はws(暗号化されている場合はwss)であり,サーバURLはURLである.
ws://example.com:80/some/path
三、クライアントの簡単な例
WebSocketの使い方はかなり簡単です.
次はWebスクリプトの例です(ここをクリックして実行結果を見てください)、基本的に一目でわかります.
四、クライアントのAPI
WebSocketクライアントのAPIは以下の通りです.
4.1 WebSocketコンストラクタ
WebSocketオブジェクトは、WebSocketインスタンスを新規作成するコンストラクション関数として使用されます.
var ws = new WebSocket('ws://localhost:8080');
上記の文を実行すると、クライアントはサーバに接続されます.
インスタンスオブジェクトのすべてのプロパティとメソッドのリストは、ここを参照してください.
4.2 webSocket.readyState
readyStateプロパティは、インスタンスオブジェクトの現在の状態を4つ返します. CONNECTING:値は0で、接続中であることを示します. OPEN:値は1で、接続に成功し、通信できることを示します. CLOSING:値は2で、接続がオフになっていることを示します. CLOSED:値は3で、接続が閉じているか、接続が開いていないことを示します.
次に例を示します.
4.3 webSocket.onopen
インスタンスオブジェクトのonopenプロパティ.接続に成功したコールバック関数を指定します.
複数のコールバック関数を指定する場合は、addEventListener`メソッドを使用します.
4.4 webSocket.onclose
インスタンスオブジェクトのoncloseプロパティ.接続が閉じたコールバック関数を指定します.
4.5 webSocket.onmessage
インスタンス・オブジェクトのonmessageプロパティ.サーバ・データを受信したコールバック関数を指定します.
サーバデータは、テキストまたはバイナリデータ(blobオブジェクトまたはArraybufferオブジェクト)である可能性があります.
受信したデータ型を動的に判断するほか、binaryTypeプロパティを使用して、受信したバイナリデータ型を明示的に指定することもできます.
4.6 webSocket.send()
インスタンスオブジェクトのsend()メソッドは、サーバにデータを送信するために使用されます.
テキストを送信する例.
Blobオブジェクトの送信例.
ArrayBufferオブジェクトの例を送信します.
WebSocketはネットワーク通信プロトコルであり、多くの高度な機能が必要です.
WebSocketプロトコルの使用方法について説明します.
一、なぜWebSocketが必要なのか.
WebSocketに初めて触れた人は、同じ質問をします.私たちはすでにHTTPプロトコルを持っていますが、なぜ別のプロトコルが必要ですか.何のメリットがありますか?
答えは簡単です.HTTPプロトコルには欠陥があります.通信はクライアントからしか開始できません.
たとえば、今日の天気を知りたいのは、クライアントがサーバに要求し、サーバがクエリー結果を返すことだけです.HTTPプロトコルではサーバがクライアントに情報を積極的にプッシュすることはできない.
このような一方向要求の特徴は,サーバが連続的に状態が変化すると,クライアントが知るのは非常に面倒であることに決まっている.ポーリングは、サーバに新しい情報があるかどうかを確認するために、一定の間隔で質問するだけです.最も典型的なシーンはチャットルームです.
ポーリングの効率が低く、リソースが非常に浪費されます(接続を停止しないか、HTTP接続を常に開く必要があるため).そのため、エンジニアたちはもっと良い方法があるかどうかを考えています.WebSocketはこのように発明された.
二、紹介
WebSocket協定は2008年に誕生し、2011年に国際標準となった.すべてのブラウザがサポートされています.
その最大の特徴は、サーバーが自発的にクライアントに情報をプッシュすることができて、クライアントも自発的にサーバーに情報を送信することができて、本当の双方向の平等な対話で、サーバーのプッシュ技術の1種に属します
その他の特徴は次のとおりです.
(1)TCPプロトコル上で確立され,サーバ側の実現が容易である.
(2)HTTPプロトコルとの互換性が良好である.デフォルトポートも80と443であり、握手段階ではHTTPプロトコルを採用しているため、握手時にマスクしにくく、各種HTTPプロキシサーバを通過することができる.
(3)データフォーマットが比較的軽量で、性能コストが小さく、通信が効率的である.
(4)テキストを送信してもよいし,バイナリデータを送信してもよい.
(5)同源制限がなく,クライアントは任意のサーバと通信できる.
(6)プロトコル識別子はws(暗号化されている場合はwss)であり,サーバURLはURLである.
ws://example.com:80/some/path
三、クライアントの簡単な例
WebSocketの使い方はかなり簡単です.
次はWebスクリプトの例です(ここをクリックして実行結果を見てください)、基本的に一目でわかります.
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};四、クライアントのAPI
WebSocketクライアントのAPIは以下の通りです.
4.1 WebSocketコンストラクタ
WebSocketオブジェクトは、WebSocketインスタンスを新規作成するコンストラクション関数として使用されます.
var ws = new WebSocket('ws://localhost:8080');
上記の文を実行すると、クライアントはサーバに接続されます.
インスタンスオブジェクトのすべてのプロパティとメソッドのリストは、ここを参照してください.
4.2 webSocket.readyState
readyStateプロパティは、インスタンスオブジェクトの現在の状態を4つ返します.
次に例を示します.
switch (ws.readyState) {
case WebSocket.CONNECTING:
// do something break;
case WebSocket.OPEN:
// do something break;
case WebSocket.CLOSING:
// do something break;
case WebSocket.CLOSED:
// do something break;
default:
// this never happens break;}4.3 webSocket.onopen
インスタンスオブジェクトのonopenプロパティ.接続に成功したコールバック関数を指定します.
ws.onopen = function () {
ws.send('Hello Server!');
}複数のコールバック関数を指定する場合は、addEventListener`メソッドを使用します.
ws.addEventListener('open', function (event) {
ws.send('Hello Server!');
});4.4 webSocket.onclose
インスタンスオブジェクトのoncloseプロパティ.接続が閉じたコールバック関数を指定します.
ws.onclose = function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event};ws.addEventListener("close", function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event});4.5 webSocket.onmessage
インスタンス・オブジェクトのonmessageプロパティ.サーバ・データを受信したコールバック関数を指定します.
ws.onmessage = function(event) {
var data = event.data;
// };ws.addEventListener("message", function(event) {
var data = event.data;
// });サーバデータは、テキストまたはバイナリデータ(blobオブジェクトまたはArraybufferオブジェクト)である可能性があります.
ws.onmessage = function(event){
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer");
}}受信したデータ型を動的に判断するほか、binaryTypeプロパティを使用して、受信したバイナリデータ型を明示的に指定することもできます.
// blob
ws.binaryType = "blob";
ws.onmessage = function(e) {
console.log(e.data.size);
};
// ArrayBuffer
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
console.log(e.data.byteLength);
};4.6 webSocket.send()
インスタンスオブジェクトのsend()メソッドは、サーバにデータを送信するために使用されます.
テキストを送信する例.
ws.send('your message');Blobオブジェクトの送信例.
var file = document .querySelector('input[type="file"]')
.files[0];
ws.send(file);ArrayBufferオブジェクトの例を送信します.
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i
4.7 webSocket.bufferedAmount
bufferedAmount ， 。 。
var data = new ArrayBuffer(10000000);
socket.send(data);
if (socket.bufferedAmount === 0) {
// }
else {
// }
4.8 webSocket.onerror
インスタンスオブジェクトのonerrorプロパティ.エラーを するときのコールバック を します.socket.onerror = function(event) {
// handle error event
};
socket.addEventListener("error", function(event) {
// handle error event
});
、サービス の
WebSocketサーバの では、ウィキペディアのリストを できます.
なノード には の3つがある.
μWebSockets
Socket.IO
WebSocket-Node
な い は、ドキュメントを してください.ここでは しく しません.
、WebSocketd
に、Websocketdという に なWebSocketサーバをお めします.
その の は、バックグラウンドスクリプトが に らず、 (stdin)がWebSocketの であり、 (stdout)がWebSocketの であることです.
、
えば、 はBashスクリプトcounterである.sh. #!/bin/bash
echo 1
sleep 1
echo 2
sleep 1
echo 3
コマンドラインの でこのスクリプトを すると、1、2、3が され、 ごとに1 で されます.$ bash ./counter.sh
1
2
3
に、websocketdを し、このスクリプトをサービスとして します.$ websocketd --port=8080 bash ./counter.sh
のコマンドはWebSocketサーバを します.ポートは8080です.クライアントがこのサーバに するたびにcounterが される.shスクリプトを し、その をクライアントにプッシュします.var ws = new WebSocket('ws://localhost:8080/');
ws.onmessage = function(event) {
console.log(event.data);
};
はクライアントのJavaScriptコードで、 はコンソールから1、2、3の に されます.
これがあれば、コマンドラインの をブラウザに に ることができます.$ websocketd --port=8080 ls
のコマンドはlsコマンドを し、 のディレクトリの をブラウザに します.この でサーバをリアルタイムで するのは、まったく です.
より くの い は、 の を してください. Bashスクリプトクライアント を み す 5 のコードは、 も なチャットサーバ を する.
Websocketdの は、コマンドラインのWebSocketエージェントです.コマンドラインが なプログラムであれば、ブラウザとWebSocket を うことができます. はNodeが したエコーサービスgreeterです.js. process.stdin.setEncoding('utf8');
process.stdin.on('readable', function() {
var chunk = process.stdin.read();
if (chunk !== null) {
process.stdout.write('data: ' + chunk);
}});
このスクリプトを するコマンドは のとおりです.
$ websocketd --port=8080 node ./greeter.js
には にもいろいろな の があります.
、 リンク
How to Use WebSockets
WebSockets - Send & Receive Messages
Introducing WebSockets: Bringing Sockets to the Web
