Heading

let socket = new WebSocket("ws://javascript.info");

また、暗号化されたwss://プロトコルもあります。

ソケットが作成されたら、そのイベントをリッスンする必要があります。 イベントは全部で4つあります。

• open – connection established,
• message – data received,
• error – Websocketエラー、
• close – 接続の終了。

…そして、何かを送信したい場合は、socket.send(data)がそれを行います。

以下に例を示します。

let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");socket.onopen = function(e) { alert(" Connection established"); alert("Sending to server"); socket.send("My name is John");};socket.onmessage = function(event) { alert(` Data received from server: ${event.data}`);};socket.onclose = function(event) { if (event.wasClean) { alert(` Connection closed cleanly, code=${event.code} reason=${event.reason}`); } else { // e.g. server process killed or network down // event.code is usually 1006 in this case alert(' Connection died'); }};socket.onerror = function(error) { alert(` ${error.message}`);};

デモのために、上の例のNode.jsで書かれた小さなサーバーserver.jsが動いています。

つまり、イベント openmessageclose が表示されているわけです。

さて、もう少し踏み込んだ話をしてみましょう。

Websocketを開く

new WebSocket(url)が作成されると、すぐに接続を開始します。

接続中、ブラウザは（ヘッダーを使用して）サーバーに尋ねます。 “Do you support Websocket?” サーバーが「はい」と答えると、HTTPではないWebSocketプロトコルで会話が続きます。

new WebSocket("wss://javascript.info/chat")が行ったリクエストのブラウザヘッダーの例です。

GET /chatHost: javascript.infoOrigin: https://javascript.infoConnection: UpgradeUpgrade: websocketSec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==Sec-WebSocket-Version: 13

• Originhttps://javascript.info。 WebSocket オブジェクトは、もともとクロスオリジンです。 特別なヘッダやその他の制限はありません。 古いサーバーはどのみちWebSocketを扱えないので、互換性の問題はありません。
• Connection: Upgrade – クライアントがプロトコルの変更を希望していることを示すシグナルです。
• Upgrade: websocket – 要求されたプロトコルは「websocket」です。
• Sec-WebSocket-Key – セキュリティのためにブラウザが生成したランダムなキーです。
• Sec-WebSocket-Version – WebSocket プロトコルのバージョンで、13 が現在のものです。

サーバーがWebSocketへの切り替えに同意した場合、コード101のレスポンスを送信する必要があります。

101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=

ここでSec-WebSocket-AcceptSec-WebSocket-Keyです。

その後、データは WebSocket プロトコルを使用して転送されますが、その構造 (フレーム) については後ほど説明します。

拡張機能とサブプロトコル

拡張機能やサブプロトコルを記述する追加のヘッダー Sec-WebSocket-ExtensionsSec-WebSocket-Protocol があるかもしれません。

例えば、

• Sec-WebSocket-Extensions: deflate-frame は、ブラウザがデータ圧縮をサポートしていることを意味しています。 拡張機能とは、データの転送に関連するもので、WebSocketプロトコルを拡張する機能のことです。

• Sec-WebSocket-Protocol: soap, wamp は、単なるデータではなく、SOAP または WAMP (「The WebSocket Application Messaging Protocol」) プロトコルでデータを転送したいことを意味します。 WebSocketのサブプロトコルは、IANAカタログに登録されています。

  このオプションのヘッダーは、new WebSocketの第2パラメータを使って設定します。

  let socket = new WebSocket("wss://javascript.info/chat", );

サーバーは、使用することに同意したプロトコルと拡張機能のリストを応答する必要があります。

例えば、リクエスト：

GET /chatHost: javascript.infoUpgrade: websocketConnection: UpgradeOrigin: https://javascript.infoSec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==Sec-WebSocket-Version: 13Sec-WebSocket-Extensions: deflate-frameSec-WebSocket-Protocol: soap, wamp

<!-- message form --><form name="publish"> <input type="text" name="message"> <input type="submit" value="Send"></form><!-- div with messages --><div></div>

JavaScriptからは次の3つのことを行います：

1. 接続を開く。
2. フォーム送信時 – socket.send(message)にメッセージを追加。
3. メッセージ受信時 – div#messagesにメッセージを追加。

以下にコードを示します。

let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws");// send message from the formdocument.forms.publish.onsubmit = function() { let outgoingMessage = this.message.value; socket.send(outgoingMessage); return false;};// message received - show the message in div#messagessocket.onmessage = function(event) { let message = event.data; let messageElem = document.createElement('div'); messageElem.textContent = message; document.getElementById('messages').prepend(messageElem);}

const ws = new require('ws');const wss = new ws.Server({noServer: true});const clients = new Set();http.createServer((req, res) => { // here we only handle websocket connections // in real project we'd have some other code here to handle non-websocket requests wss.handleUpgrade(req, req.socket, Buffer.alloc(0), onSocketConnect);});function onSocketConnect(ws) { clients.add(ws); ws.on('message', function(message) { message = message.slice(0, 50); // max message length will be 50 for(let client of clients) { client.send(message); } }); ws.on('close', function() { clients.delete(ws); });}

ダウンロードして（iframeの右上のボタン）、ローカルで実行することもできます。

Summary

WebSocketは、ブラウザとサーバーの持続的な接続を行うための最新の方法です。

• WebSocketにはクロスオリジンの制限がありません。
• ブラウザでよくサポートされています。
• 文字列やバイナリデータを送受信できます。

APIはシンプルです。

Methods:

• socket.send(data),
• socket.close(, ).

Events:

• open,
• message,
• error,
• close.

WebSocket単体では、再接続や認証、その他多くのハイレベルなメカニズムを含みません。

既存のプロジェクトに WebSocket を統合するために、メインの HTTP サーバーと並行して WebSocket サーバーを実行し、1 つのデータベースを共有することがあります。 WebSocket へのリクエストは、WebSocket サーバーにつながるサブドメインである wss://ws.site.comhttps://site.com はメインの HTTP サーバーに向かいます。

もちろん、他の統合方法も可能です。