0Pricing
WebSockets & Realtime Systems Programming · レッスン

WebSocketハンドシェイクの仕組み

通常のHTTP接続をWebSocketへアップグレードする、HTTPベースのハンドシェイク処理を詳しく見ていきます。

「WebSocketハンドシェイクの仕組み」はCoddyKit上の無料WebSockets & Realtime Systems Programmingレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWebSockets & Realtime Systems Programming学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebSockets & Realtime Systems Programmingコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Handshake: The Connection Upgrade

Imagine you're calling a friend, but instead of just talking, you first agree on a secret language. The WebSocket handshake is similar!

It's the crucial initial step where your browser (client) and a server agree to switch from a standard HTTP connection to a WebSocket connection.

Beyond HTTP's Limitations

Traditional HTTP is designed for short, one-off requests and responses. Think of loading a webpage – you ask, the server sends, and the connection closes.

  • One-way: Client requests, server responds.
  • Short-lived: Connection closes after each interaction.
  • Overhead: Each new request needs to set up a new connection.

WebSockets need a persistent, two-way street for real-time data.

Client Initiates the Upgrade

The handshake begins with the client (your browser) sending a regular HTTP GET request to the server. But it's not truly "regular"!

This request includes special HTTP headers that signal the client's intention to "upgrade" to the WebSocket protocol. It's like adding a special note to your call asking to switch to the secret language.

Signaling the Intent to Switch

Two key headers clearly tell the server the client wants a WebSocket connection:

  • Upgrade: websocket: This header specifies the protocol the client wants to switch to.
  • Connection: Upgrade: This header is a general HTTP header that indicates the client wishes to upgrade or switch protocols.

Together, they form the core of the upgrade request.

The Client's Secret Key

Another vital header from the client is Sec-WebSocket-Key.

  • It's a 16-byte random value, encoded in Base64.
  • It acts as a unique, unpredictable "nonce" (number used once) for each handshake.
  • The server uses this key to prove it understands the WebSocket protocol and to prevent certain types of caching or proxy issues.

Protocol Version Check

The Sec-WebSocket-Version header is straightforward but important.

It tells the server which version of the WebSocket protocol the client is using. Currently, the standard version is 13.

This ensures both client and server speak the same "dialect" of the WebSocket language, guaranteeing compatibility.

Server Responds: 101 Switching Protocols

If the server supports WebSockets and agrees to the upgrade, it sends a special HTTP response back to the client.

The most important part of this response is the HTTP status code 101: Switching Protocols. This code explicitly means the server is changing protocols as requested by the client.

Server's Confirmation Key

The server's response also includes key headers:

  • Upgrade: websocket and Connection: Upgrade: Mirroring the client, these confirm the server's agreement to upgrade.
  • Sec-WebSocket-Accept: This is a hash generated by the server using the client's Sec-WebSocket-Key plus a specific "magic string". It proves the server understood the key and is capable of WebSockets.

Handshake Key Check

You've learned about the important headers involved in the WebSocket handshake.

Which of the following headers is sent by the client to initiate the WebSocket upgrade, and contains a random, unique value?

Connection Upgraded & Ready!

Once the client receives and validates the server's 101 response with the correct Sec-WebSocket-Accept header, the HTTP handshake is complete!

The connection is now upgraded to a full-duplex WebSocket. Both client and server can send and receive data simultaneously over this persistent connection, enabling true real-time communication.

よくある質問

「WebSocketハンドシェイクの仕組み」レッスンは無料ですか?

はい。「WebSocketハンドシェイクの仕組み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、WebSockets & Realtime Systems Programmingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebSockets & Realtime Systems Programmingコースには全4レッスンが含まれています。

「WebSocketハンドシェイクの仕組み」で何を学びますか?

通常のHTTP接続をWebSocketへアップグレードする、HTTPベースのハンドシェイク処理を詳しく見ていきます。 ブラウザで直接実行するハンズオンコードでWebSockets & Realtime Systems Programmingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

WebSockets & Realtime Systems Programmingを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのWebSockets & Realtime Systems Programmingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「WebSocketハンドシェイクの仕組み」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWebSockets & Realtime Systems Programmingレッスンでコードを書いて実行できますか?

はい。すべてのWebSockets & Realtime Systems Programmingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. WebSocketハンドシェイクの仕組み
  2. WebSocketのデータフレーミングとメッセージ
  3. 接続のライフサイクルと状態
  4. サブプロトコル、拡張機能、圧縮
← WebSockets & Realtime Systems Programmingに戻る