WebSocket とは
WebSocket プロトコルは、HTML5 で導入された新しいプロトコルで、ブラウザとサーバー間の全二重通信を実現することを目的としています。上記のリンクを読んだ学生は、WebSocket API でこれを効率が低く消費量が多い方法で行う方法 (ポーリングまたは Comet) をすでに理解しているはずです。ブラウザとサーバーはハンドシェイク アクションを実行するだけで済みます。ブラウザとサーバーの間に高速チャネルが形成されます。データは両者間で直接送信できます。これを同時に行うと 2 つの利点があります
1. 通信送信バイト数の削減: 以前に http を使用してデータを送信した場合と比較して、WebSocket が送信する追加情報はわずか 2k
です。 >
2. クライアントがクエリを実行しなくても、サーバーはアクティブにメッセージをクライアントにプッシュできます。
概念と利点はインターネット上のいたるところにあるため、簡単には説明しません。原則を確認してから、チャット ルームの Web バージョンを作成してください
握手
WebSocket プロトコルでは、TCP 接続の 3 ウェイ ハンドシェイクに加えて、クライアントとサーバーは接続を確立するために追加のハンドシェイクを必要とします。プロトコルの最新バージョンでは、次のようになります。
クライアントがサーバーにリクエストを送信します リクエストを送信
GET / HTTP/1.1
アップグレード: websocket
接続: アップグレード
ホスト: 127.0.0.1:8080
オリジン: < a href="http://test.com">http://test.com
プラグマ: no-cache
Cache-Control: no-cache
Sec-WebSocket-キー: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (Gecko のような KHTML) Chrome/31.0.1650.57 Safari/537.36
サーバーが応答します
HTTP/ 1.1 101 スイッチング プロトコル
アップグレード: websocket
接続: アップグレード
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=
リクエスト内の「Sec-WebSocket-Key」がランダムである場合、サーバーはこれらのデータを使用して SHA-1 情報ダイジェストを構築します。マジック文字列「258EAFA5-E914-47DA-95CA-C5AB0DC85B11」を「Sec-WebSocket-Key」に追加します。 SHA-1 暗号化を使用し、次に BASE-64 エンコードを使用し、結果を「Sec-WebSocket-Accept」ヘッダーの値としてクライアントに返します (Wikipedia より)。
ウェブソケット API
ハンドシェイクの後、ブラウザとサーバーは接続を確立し、両者は相互に通信できるようになります。 WebSocket の API は非常にシンプルです。W3C の定義を見てください。
[Constructor(DOMString url, オプション (DOMString または DOMString[]) プロトコル)]
interface WebSocket : EventTarget {
readonlyattribute DOMString url;
// 準備完了状態
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2 ;
const unsigned short CLOSED = 3;
読み取り専用属性 unsigned short readyState;
読み取り専用属性 unsigned longbufferedAmount;
// ネットワーク
属性 EventHandler onopen;
属性 EventHandler onerror;
属性 EventHandler onclose;
読み取り専用属性 DOMString 拡張機能;
読み取り専用属性 DOMString プロトコル;
void close([クランプ] オプションの符号なしショート コード、オプションの DOMString 理由);
// メッセージング
属性 EventHandler onmessage;
属性 BinaryType binaryType;
void send(DOMString data);
void send(Blob data);
void send(ArrayBuffer data);
void send(ArrayBufferView data);
};
WebSocket を作成します
その呼び出しコンストラクターを作成し、WebSocket を作成するアドレスを渡します。アドレス プロトコルは ws/wss
Closeソケット
呼叫webservice實例的close()方法就可以關閉webservice,當然也可以傳入一個code和string說明為什麼關了
幾個回呼函數句柄
由於其非同步執行,回呼函數自然少不了,有四個重要的
onopen:連接創建後調用
onmessage:接收到伺服器訊息後調用
onerror:出錯時調用
onclose:關閉連線的時候呼叫
看名字就知道是做什麼的了,每個回調函數都會傳入一個Event對象,可以透過event.data存取訊息
使用API
我們可以在創建socket成功後來為其回呼函數賦值