【JavaScript】WebSocketとは？仕組みや使い方をわかりやすく解説

アイキャッチ画像
  • WebSocketとは？
  • WebSocketの仕組みや使い方とは？

本記事ではこのような疑問を解決します。


今回は、双方向通信を可能にするWebSocketについて。

・チャットアプリのように、メッセージが来たら通知されるようにしたい。
・サーバー側でデータの更新がされた際に、すぐさまクライアント側で表示されているデータも更新させたい。

イマドキのWebアプリであれば、上記のような機能を実現してくれるWebSocketは必須の技術です。


そこで今回はWebSocketについて仕組みや使い方をわかりやすく解説していきます。

目次

WebSocketとは？

WebSocketとはブラウザとサーバー（Webサーバー）間で双方向通信を行うためのプロトコルのことです。

従来、Web通信にはHTTPが使われていましたが、以下のような問題点がありました。

・リクエストはクライアントからしか送ることができない

・1つのコネクションで1つのリクエストしか送ることができない

・ヘッダーの情報量が多くなってしまう

よって、HTTPを使ってリアルタイム通信に近づくために以下のような方法で対応していました。

・クライアントが一定間隔でサーバーにリクエストを送る（ポーリング）

・余分に設けられたHTTP接続を利用して、クライアントからの要求なしにサーバから情報をブラウザに送る（Comet）

しかし、SNSの登場によってリアルタイムでやりとりする技術が求められるようになり、上記の方法だけでは限界が訪れたのです。


そこで開発された技術がWebSocketです。

WebSocketを使用することにより、ブラウザとサーバー間で1度だけ通信が確立されれば、低コストでの双方向通信を実現できるようになりました。


例えば、データが更新されたらページ情報も更新する、といったことが可能になったのです。

まさにLINEなどのチャットアプリはこの技術なしでは成立し得ないでしょう。


したがって、WebSocketはブラウザとサーバー間でのリアルタイム通信を実現してくれる技術なのです。

WebSocketの仕組み

WebSocketによる通信は以下の流れで行われます。

①クライアントからサーバーへリクエスト（WebSocket通信用）を送る

②サーバーは①のリクエストをチェックしてWebSocket通信への変更手続きをする

③サーバーからクライアントへレスポンス（WebSocket通信用）を返す

④ハンドシェイク（通信データの相互確認）によってコネクションが確立する

⑤これ以降はHTTPではなくWebSocketのプロトコルで通信が行われる

したがって、WebSocketはクライアントとサーバーが関係を構築した後に双方向から通信が行えるという仕組みになります。


また、WebSocketにおけるクライアントとサーバーの関係については、常連客（クライアント）とお店（サーバー）の関係に例えることができます。

一般客のようにお客とお店との関係が構築されていない上では、注文→提供の一方通行が普通です。

一方、常連客であれば、注文→提供のワンパターンだけでなく、お店側がサービスで料理を出してくれたり、耳寄りな情報を教えてくれたりすることでしょう。

これはWebSocket通信のように、常連客とお店が関係を構築して、お互いに意思疎通ができるようになったということです。


では、どのようにしてクライアントからサーバーへリクエスト（WebSocket通信用）を送る操作（上記①）を実装するのでしょうか？

結論からいうと、クライアント側でJavaScriptの記述をします。


JavaScriptによる記述の中身は次で詳しく見ていきましょう。

WebSocketの使い方

それでは最後にWebSocketの使い方を確認しましょう。

今回はクライアント側（JavaScript）に絞って解説します。

※サーバー側は言語やフレームワークによって操作が異なる

①WebSocket通信を開始する処理

まずはWebSocketインスタンスを作成して通信を開始します。

その際に引数として通信先のURLを記述しますが、
ここでのURLのはじまりは「ws://」または「wss://」にする必要があります。

const connection = new WebSocket('通信先のURL');

②通信が開始された時に実行される処理

connection.onopen = function(e) {
    ※ここに処理を記述
};

③サーバーからデータを受信した時に実行される処理

connection.onmessage = function(e) {
    ※ここに処理を記述
};

④通信が切断された時に実行される処理

connection.onclose = function(e) {
    ※ここに処理を記述
};

⑤通信中にエラーが発生した時に実行される処理

connection.onerror = function(e) {
    ※ここに処理を記述
};

⑥データをサーバーへ送信する処理

connection.send('送信内容');

⑦通信を切断する処理

connection.close();

まとめ

以上がWebSocketの仕組みや使い方になります。


以前はクライアントからしか発信（リクエスト）することができなかったため、
リアルタイム通信のようなことを実現するにはポーリングなどの合わせ技で対応する必要がありました。

しかし、双方向通信を可能にするWebSocketの登場で、
チャットアプリのメッセージ送受信やサーバー内でデータの更新が発生したらすぐさまクライアントに伝えるといった機能を実装できるようになったのです。

そんなWebSocketはクライアント側でJavaScriptを用いて通信を開始します。


本記事を参考にぜひJavaScriptでの実装を試してみてください！

JavaScriptの最新記事8件