WebSockets & Realtime Systems Programming · 课时

实现服务器端逻辑

编写代码创建 WebSocket 服务器、监听连接并处理基本事件。

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

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

Server Logic Unveiled

Welcome back! In the previous lesson, we set up our Node.js project. Now, let's dive into building the actual server logic for our WebSocket application.

We'll learn how to create a WebSocket server, listen for incoming client connections, and handle basic events like receiving and sending messages.

Creating the WS Server

The first step is to create an instance of our WebSocket server. We'll use the ws library we installed earlier. It provides a WebSocket.Server class.

We need to specify a port for our server to listen on. Port 8080 is a common choice for development.

Try running this basic server setup:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

console.log('WebSocket server started on port 8080');

Listening for Connections

Our server is running, but it doesn't do much yet! The most fundamental event for a WebSocket server is 'connection'.

This event fires every time a new client successfully establishes a WebSocket connection with our server. The event handler receives a ws object, representing the individual client connection.

Let's add a handler to log when a client connects:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected!');
});

console.log('WebSocket server started on port 8080');

The Client WebSocket Object

When a client connects, the wss.on('connection') callback receives a ws object. This isn't the server itself, but an instance of WebSocket specific to that client.

It represents the communication channel with that single client.
We'll use this ws object to send messages to, and receive messages from, that particular client.

Think of it as a direct line to one person in a crowded room.

Handling Client Messages

Once a client is connected, it can send messages to our server. We need to listen for these messages using the 'message' event on the individual client's ws object.

The message handler receives the data sent by the client. For simplicity, we'll assume text messages for now.

Update your server to log any incoming messages:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
  });
});

console.log('WebSocket server started on port 8080');

Sending Data Back to Client

A key aspect of WebSockets is bidirectional communication. Not only can clients send messages to the server, but the server can also send messages back to specific clients.

We use the ws.send() method on the client's WebSocket object to send data. Let's create a simple 'echo' server that sends back whatever it receives!

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    ws.send(`Server received: ${message}`); // Echo back!
  });
});

console.log('WebSocket server started on port 8080');

Handling Client Disconnections

Clients won't stay connected forever. They might close their browser tab, lose internet, or deliberately disconnect. It's crucial to handle these disconnections gracefully.

The 'close' event on the client's ws object tells us when a client has disconnected. This is useful for cleanup or logging.

Add a 'close' event handler to your server:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', function close() {
    console.log('Client disconnected!');
  });
});

console.log('WebSocket server started on port 8080');

Dealing with Errors

Errors can occur at various stages �� network issues, malformed messages, or server problems. It's good practice to include error handling.

Client-specific errors: Use ws.on('error', ...) for issues related to a single client connection.
Server-wide errors: Use wss.on('error', ...) for problems affecting the entire WebSocket server.

Let's add basic error logging to our server:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', function close() {
    console.log('Client disconnected!');
  });

  ws.on('error', function error(err) {
    console.error('Client WS Error:', err.message);
  });
});

wss.on('error', function serverError(err) {
  console.error('Server WS Error:', err.message);
});

console.log('WebSocket server started on port 8080');

Full Basic Server Example

You've now learned how to set up a WebSocket server, handle new connections, listen for incoming messages, send responses, and manage disconnections and errors.

This complete example brings all those concepts together, forming a robust foundation for your WebSocket applications.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log(`Received from client: ${message}`);
    ws.send(`Echo: ${message}`); // Send message back to the same client
  });

  ws.on('close', function close() {
    console.log('Client disconnected!');
  });

  ws.on('error', function error(err) {
    console.error('Client connection error:', err);
  });
});

wss.on('listening', () => {
  console.log('WebSocket server is listening on port 8080');
});

wss.on('error', function serverError(err) {
  console.error('WebSocket server error:', err);
});

Server Logic Quiz

Which event handler is used on the server instance (wss) to detect when a new client connects?

Recap & Next Steps

Great work! You've successfully implemented the core server-side logic for a WebSocket application.

You learned to create a WebSocket.Server instance.
You handled 'connection', 'message', 'close', and 'error' events.
You can now send messages back to individual connected clients using ws.send().

Next, we'll explore how to send messages to ALL connected clients, a crucial feature for chat applications and other broadcast scenarios!

常见问题解答

「实现服务器端逻辑」课时是免费的吗？

是的 — 「实现服务器端逻辑」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 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 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「实现服务器端逻辑」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 WebSockets & Realtime Systems Programming