ゆめさくコード

WebSocket

luagate/websocket-introWebSocket入門20 枚ネットワーク
スライド103触れる図解124レッスンの導入6

上から下へ、全 20 枚そのまま並べています。

発表モードで開く

WebSocket入門

WebSocket

つなぎっぱなしで即やり取りするリアルタイム通信

1
1

目次

今日の流れ

1. WebSocketって何のためにあるの？

2. HTTPとの違い

3. しくみ — 一度つないだら開きっぱなし

4. 実際の使われ方とコード

5. まとめと振り返り

2
2
WebSocket入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • WebSocketが「双方向リアルタイム通信」だと分かる
  • HTTPとの違いをイメージできる
  • 接続が開きっぱなしになる意味が分かる
  • どんなアプリに向いているか説明できる
  • 基本的なコードの形を読める
10
3
WebSocket入門 - イントロ

WebSocket とは

一度つなぐと、その通り道を開いたまま双方向にやり取りできる通信です。

WebSocket（ウェブソケット）

クライアントとサーバーが一度接続したら、その接続を保ったまま、どちらからでも自由にデータを送り合える双方向のリアルタイム通信方式。

・接続を開いたまま保ち続ける

・サーバーからも自由にデータを送れる

・毎回つなぎ直さないので速い

・チャットやゲームなど即時性が必要な場面で使う

11
4
WebSocket入門 - イントロ

WebSocket ＝ 電話に似ている

つなぎっぱなしで両方から話せる、という点で電話にたとえると分かりやすいです。

つなぐ
  • 最初に一度だけ電話をかける
  • 回線がつながる
話し続ける
  • 切らずに会話を続ける
  • どちらからでも話せる
切る
  • 終わったら回線を切る
  • 必要なときだけまたつなぐ
12
5
WebSocket入門 - イントロ

どんなアプリで使われている？

即時のやり取りが欲しいサービスで、WebSocketが活躍します。

  • チャットアプリのメッセージ送受信
  • オンラインゲームの位置や状態の同期
  • 株価や仮想通貨のリアルタイム表示
  • 複数人で同時に編集する共同作業ツール
  • 通知をその場で画面に出す機能
13
6

WebSocket入門 - HTTP比較

2

第2部 HTTPとの違い

つど聞くか、つなぎっぱなしか

20
7
WebSocket入門 - HTTP比較

HTTP と WebSocket

・HTTPは「頼んで返ってきたら終わり」、WebSocketは「つないだまま送り合う」のが大きな違いです。

HTTP（つど聞く）

  • 1回ごとに接続して終わり
  • クライアントから頼むのが基本
  • サーバーから勝手に送れない
  • 新着を知るには何度も聞きに行く
  • リアルタイム表示は苦手

WebSocket（つなぎっぱなし）

  • 一度つないだら接続を保つ
  • どちらからでも送れる
  • サーバーから即プッシュできる
  • 聞きに行かなくても届く
  • リアルタイムが得意
21
8
WebSocket入門 - HTTP比較

双方向通信という考え方

WebSocketは「両方から自由に話せる」ことが本質です。

双方向通信（全二重 / Full-Duplex）

クライアントとサーバーのどちらからでも、好きなタイミングでデータを送れる通信のあり方。WebSocketはこれを1本の接続で実現する。

・サーバー発の通知をすぐ届けられる

・送る側・受ける側が固定されない

・やり取りの往復のたびに接続しなおさない

・リアルタイム性が求められる場面に強い

22
9
WebSocket入門 - HTTP比較

新着1件に気づくまでの待ち時間（イメージ）

ポーリングは次に聞きに行くまで待ちますが、WebSocketは起きた瞬間に届きます。あくまでイメージの比較です。

2500 ミリ秒2000150010005000
2500ミリ秒
500ミリ秒
20ミリ秒
ポーリング(5秒間隔)
ポーリング(1秒間隔)
WebSocket

出典: 待ち時間の傾向を示す概念図（概算）

23
10

WebSocket入門 - しくみ

3

第3部 しくみ

一度つないだら開きっぱなし

30
11
WebSocket入門 - しくみ

接続が始まるまでの流れ

WebSocketは最初HTTPで挨拶し、途中から専用の通り道に切り替わります。

1. HTTPで挨拶

まずHTTPで「WebSocketに切り替えたい」と頼む

2. 切り替え合意

サーバーが応じて接続を格上げする（ハンドシェイク）

3. 開きっぱなし

双方向の通り道が開いたまま保たれる

4. 送り合う

どちらからでも自由にメッセージを送れる

31
12
WebSocket入門 - しくみ

クライアント側のコード（例）

・つないで、受け取り、送る。ブラウザ標準のWebSocketで書けます。

javascript
// サーバーへ接続する
const socket = new WebSocket("wss://example.com/chat");

// メッセージを受け取ったとき
socket.onmessage = (e) => {
  console.log("受信:", e.data);
};

// つながったらメッセージを送る
socket.onopen = () => {
  socket.send("こんにちは");
};
32
13
WebSocket入門 - しくみ

ws と wss

HTTPにhttpとhttpsがあるように、WebSocketにも暗号化なし/ありがあります。

ws:// と wss://

WebSocketのURLの始まり方。ws:// は暗号化なし、wss:// は暗号化あり。実運用では暗号化された wss:// を使うのが基本。

・ws:// HTTPに相当（暗号化なし）

・wss:// HTTPSに相当（暗号化あり）

・本番ではwss://を使う

・中身を守りたいので暗号化が前提

33
14

WebSocket入門 - 使いどころ

4

第4部 使いどころ

向いている場面・向かない場面

40
15
WebSocket入門 - 使いどころ

WebSocketが向く場面・向かない場面

常時つなぐ分だけ、向き不向きがはっきりしています。

向いている

  • チャット・通知のリアルタイム配信
  • ゲームの状態同期
  • 共同編集ツール
  • 刻々と変わる数値の表示
  • サーバーから頻繁に送りたいとき

向かない

  • たまにしか取らない単純な取得
  • ページを開いた時だけのデータ
  • キャッシュで十分なコンテンツ
  • リクエスト1回で完結する処理
  • ここはHTTPで十分なことが多い
41
16
WebSocket入門 - まとめ
クイズ

振り返りクイズ

今日の内容を確認しましょう。

WebSocketがHTTPと大きく違う点として、最も適切なものはどれ？

A
リクエストのたびに接続し直す
B
接続を開いたまま双方向に送り合える
C
サーバーからは絶対に送れない
D
暗号化が一切できない
50
17
WebSocket入門 - まとめ
答え

振り返りクイズ 解答

WebSocketがHTTPと大きく違う点として、最も適切なものはどれ？

A
リクエストのたびに接続し直す
B
接続を開いたまま双方向に送り合える
C
サーバーからは絶対に送れない
D
暗号化が一切できない

WebSocketは一度つないだ接続を保ったまま、クライアントからもサーバーからも自由にデータを送り合えるのが最大の違いです。だからチャットや通知のようなリアルタイム用途に向いています。

51
18
WebSocket入門 - まとめ

質疑・次回予告

今日のまとめと、次に学ぶテーマです。質問があればここで受け付けます。

今日のおさらい
  • WebSocketは双方向リアルタイム通信
  • 一度つないだら開きっぱなし
  • リアルタイム用途に強い
次回予告
  • gRPC 〜サービス間を高速につなぐ〜
  • マイクロサービスの通信を学ぶ
52
19
"

WebSocketは「一度つないだら切らずに、両方から送り合える電話のような通信」。聞きに行かずに届く。リアルタイムが欲しい場面の答えが、ここにあります。

— WebSocket入門

53
20