【JavaScript入門】誰でも分かるWebSocketによるデータ送受信の方法

こんにちは、ライターのマサトです!

今回は、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()」を使う

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー