🚀 WebSocketとは？ HTTPとの違いをリサーチしてみた！

## はじめに

先日、実務でシステムのWebSocket化という議題が出ていたので、まず**WebSocket**ってなんぞやということで気になり調べてみました:v:

**リアルタイム通信** と聞くと、チャットアプリやオンラインゲームを思い浮かべる人も多いのではないでしょうか？
これらのアプリに欠かせない技術が **WebSocket** です！

## 目次

1. [そもそも通信ってどうなってるの？](#-そもそも通信ってどうなってるの)
2. [WebSocketの登場！](#-websocketの登場)
3. [HTTP通信との違い](#-http通信との違い)
4. [WebSocketのメリット・デメリット](#-websocketのメリットデメリット)
5. [WebSocketが使われているアプリジャンル](#-websocketが使われているアプリジャンル)
6. [WebSocketが適している場面と注意点](#-websocketが適している場面と注意点)
7. [まとめ](#-まとめ)
8. [参考文献](#-参考文献)

## 🧷 そもそも通信ってどうなってるの？
普段、私たちがウェブサイトを見ているときは **HTTP通信** という方式が使われています。

### 📥 HTTP通信の流れ
1. ブラウザ: 「サーバーさん！このページちょーだい！」
2. サーバー: 「はい、どうぞ！」（HTMLや画像などを送る）
3. これで通信は 終了（接続が切れる）

### ✅ 問題点
* ページが更新されるまでサーバーから新しい情報は来ない
* チャットやゲームみたいにリアルタイムで情報が欲しい場合は不便

## 🧷 WebSocketの登場！
**WebSocket** は、ブラウザとサーバーが 双方向通信 を行える仕組みです。
従来の HTTP通信 と比べて、リアルタイム性と効率性に優れています。

### 🌐 WebSocket通信の流れ
1. ブラウザ: 「サーバーさん！ずっと繋がっていていい？」
2. サーバー: 「いいよ！パイプ（通信路）開くね！」
3. お互いに自由にデータを 送り合い放題 🎉

## 🧷 HTTP通信との違い
|| HTTP通信 | WebSocket |
|:-----------|:------------|:------------|
| 通信 | 一方向通信（リクエストごとに接続） | 双方向通信（常時接続）|
| 接続 | 通信ごとに接続と切断を繰り返す | 一度接続したら、維持される |
| データ送信 | 必要な時にリクエスト | 接続維持でオーバーヘッドが少ない |
| 効率性 | 送信のたびにオーバーヘッドが発生 | 双方向通信（常時接続）|
| 用途 | 静的なページ表示、API呼び出し | チャット、ゲーム、リアルタイム通知など |

### :point_up_2: たとえるなら…
**HTTP通信** は「ピザのデリバリー」🍕
* 頼むたびに1回きりのやりとり
* 食べたくなったらまた注文

**WebSocket** は「固定電話」☎️
* 一度繋がったらずっと会話できる
* 必要なときに好きなだけ話せる

## 🧷 WebSocketの仕組み
WebSocketは、まず HTTPで接続を開始しますが、その後で通信がアップグレードされます。

### 🔧 通信の流れ
**1. クライアントから接続要求**
* ブラウザが wss:// でサーバーに接続要求

**2. サーバーが接続を承認**
* 通信が HTTPからWebSocketにアップグレード

**3. 常時接続でデータを自由にやりとり**
* 双方向にデータを送信＆受信し続ける

### 👩‍💻 実際のコード例
シンプルなWebSocket接続の例です👇
```js
// サーバーに接続
const socket = new WebSocket('wss://example.com');

// 接続成功時
socket.addEventListener('open', () => {
  console.log('接続しました！');
  socket.send('こんにちは！');
});

// サーバーからメッセージを受信
socket.addEventListener('message', (event) => {
  console.log(`サーバーから: ${event.data}`);
});

// エラー時
socket.addEventListener('error', (error) => {
  console.error('エラー:', error);
});
```
💡 `wss://` は **セキュア版WebSocket**（HTTPSと同じように暗号化通信）です。

## 🧷 WebSocketのメリット・デメリット
### 💕 メリット
**✔️ リアルタイム通信が可能**
* チャット、通知、ゲームなどに最適
* サーバーからも好きなタイミングでプッシュ通知が可能

**✔️ 通信効率が良い**
* 一度接続したら維持されるため、頻繁に接続・切断を繰り返す必要がない
* オーバーヘッドが減り、通信コストを抑えられる

**✔️ 通信速度が速い**
* レイテンシ（遅延）が少ない
* リアルタイム性が求められるアプリに有利

### 💘 デメリット
**⚠️ サーバー負荷が高くなりやすい**
* 接続を維持するため、サーバーのリソースを消費し続ける
* ユーザー数が多いとスケーリングが難しくなる

**⚠️ ブラウザの対応が必要**
* 古いブラウザではサポートされていない場合がある（とはいえ最近はほぼ対応済み）

**⚠️ ファイアウォール制限に注意**
* 一部のファイアウォールやプロキシで通信がブロックされる可能性がある

## 🧷 WebSocketが使われているアプリジャンル
### ① チャットアプリ 💬
* LINEやSlack などのリアルタイムチャット
* メッセージを即座にやり取りできる

### ② オンラインゲーム 🎮
* プレイヤーの操作を即座に反映
* 多人数で同時に接続できるゲームサーバー

### ③ 株価・仮想通貨のリアルタイム表示 💹
* 株価や暗号資産のリアルタイム更新
* Coinbase や Binance などで利用

### ④ 通知サービス 🔔
* Webアプリでのリアルタイム通知
例: 「新しいメッセージが届きました！」のポップアップ表示

## 🧷 WebSocketが適している場面と注意点
### 💡 こんなときに使うと良い！
* リアルタイム性が重要なアプリ
* チャット、ゲーム、ライブストリーミング
* 常に最新データを表示するダッシュボード

### ⚠️ 使わない方が良い場合
* 静的なページ表示だけの場合
* 小規模アプリで接続数が少ない場合
* 通信負荷を抑えたい場面

## 🎉 まとめ
WebSocketは、HTTP通信にはできない **リアルタイム性** を実現できる強力な技術！✨

### ✅ メリット
* 双方向通信＆リアルタイム更新
* 通信効率が良い

### ⚠️ デメリット
* サーバー負荷が高くなりがち
* スケーリングや負荷分散の工夫が必要

## 💫 参考文献
* [WebSocketとは？WebSocketについて詳しく解説します](https://www.freshvoice.net/knowledge/word/6323/)