WebSockets & Realtime Systems Programming · 课时

WebSockets 与 RESTful API

设计混合架构，让 WebSockets 为传统 REST API 提供动态更新能力。

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

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

Why Hybrid Architectures?

Welcome! In this lesson, we'll explore how to combine two powerful web communication tools: RESTful APIs and WebSockets.

While both facilitate communication, they excel in different areas. A hybrid approach leverages their individual strengths to build robust, dynamic applications.

REST for initial data loading and traditional resource management.
WebSockets for instant, real-time data updates.

RESTful APIs: The Foundation

RESTful APIs are a cornerstone of modern web development. They follow a request-response model, typically over HTTP.

Think of them as ordering from a menu: you make a specific request (e.g., "Get me all products"), and the server responds with the data. They are great for:

Fetching static or infrequently changing data.
Performing one-time actions (creating, updating, deleting resources).
Initial page loads with existing information.

WebSockets: Real-time Dynamics

WebSockets, as you've learned, provide a persistent, full-duplex connection. This means data can flow simultaneously in both directions, without constant new requests.

They are like a live chat: once connected, messages can be sent back and forth instantly. This makes them perfect for:

Live data feeds (stock prices, sports scores).
Real-time notifications (new messages, activity alerts).
Collaborative applications (document editing).

Complementary, Not Competing

It's important to see REST and WebSockets as complementary tools, not competitors. They solve different problems efficiently.

Combining them allows you to handle both traditional data operations and real-time interactions within the same application, leading to a richer user experience.

A well-designed hybrid system uses each protocol where it makes the most sense.

The Hybrid Workflow

A common hybrid workflow looks like this:

Client loads: Makes initial requests via REST to fetch existing data (e.g., a list of items).
Client connects: Establishes a WebSocket connection for real-time updates related to that data.
Server updates: Pushes new data or changes via WebSocket as they occur.
Client interacts: Might use REST for specific resource actions (e.g., 'mark item as complete') and receive confirmation/updates via WebSocket.

Server: REST Endpoint for Data

First, let's set up a simple Node.js server with an Express REST endpoint. This endpoint will serve our initial list of 'items'.

This demonstrates how a client would initially fetch existing data. (Remember to npm install express)

const express = require('express');
const app = express();
const PORT = 3000;

let items = [
  { id: 1, name: 'Item A', status: 'pending' },
  { id: 2, name: 'Item B', status: 'completed' }
];

// REST endpoint to get all items
app.get('/api/items', (req, res) => {
  res.json(items);
});

app.listen(PORT, () => {
  console.log(`REST server listening on port ${PORT}`);
});

Server: Adding WebSocket Updates

Now, let's extend our server to include a WebSocket. This WebSocket will push real-time updates whenever an item's status changes.

We use the ws library and integrate it with our existing Express server. (Remember to npm install ws)

const express = require('express');
const WebSocket = require('ws');
const http = require('http');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
const PORT = 3000;

let items = [
  { id: 1, name: 'Item A', status: 'pending' },
  { id: 2, name: 'Item B', status: 'completed' }
];

// REST endpoint to get all items
app.get('/api/items', (req, res) => {
  res.json(items);
});

// WebSocket connection handling
wss.on('connection', ws => {
  console.log('Client connected via WebSocket');

  // Simulate an item update every 5 seconds
  const interval = setInterval(() => {
    const itemToUpdate = items[Math.floor(Math.random() * items.length)];
    itemToUpdate.status = itemToUpdate.status === 'pending' ? 'completed' : 'pending';
    const updateMessage = JSON.stringify({ type: 'itemUpdate', item: itemToUpdate });
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(updateMessage);
      }
    });
  }, 5000);

  ws.on('close', () => {
    console.log('Client disconnected');
    clearInterval(interval);
  });
});

server.listen(PORT, () => {
  console.log(`Hybrid server listening on port ${PORT}`);
});

Client: Fetching Initial Data (JS)

On the client-side (e.g., in a web browser), you'd first use fetch or XMLHttpRequest to get the initial list of items from the REST API.

This ensures the user sees existing data immediately.

async function getInitialItems() {
  try {
    const response = await fetch('http://localhost:3000/api/items');
    const data = await response.json();
    console.log('Initial items (REST):', data);
    // Render initial items on the UI
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}

getInitialItems();

Client: Subscribing to Live Updates (JS)

After fetching initial data, the client opens a WebSocket connection to receive real-time updates. When a message arrives, it can update the UI dynamically.

This keeps the displayed data fresh without constant page refreshes.

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

ws.onopen = () => {
  console.log('WebSocket connected!');
};

ws.onmessage = event => {
  const message = JSON.parse(event.data);
  if (message.type === 'itemUpdate') {
    console.log('Real-time item update:', message.item);
    // Update the specific item on the UI
  }
};

ws.onclose = () => {
  console.log('WebSocket disconnected.');
};

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

Hybrid Use Cases

Which communication method is best for each scenario in a hybrid application?

Recap: Best of Both Worlds

You've learned how to design hybrid architectures that combine RESTful APIs and WebSockets.

REST excels for initial data loading and traditional CRUD operations due to its stateless, request-response nature.
WebSockets are perfect for instant, bidirectional communication, providing dynamic updates and real-time interactions.

By strategically using both, you can build performant and highly interactive applications. Next, we'll look at bridging WebSockets to message queues.

常见问题解答

「WebSockets 与 RESTful API」课时是免费的吗？

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

「WebSockets 与 RESTful API」这节课中我会学到什么？

设计混合架构，让 WebSockets 为传统 REST API 提供动态更新能力。你通过在浏览器中直接运行的动手代码来练习 WebSockets & Realtime Systems Programming，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

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

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

「WebSockets 与 RESTful API」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 WebSockets & Realtime Systems Programming