WebSocketプロトコルの基礎
ハンドシェイク、フレーム、接続ライフサイクルなど、WebSocketプロトコルの基盤となる仕組みを詳しく学習します。
「WebSocketプロトコルの基礎」はCoddyKit上の無料WebSockets & Real-Time Systems with Springレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWebSockets & Real-Time Systems with Spring学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 WebSockets & Real-Time Systems with Springコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Beyond HTTP: The WebSocket Protocol
WebSockets feel like HTTP but are a distinct protocol. They open a persistent, full-duplex link so data flows both ways at once after setup.
Starting with a Handshake
Every WebSocket starts with a handshake: the client sends a normal HTTP request asking the server to upgrade the connection to WebSocket.
Client's Upgrade Request
The client's upgrade request is an HTTP GET with key headers: Upgrade: websocket, Connection: Upgrade, plus Sec-WebSocket-Key and Version.
Server's Acknowledgment
If the server accepts, it replies with 101 Switching Protocols and a Sec-WebSocket-Accept header derived from the client's key, confirming the upgrade.
Witnessing the Handshake
Watch the handshake yourself: run this in your console, open the Network tab, and look for the 101 Switching Protocols response.
/*
Open your browser's developer console (F12),
go to the 'Network' tab, then paste and run this code.
Look for a '101 Switching Protocols' response!
*/
let ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = (event) => {
console.log("WebSocket connection opened!");
};
ws.onclose = (event) => {
console.log("WebSocket connection closed!");
};
ws.onerror = (error) => {
console.error("WebSocket error:", error);
};
// We'll send messages in later lessons!Connection Established: Full-Duplex
After the handshake, the connection upgrades to a raw TCP link that is full-duplex: client and server send and receive independently, anytime.
How Messages are Sent: Frames
WebSocket data travels in small units called frames. Framing lets large messages fragment efficiently and supports different control message types.
Different Types of Frames
WebSocket frame types each have a job: text for strings like JSON, binary for raw data, ping/pong for heartbeats, and close to end the connection.
The Connection Journey: Lifecycle
A WebSocket follows a clear lifecycle: opening (handshake), open (exchanging frames), closing (graceful shutdown), and closed.
Quick Check: WebSocket Fundamentals
Which of the following are true about a WebSocket connection after a successful handshake?
Recap: WebSocket Protocol Essentials
You demystified the WebSocket protocol: an HTTP handshake upgrades to a persistent full-duplex channel, data moves in frames, and connections follow a lifecycle. Next: comparisons.
よくある質問
「WebSocketプロトコルの基礎」レッスンは無料ですか？
はい。「WebSocketプロトコルの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、WebSockets & Real-Time Systems with Springコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 WebSockets & Real-Time Systems with Springコースには全4レッスンが含まれています。
「WebSocketプロトコルの基礎」で何を学びますか？
ハンドシェイク、フレーム、接続ライフサイクルなど、WebSocketプロトコルの基盤となる仕組みを詳しく学習します。 ブラウザで直接実行するハンズオンコードでWebSockets & Real-Time Systems with Springを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
WebSockets & Real-Time Systems with Springを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWebSockets & Real-Time Systems with Springは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「WebSocketプロトコルの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWebSockets & Real-Time Systems with Springレッスンでコードを書いて実行できますか？
はい。すべてのWebSockets & Real-Time Systems with Springレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- リアルタイム通信を理解する
- WebSocketsとHTTPポーリングの比較
- WebSocketプロトコルの基礎
- Server-Sent EventsとWebSockets