WebSocketの概要

WebSocketは、WebアプリケーションのHTTP通信に代わるものです。これらは、クライアントとサーバー間の長寿命の双方向通信チャネルを提供します。それらを使用してネットワークの相互作用を実行する方法を学ぶ

WebSocketは、WebアプリケーションのHTTP通信に代わるものです。

これらは、クライアントとサーバー間の長寿命の双方向通信チャネルを提供します。

一度確立されると、チャネルは開いたままになり、低遅延とオーバーヘッドで非常に高速な接続を提供します。

WebSocketのブラウザーサポート

WebSocketは、最新のすべてのブラウザーでサポートされています。

Browser support for WebSockets

WebSocketとHTTPの違い

HTTPは非常に異なるプロトコルであり、通信方法も異なります。

HTTPは要求/応答プロトコルです。クライアントが要求すると、サーバーはデータを返します。

WebSocketの場合：

インクルードサーバーはクライアントにメッセージを送信できますクライアントが明示的に何かを要求することなく
クライアントとサーバーは同時に話し合う
データのオーバーヘッドはほとんどありませんメッセージを送信するには交換する必要があります。これは、低遅延通信。

WebSocketに最適ですリアルタイムそして長命コミュニケーション。

HTTPに最適です時折のデータ交換クライアントによって開始された相互作用。

HTTPははるかに簡単です実装するには、WebSocketにはもう少しオーバーヘッドが必要です。

保護されたWebSocket

WebSocketには常に安全で暗号化されたプロトコルを使用してください。wss://。

ws://安全でないWebSocketバージョン（http://WebSocketsの）、そして明白な理由で避けるべきです。

新しいWebSocket接続を作成します

const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)

connectionはWebSocketオブジェクト。

接続が正常に確立されると、openイベントが発生します。

コールバック関数をに割り当てることによってそれを聞きますonopenのプロパティconnectionオブジェクト：

connection.onopen = () => {
  //...
}

エラーがある場合は、onerror関数コールバックが発生します：

connection.onerror = (error) => {
  console.log(`WebSocket error: ${error}`)
}

WebSocketを使用してサーバーにデータを送信する

接続が開いたら、サーバーにデータを送信できます。

あなたは便利に内部でそうすることができますonopenコールバック関数：

connection.onopen = () => {
  connection.send('hey')
}

WebSocketを使用してサーバーからデータを受信する

のコールバック関数で聞くonmessage、messageイベントを受信します：

connection.onmessage = (e) => {
  console.log(e.data)
}

Node.jsにサーバーを実装する

wsは人気のあるWebSocketライブラリですNode.js。

これを使用してWebSocketサーバーを構築します。また、クライアントを実装したり、WebSocketを使用して2つのバックエンドサービス間で通信したりするためにも使用できます。

を使用してインストールしますnpm：

npm init
npm install ws

書く必要のあるコードはごくわずかです。

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })
wss.on(‘connection’, (ws) => {
ws.on(‘message’, (message) => {
console.log(Received message =&gt; </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">message</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)
})
ws.send(‘ho!’)
})

このコードは、ポート8080（WebSocketのデフォルトポート）に新しいサーバーを作成し、接続が確立されたときにコールバック関数を追加して送信しますho!クライアントに送信し、受信したメッセージをログに記録します。

グリッチのライブ例を見る

WebSocketサーバーの実際の例を次に示します。https://glitch.com/edit/#!/flavio-websockets-server-example

サーバーと対話するWebSocketsクライアントは次のとおりです。https://glitch.com/edit/#!/flavio-websockets-client-example

WebSocketのデバッグ

ChromeとFirefoxには、WebSocketを介して送信されるすべての情報を視覚化する便利な方法があります。彼らのDevToolsサポートは常に改善されています。執筆時点でのFirefoxには、最も便利で有益なデバッグツールがあります。

どちらの場合も、[ネットワーク]パネルを調べて、[WS]を選択してWebSocket接続のみをフィルタリングします。

Firefox（Developer Edition）のスクリーンショットを実際に撮りました。

Firefox headers

Firefox detail

Firefox DevToolsは、私が示した以上のことを実行できます。テストに使用した例では、文字列を送信しているだけですが、より整理された方法で送信されたデータを検査できます。

Data in Firefox

チェックアウトMozillaHacksに関するこの投稿このツールの使用方法について詳しく知るため。

これはChromeのスクリーンショットです。これにより、WebSocketのデバッグツールがすぐに改善されることを願っています。

Chrome