こんにちは、ライターのマサトです！
今回は、JavaScriptで簡単に双方向通信が可能になる「WebSocket」について学習をしていきましょう！
この記事では、
・「WebSocket」とは？
・「WebSocket」の使い方
という基本的な内容から、
・「WebSocket」で送受信を行う
などの応用的な使い方に関しても解説していきます。
この記事で、「WebSocket」をしっかり学習して自分のスキルアップを目指しましょう！
「WebSocket」とは？
まずは、「WebSocket」について基本的な知識から身につけていきましょう！
「WebSocket」は、サーバー側とユーザー側を常時接続状態にしておいて双方向通信ができるようにする技術になります。
これにより、例えばチャットアプリや複数人が同時に遊べるゲームなど、リアルタイムに通信が行えるようになります。
ただし、サーバー側のプログラムも必要になるので、今回はフロントエンド側のJavaScriptプログラミングにフォーカスを当てて解説をしていきます。
「WebSocket」の使い方
この章では、「WebSocket」の基本的な使い方について見ていきましょう！
一般的な構文やセキュアな接続が必要な「wss」、WebSocket APIが提供するメソッドについて学んでいきます。
基本的な構文と書き方について
まずは、もっとも基本となる構文から見ていきましょう！
JavaScriptでWebSocketを使えるようにするには、まず最初にインスタンスを作成するところからスタートします。
var connection = new WebSocket(【通信を行うURL】);
このようにWebSocketを「new」することでインスタンスが作成されます。
引数に指定するURLは、これからWebSocketを使って通信を行うサイトのURLになります。
つまり、サーバー側でWebSocketの通信を処理するコードが必要となります。
そこで今回は、サンプルとして無償で提供されている「echo.websocket.org」を使って練習をしていきましょう！
「ws」と「wss」の違い
一般的なURLは「http://」もしくは「https://」から始まりますよね？
しかし、WebSocketの場合は特別な通信を行うため「ws://」もしくは「wss://」から始まるURLになります。
「ws://」と「wss://」の違いについてはセキュアな通信ができるかどうか？ということです。
つまり、「http:// https://」の違いとほとんど同じ感覚で使い分ければ良いでしょう。
ちなみに、最近のサイトはほとんどがSSL対応しているので、URLが「https://」から始まる場合が多く「wss://」を使う方が多いでしょう。
WebSocketのイベント処理とメソッドについて
WebSocketでは、よく利用する4つのイベント処理と2つのメソッドがあるので合わせてご紹介しておきます！
まずは次の4種類のイベント処理を見てください！
var connection = new WebSocket(【通信を行うURL】);
//通信が接続された場合
connection.onopen = function(e) { };
//エラーが発生した場合
connection.onerror = function(error) { };
//メッセージを受け取った場合
connection.onmessage = function(e) { };
//通信が切断された場合
connection.onclose = function() { };
4つのイベント処理は以下のとおりです。
・「onopen()」：通信が接続された時に実行される
・「onerror()」：通信中にエラーが発生した時に実行される
・「onmessage()」：サーバーからデータを受信した時に実行される
・「onclose()」：通信が切断された時に実行される
一般的にWebSocketを使ったプログラムは、上記4種類のイベントを利用してプログラムを組み立てていくことになります。
また、イベント処理と合わせて2つのメソッドもよく使われます！
//データを送信するメソッド connection.send(); //通信を切断するメソッド connection.close();
2種類のメソッドは以下のとおりです！
・「send()」：データをサーバーへ送信する
・「close()」：通信を切断する
主に使うのは、サーバー側へデータを送信する「send()」と、通信を意図的に切断するための「close()」になります。
「WebSocket」で送受信を行う
この章では、「WebSocket」を使ったデータの送受信方法について見ていきましょう！
テキストデータを送信する方法
まずは、データを送信する方法から見ていきましょう！
冒頭でもご紹介しましたが、今回のサンプルではテストサーバーとして「echo.websocket.org」を利用して実行していきます。
次のサンプル例を見てください！
var connection = new WebSocket('wss://echo.websocket.org');
connection.send('サンプルデータ');
この例では、WebSocketのインスタンスを作成して「send()」メソッドでデータを送信しているのが分かります。
ただし、通常は任意のタイミングでデータを送信するはずです。
そこで、例えばボタンをクリックしたらフォームに入力されている文字列を送信するには次のように記述します。
btn.addEventListener('click', function(e) {
var text = document.getElementById('text');
connection.send(text.value);
})
この例では、入力フォームの文字列を取得してそれをsend()の引数に当てはめています。
このように記述すれば、任意のテキストデータを送信できるわけです。
テキストデータを受信する方法
次に、サーバーから返ってくるデータを受信する方法について見ていきましょう！
今回利用しているテストサーバーの「echo.websocket.org」は、送信されたデータをそのまま返してくれます。
そこで、WebSocketのイベント処理を次のように記述します。
connection.onmessage = function(e) {
console.log(e.data);
};
4種類あったイベント処理の中からメッセージを受信するために使う「onmessage()」イベントを利用しています。
簡単な記述ですが、これだけでサーバーから返ってくるデータを受信することができるわけです。
ちなみに、「close()」メソッドを一緒に使うと次のようになります。
connection.onmessage = function(e) {
console.log(e.data);
connection.close();
};
この場合は、データを受信したあとにすぐ通信が切断されるという流れになります。
この時に、「close()」で通信を切断すると再度WebSocketで接続を確立しないと通信できないという点を覚えておきましょう！
まとめ
今回は、JavaScriptで簡単に双方向通信が可能になる「WebSocket」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・WebSocketには4種類のイベント処理と2種類のメソッドをよく使う
・「ws」と「wss」の違いは「http」「https」の違いとほとんど同じ
・データを受信するには「onmessage()」、データを送信するには「send()」を使う
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
