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>
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
JavaScriptでソケット通信（WebSocket）する方法がよく分かったので良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
