この記事でわかること

・websocketとは何かがわかる
・websocketの仕組みが「ざっくりと」わかる

websocket通信とは何か？

ググると、
ブラウザとサーバー（Webサーバー）間で双方向通信を行うためのプロトコルのこと
と出てきます。つまりどういうこと？　と思った方も多いはず。

噛み砕くと...

例えばみんなが使っているアプリのラインを想像してください。

だれかにメッセージを送ります。
その返信が、更新ボタンをおさずとも「ラインッ」という音と同時に、メッセージが更新されます。
この、更新ボタンをおさずに(こちらからリクエストを送らないで)メッセージを受け取ることができるのがwebsocket通信です。

そんなの当たり前じゃんと思う人もいるかもしれないので、websocket通信じゃない例を見てみます。
例えば予約フォームを想像してください。

メールアドレスをいれて、名前をいれて、「送信」ボタン」を押します。すると、画面が変わり、「予約を受け付けました」と表示されます。

この場合、送信ボタンを押して(こちらからリクエストを送って)、予約が無事に完了したよという返事が返ってきます。
websocket通信と比較されるのが、HTTP通信です。

Websoket通信は、こちらからリクエストをせずとも、相手からの通知を受け取れる通信
HTTP通信は、こちらからリクエストを送ることで、相手からの返事を受け取れる通信

websocket通信では、
私がラインを友人に送る　私→友人(私→サーバー)
友達がラインを私に送る　私←友人(私←サーバー)
で、双方向通信が可能になるわけです。(私と友人の間にはラインのアプリサーバーがあります)

HTTP通信では、
私が予約フォームで、送信ボタンを押して、予約完了の表示が出ることはあっても、
予約フォームの画面を開いていたら、何も押してないのに、急に「予約完了」のメッセージが送りつけられてくる、なんてことはありません。
私→サーバー　の単方向の通信になります。

websocket通信のリアルタイム通知を実装する

シナリオ
Aさんの学校では、画面を開いているとリアルタイムで通知が届くチャットアプリを利用して、会話をしています。
・Aさん、Bさん、Cさんは「１年グループ」に所属しています。
・Iさん、Jさん、Kさんは「２年グループ」に所属しています。
Aさんの所属している「１年グループ」で、Cさんがメッセージを送りました。通知は、１年グループに所属している人全員に送られます。

全体の流れ

①で起こっている処理を詳しく

フロントエンドにて、画面の初期表示時に、「新しく画面が開かれたから、新しい接続を、通知送るリストに登録してね」というリクエストを、バックエンドに送る
バックエンドにて、フロントエンドからのリクエストを受け取り、新しい接続を作成
フロントエンドにて、「新しく作った接続(ConnectionID)が"１年グループ"に関連付くように処理して」とバックエンドに指示を送る
バックエンドにて、新しく作ったConnectionIdに、groupID：1年グループを関連づける

というような処理を行っています。

【フロントエンド】Websocket通知の実装

vue.js

  data: function () {
    return {
      groupId: String
    };
  },
  
  async created() {
    let self = this;
    self.groupId = "グループ名"
    // 新しい接続を作るようバックエンドにリクエストする
      this.connection = new WebSocket(process.env.VUE_APP_WEBSOCKET_ENDPOINT)
      // 通知が来るまで待機。通知が来たら、この中で処理を行う
      this.connection.onmessage = function (event) {
        console.log('通知されたメッセージ　:', event);
      }
      // 今のConnectionIDのレコードに、groupID:グループ名を入れるよう、バックエンドにリクエストする
      this.connection.onopen = () => this.connection.send(self.groupId);
  },

【バックエンド】Websocket通知の実装

バックエンドはというと、
ConnectionIdをパラメータに持つリクエストが来た場合と、
ConnectionIdをパラメータに持たないリクエストが来た場合で処理を変えて行います。

バックエンドの実装については、gitでコードをあげている方もいるので、そちらを見てもらえたらと思います。（正直、うまく説明できる気がしません）

一文でいうと、Websocket通知って何？

誰かがブラウザを開くたびに、開かれたブラウザの住所みたいなものを「通知するリスト」に保存する仕組みになっていて、更新が必要なたびに、そのリストに載っているブラウザにリアルタイム通知を送る仕組みのこと

今回は、Websocketについて学んだイメージを絵にしてみました。まだまだ自分は勉強不足ですので、間違っている情報等あればコメント等で教えていただければ嬉しいです。