Websocket(Web socket)

AJAXの制限
AJAX(Asynchronous JavaScript And XML)とは?HTTPにより、クライアントがサーバに必要なデータの一部を非同期で受信できる技術.AJAXが登場する前に、ブラウザから新しいリクエストが出るたびにサーバーがWebページ全体を送信し、AJAXが登場するとページの一部が更新されます.
JSからのデータの非同期要求と受信方法
-JAXのXMLHttpRequestオブジェクト
-Fetch APIの使用
- axios
AJAXの限界
HTTPに基づく技術では,クライアントから要求があった場合にのみサーバが応答する.(=一方向通信)
データのリアルタイム更新(ex.チャットルーム)が必要な場合、サーバは応答できる必要があり、AJAXは一方向通信であるため不可能である.
リアルタイム通信を行う方法(双方向通信のように見える一方向通信を用いる方法)

ポーリング:クライアントが定期的にサーバにリクエストを送信する方法.

long-polling:クライアントがサーバに要求を送信すると、サーバ側にデータがクライアントに送信されるまで接続が維持されます.クライアントは、サーバからの応答を受信すると、すぐにサーバに要求を送信します.

ポーリングはリアルタイムとは見なされず、ポーリングと長いポーリングの欠点は、クライアントのリクエストが多くなるとサーバの負担が増加することです.
Websocketが現れる
WebソケットはHTTPの欠点を補うために提案されたプロトコルである.一方的にしか通信できないHTTPとは異なり,クライアントからの要求がなくてもサーバを介してデータを送信することができる.
オペレーションプロセス
websocketはhttp(80)、http(443)と同じポート番号を使用します.
1.握手:サーバーとクライアントが接続を確立する過程、HTTPプロトコルを使用する.
握手リクエストヘッダ

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

握手応答ヘッド

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

2.プロトコル交換:握手プロセス終了後、HTTPからWebSocketにプロトコルを変更する.httpの場合はwsに変更し、httpの場合はwssに変更します.
3.データ交換:サーバとクライアントはデータフレームの形式でデータを交換する.
4.接続解除:接続を解除する側からcloseフレームを送信し、応答を受信すると接続を解除します.
reference

Ajaxベース

HTTPからWEBSOCKETへ

1. Websocket

Webソケットサーバ-MDNの作成