WebSockets & Realtime Systems Programming · 课时

连接生命周期与状态

探索 WebSocket 连接从打开到关闭的各种状态，以及如何管理这些状态。

连接生命周期与状态 是 CoddyKit 上的免费 WebSockets & Realtime Systems Programming 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 WebSockets & Realtime Systems Programming 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Understanding Connection States

When you work with WebSockets, it's crucial to know the current state of your connection. This helps you manage data flow and handle disconnections gracefully.

Just like a phone call goes through phases (dialing, connected, hanging up), a WebSocket connection has a defined lifecycle with specific states.

The CONNECTING State (0)

The very first state of a WebSocket is CONNECTING. This happens immediately after you create a new WebSocket object.

Its numeric value is 0.
In this state, the client is trying to establish a connection with the server.
This includes the initial HTTP handshake process that upgrades the connection to WebSocket.
You cannot send messages yet.

Connecting with Node.js

When a WebSocket client attempts to connect, it enters the CONNECTING state (readyState = 0). This is where the initial handshake occurs.

To run this Node.js example:

Make sure you have Node.js installed.
Open your terminal and run npm init -y
Install the ws library: npm install ws
Save the code below as index.js.
Run node index.js.

Note: You'll need a WebSocket server running on ws://localhost:8080 for a successful connection.

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:8080');

console.log(`Initial state: ${ws.readyState}`); // Expected: 0 (CONNECTING)

ws.onopen = () => {
  console.log(`Connection opened! State: ${ws.readyState}`); // Expected: 1 (OPEN)
  ws.send('Hello from CoddyKit client!');
  setTimeout(() => ws.close(1000, 'Demo complete'), 2000);
};

ws.onmessage = (event) => {
  console.log(`Received: ${event.data}`);
};

ws.onclose = (event) => {
  console.log(`Connection closed. Code: ${event.code}, Reason: ${event.reason}`);
  console.log(`Final state: ${ws.readyState}`); // Expected: 3 (CLOSED)
};

ws.onerror = (error) => {
  console.error('WebSocket Error:', error.message);
};

The OPEN State (1)

Once the handshake is complete and the connection is successfully established, the WebSocket enters the OPEN state.

Its numeric value is 1.
In this state, the connection is ready for bidirectional communication.
You can send data to the server, and the server can send data to you.
This is the active communication phase.

Handling the OPEN Event

The onopen event is fired once the WebSocket connection transitions from CONNECTING to OPEN. This is your cue that you can start sending messages.

Run this Node.js example to see the onopen event in action:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('WebSocket connection is now OPEN!');
  console.log(`Current state: ${ws.readyState}`); // Expected: 1 (OPEN)
  ws.send('Ready to chat!');
  setTimeout(() => ws.close(), 1500); // Close after a short delay
};

ws.onmessage = (event) => {
  console.log('Received:', event.data);
};

ws.onclose = () => {
  console.log('Connection closed.');
};

ws.onerror = (error) => {
  console.error('Error:', error.message);
};

The CLOSING State (2)

When either the client or the server decides to terminate the connection, it enters the CLOSING state.

Its numeric value is 2.
This state occurs after ws.close() is called, but before the connection is fully shut down.
During this phase, a closing handshake is performed to ensure a clean termination.
No new messages should be sent, though some buffered messages might still be processed.

Gracefully Closing a Connection

You can explicitly close a WebSocket connection using the ws.close() method. This will transition the connection through the CLOSING state (readyState = 2) before finally becoming CLOSED (readyState = 3).

Observe the state changes when closing:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log(`Connection OPEN. State: ${ws.readyState}`); // 1
  console.log('Initiating connection close...');
  ws.close(1000, 'Client requested shutdown'); // Code 1000: normal closure
  console.log(`State after calling close(): ${ws.readyState}`); // Expected: 2 (CLOSING)
};

ws.onclose = (event) => {
  console.log(`Connection CLOSED. State: ${ws.readyState}`); // 3
  console.log(`Close Code: ${event.code}, Reason: ${event.reason}`);
};

ws.onerror = (error) => {
  console.error('Error during connection:', error.message);
};

The CLOSED State (3)

The final state for a WebSocket connection is CLOSED.

Its numeric value is 3.
The connection has been completely terminated.
No further communication can occur on this particular WebSocket object.
If you need to reconnect, you must create a new WebSocket instance.

Checking Connection Status

You can always check the current state of a WebSocket connection using its readyState property. This property returns one of the numeric values (0, 1, 2, 3) or their corresponding named constants:

WebSocket.CONNECTING (0)
WebSocket.OPEN (1)
WebSocket.CLOSING (2)
WebSocket.CLOSED (3)

Using these constants makes your code more readable!

Quick Check: Connection States

The readyState property indicates the current status of a WebSocket connection.

Recap: WebSocket Lifecycle

Great job! You've learned about the four essential states of a WebSocket connection:

CONNECTING (0): Handshake in progress.
OPEN (1): Connection established, ready for data.
CLOSING (2): Close handshake initiated.
CLOSED (3): Connection terminated.

Understanding these states is fundamental for building robust and reliable realtime applications.

常见问题解答

「连接生命周期与状态」课时是免费的吗？

是的 — 「连接生命周期与状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebSockets & Realtime Systems Programming 课程的其余内容，请升级到 CoddyKit PRO。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。

「连接生命周期与状态」这节课中我会学到什么？

探索 WebSocket 连接从打开到关闭的各种状态，以及如何管理这些状态。你通过在浏览器中直接运行的动手代码来练习 WebSockets & Realtime Systems Programming，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 WebSockets & Realtime Systems Programming 需要有经验吗？

无需任何先前经验。CoddyKit 上的 WebSockets & Realtime Systems Programming 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「连接生命周期与状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 WebSockets & Realtime Systems Programming 课中编写并运行代码吗？

能。每节 WebSockets & Realtime Systems Programming 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 WebSockets & Realtime Systems Programming