背景
YouTube Live Streaming APIを用いたライブ配信機能を実装する時に、WebSocket通信（Socket.IOというライブラリを使いました）を用いて実装したのですが、実装中に、
「そもそもWebSocketとは？」
と何回も原点回帰を繰り返しては、頭の中がかなり混乱していたので、その経験を踏まえて、WebSocketについて簡潔にまとめようと思い記事にしました。
ズバリWebSocketとは？
簡潔にいうと、Webアプリケーションを作成する際に使用される通信プロトコルです。
WebSocketを使用すると、WebブラウザとWebサーバー間で双方向通信を行う事ができ、ライブチャットやオンラインゲームなど、リアルタイム性の高いアプリケーションを作成することができます。
通信プロトコルってなんだっけ？
通信プロトコルとは、通信を行うための規則や手順のことです。
通信する2つの端末間でデータをやり取りするために、どのような形式や方法でデータを送信するか、どのような順序でデータを受信するかなどを定めたもので、インターネットプロトコルやWebプロトコル、Bluetoothプロトコルなどが代表的な通信プロトコルです。
インターネットプロトコルの例
- TCP/IP（Transmission Control Protocol/Internet Protocol）
- インターネットを構成するコンピューター同士がデータをやり取りするための基本的なプロトコル
Webプロトコルの例
- HTTP（Hypertext Transfer Protocol）
- WebブラウザからWebサーバーへリクエストを送信し、データを送信するためのプロトコル
- HTTPS（Hypertext Transfer Protocol Secure）
- HTTPプロトコルにセキュリティ機能が追加されたもので、通信内容の暗号化が可能
- FTP（File Transfer Protocol）
- ファイルのアップロードやダウンロードを行うためのプロトコル
- WebSocket
- WebブラウザとWebサーバー間で双方向通信を行うためのプロトコル
Webプロトコルはインターネットプロトコルの一つとも言えます
HTTPとWebSocketの違い
HTTPとWebSocketの違いは、主に以下の2点です。
-
通信方式の違い
HTTPは、通信が発生するたびに、WebブラウザーからWebサーバーへリクエストを送信し、WebサーバーからWebブラウザーへ応答を返す通信方式です。
一方、WebSocketは一度接続した後、WebブラウザーとWebサーバー間で常に接続が維持される通信方式です。 -
通信速度の違い
HTTPは、通信が発生するたびに通信が行われるため、通信速度が遅くなります。
一方、WebSocketは、常に接続が維持されるので、通信が発生するたびに通信が行われる必要がなく、通信速度が速くなります。
それで、WebSocketはどうやって使うの？
大体の処理では、次のような手順が考えられます。
- WebブラウザでWebSocketに対応したAPIを使用して、WebSocketサーバーと接続
- WebSocketサーバーとの接続が確立したら、クライアント側からWebSocketサーバーへメッセージを送信
- WebSocketサーバーは、クライアントから送信されたメッセージを受信し、必要に応じて処理を行う
- WebSocketサーバーから、クライアントに対して応答やデータを送信
- クライアント側は、WebSocketサーバーから送信された応答やデータを受信し、必要に応じて処理を行う
つまり、WebSocketプロトコルを使用するには、必然的にWebブラウザとWebサーバーの両方でWebSocketに対応している必要があり、且つWebSocketサーバーを用意する必要があります。
実装例
WebブラウザーからWebSocket接続を行う
const ws = new WebSocket("wss://example.com");
WebSocket接続が成功したときに実行する処理
ws.onopen = () => {
console.log("WebSocket connection established");
};
WebSocket接続が失敗したときに実行する処理
ws.onerror = (error) => {
console.log("WebSocket connection error: " + error);
};
WebSocket接続が切断されたときに実行する処理
ws.onclose = () => {
console.log("WebSocket connection closed");
};
データ送信
ws.send("Hello, world!");
データ受信
ws.onmessage = (message) => {
console.log("Received message: " + message);
}
WebSocketを使うときの便利なライブラリ
- Socket.IO（Node.js用）
- websocket-client（Python用）
- autobahn（Python用）
- WebSocket-Node（Node.js用）
- Python-WebSocket-Server（Python用）
YouTube Live Streaming APIでなんでWebSocketが必要になった？
単純に、WebSocketを用いることで配信者と視聴者間でリアルタイムでコミュニケーションが可能になるからです。
実際には、WebSocket以外にもHTTPを使用することができます。
しかし、HTTPはリアルタイムな通信を実現するための技術ではないので、YouTube Live Streaming APIを用いてライブ配信を行う場合は、HTTPよりもWebSocketを使用することが推奨されています。
これであなたもWebSocketマスター
これでWebSocketについて大分理解が深まったのではないでしょうか！
私も最初は、
「WebSocketって聞いたことあるけど、他の人から何？と聞かれると、確かに何だろう？」
という状態で、色んな記事を見れば見るほど、
「結局WebSocketってなんなんだ！」
と堂々巡りでした。
この記事で、少しでもWebSocketについての知識を深める助けになれれば幸いです。
ハッピーホリデー！メリークリスマス！🎄