JavaScriptでソケット通信（WebSocket）する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでソケット通信（WebSocket）する方法について解説しています。ソケット通信の仕組みと利用される場面について解説します。JavaScriptでソケット通信を行う場合の手順と書き方をみていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでソケット通信（WebSocket）する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
ソケット通信（WebSocket）する方法について詳しく説明していくね！
お願いします！
ソケット通信（WebSocket）とは
ソケット通信（WebSocket）とは、クライアントとサーバサイドでリアルタイム双方向通信にする為の技術です。
少し分かにくいものの、問い合わせのチャット機能などで利用されていたり、複数人で同時に連携して遊べるゲームなどにも利用されています。
WebSocketのプロトコルが無いころは、HTTPのロングポーリングと言う機能を利用してこのようなリアルタイム双方向通信を実現していました。
そして、比較的新しい技術であるため、利用できないブラウザーなどもあるため、注意が必要です。
WebSocketの使い方
WebSocketは、JavaScriptだけでは実現できません。
サーバーサイドの作成も必要になるため、概念的な使い方をみていきましょう。
WebSocketを利用するのは全部で４フェーズです。
- サーバとのコネクションオープン
- メッセージの送信
- メッセージの受信
- サーバーとのコネクションクローズ
最初にサーバとのコネクションを張り、その後に相互のやり取りを行い、最後にコネクションをクローズとなります。
JavaScriptでソケット通信する方法
実際にJavaScriptで記述する方法をみていきましょう。
■サーバとのコネクションオープン
var connection = new WebSocket(【通信先】);
通信先には”http”の様なURLが入ります。
その際に「ws」と「wss」の場合があるものの、これはセキュアな通信かどうかの違いで”http”,”https”の違いと同様です。
■サーバへのメッセージ送信
connection.send(【送信文字】);
作成したコネクションを利用して送信を行いましょう。
■サーバからのメッセージ受信
connection.onmessage = function(e) {};
作成したコネクションに”onmessage “メッソドがあるのでこの様にして、受信時の処理を記載できます。
■サーバとのコネクションクローズ
connection.close();
シンプルに”close”メッソドを呼び出せば完了可能です。
しかし、一度クローズをしたらまたオープンをしないといけないので注意してください。
実際に書いてみよう
ご紹介したのはJavaScript側での記載方法でした。
最初に申し上げた通り、WebSocketを利用するためには、サーバサイドの仕組みを用意しましょう
しかし、今回はJavaScriptの記載方法のテストという事で、「echo.websocket.org」を利用します。
以下、サンプルコードです。
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptでソケット通信（WebSocket）する方法</title>
</head>
<body>
<h1>JavaScriptでWebSocket</h1>
<label>WebSocket通信を【wss://echo.websocket.org】と行います。</label><br>
<input type="button" value="コネクション開始" onclick="open_cnn()"><br>
<br>
<input type="text" id="SndMsg" placeholder="送信メッセージを入力"><br>
<input type="button" value="上記メッセージを送信" onclick="snd_msg()"><br>
<br>
<textarea id="RcvMsg" cols="40" rows="4" maxlength="20" placeholder="送信と同時に同じ内容が、受信メッセージとして反映されます。"</textarea><br>
<input type="button" value="コネクション終了" onclick="close_cnn()"><br>
<br>
<script type="text/javascript">
var connection = "";
//コネクション開始ボタン
function open_cnn(){
console.log("コネクションを開始しします。");
connection = new WebSocket('wss://echo.websocket.org');
//コネクションが接続された時の動き
connection.onopen = function(e) {
console.log("コネクションを開始しまいた。");
};
//エラーが発生したされた時の動き
connection.onerror = function(error) {
console.log("エラーが発生しました。");
};
//メッセージを受け取ったされた時の動き
connection.onmessage = function(e) {
let msg = "メッセージを受信しました。" + e.data;
document.getElementById("RcvMsg").value = msg;
};
//通信が切断された時の動き
connection.onclose = function() {
console.log("コネクションを終了しまいた。");
};
}
//メッセージ送信ボタン
function snd_msg(){
connection.send(document.getElementById("SndMsg").value);
}
//コネクション終了ボタン
function close_cnn(){
connection.close();
}
</script>
</body>
</html>
執筆してくれたメンター
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
JavaScriptでソケット通信（WebSocket）する方法がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
