0Pricing
Edge Computing with Cloudflare Workers & Deno · レッスン

WebSocketsとリアルタイム通信

Cloudflare WorkersとWebSocketsを使って、インタラクティブなリアルタイムアプリケーションを実装します

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

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

Real-time Apps with WebSockets

What are WebSockets? They enable real-time, two-way communication between a client (like your browser) and a server. Unlike traditional HTTP requests, WebSockets keep a persistent connection open.

This is perfect for applications needing instant updates, like chat apps, live dashboards, or online games.

HTTP vs. WebSocket Connection

Traditional HTTP is stateless and request-response based. Each action needs a new request from the client.

WebSockets, however, establish a single, long-lived connection. Once open, both client and server can send messages anytime without waiting for a request.

  • HTTP: Client requests, server responds, connection closes.
  • WebSocket: Client requests upgrade, server approves, connection stays open.

The WebSocket Upgrade

Before a WebSocket connection is established, an initial HTTP request is made. The client sends an "Upgrade" header, indicating its desire to switch protocols.

If the server supports WebSockets, it responds with an "101 Switching Protocols" status code, upgrading the connection from HTTP to WebSocket protocol. This is known as the WebSocket Handshake.

Cloudflare Workers & WebSockets

Cloudflare Workers are ideal for handling WebSockets at the edge. They can act as the server endpoint, managing connections and processing real-time messages directly where your users are.

Workers provide a WebSocketPair API to easily upgrade an incoming HTTP request into a WebSocket connection, simplifying the handshake process.

Worker WebSocket Upgrade

Let's create a Worker that accepts an incoming WebSocket connection. We'll use new WebSocketPair() to manage the connection.

Try running this example. To test, you'd typically connect using a WebSocket client (e.g., a browser's developer console or a dedicated tool).

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get('Upgrade');
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
      return new Response('Expected Upgrade: websocket', { status: 426 });
    }

    const { 0: client, 1: server } = new WebSocketPair();

    server.accept(); // Accept the WebSocket connection

    server.addEventListener('message', event => {
      console.log('Received message:', event.data);
      // We'll add logic to send messages back soon!
    });
    server.addEventListener('close', event => {
      console.log('WebSocket closed:', event.code, event.reason);
    });
    server.addEventListener('error', event => {
      console.error('WebSocket error:', event.message);
    });

    return new Response(null, {
      status: 101,
      webSocket: client,
    });
  },
};

WebSocket Event Listeners

Once a WebSocket connection is established, you can listen for various events on the server-side WebSocket object:

  • 'open': Connection successfully established.
  • 'message': A message is received from the client. The message data is in event.data.
  • 'close': The connection is closed by either side.
  • 'error': An error occurred on the connection.

These allow your Worker to react dynamically to client interactions.

Echoing Messages

In the previous code, we added an event listener for 'message'. Let's extend it to ensure the Worker echoes back any message it receives.

The server.send(message) method allows the Worker to send data back to the connected client. This creates a simple "echo" server.

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get('Upgrade');
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
      return new Response('Expected Upgrade: websocket', { status: 426 });
    }

    const { 0: client, 1: server } = new WebSocketPair();

    server.accept();
    server.addEventListener('message', event => {
      const message = event.data;
      console.log('Received message:', message);
      // Echo the message back to the client
      server.send(`Echo from Worker: ${message}`);
    });
    server.addEventListener('close', event => {
      console.log('WebSocket closed');
    });
    server.addEventListener('error', event => {
      console.error('WebSocket error:', event);
    });

    return new Response(null, {
      status: 101,
      webSocket: client,
    });
  },
};

Real-time Broadcasting

An echo server is a good start, but many real-time apps need to send messages to multiple connected clients (broadcasting).

For example, in a chat application, when one user sends a message, all other users in the chat room should receive it.

Cloudflare Workers, being stateless by default, need a mechanism to manage these connections across requests. This is where Durable Objects become incredibly useful for maintaining state and managing multiple WebSocket connections for a shared resource.

(We'll explore Durable Objects in a later lesson!)

Securing WebSockets

Just like HTTP, WebSocket connections should be secured. Always use wss:// (WebSocket Secure) instead of ws://.

wss:// connections are encrypted using TLS/SSL, preventing eavesdropping and tampering. Cloudflare Workers handle TLS termination automatically, so your connections are secured by default when deployed.

  • Use wss:// for production.
  • Implement authentication/authorization.
  • Validate all incoming messages.

Check Your Understanding

Consider a Cloudflare Worker that aims to establish a WebSocket connection with a client.

Recap: WebSockets at the Edge

Great job! You've learned how to implement real-time communication with WebSockets using Cloudflare Workers.

  • WebSockets enable persistent, two-way communication.
  • Workers use WebSocketPair and 101 Switching Protocols for the handshake.
  • Event listeners ('message', 'close', 'error') manage connection lifecycle.
  • Always use wss:// for secure connections.

In future lessons, we'll dive into Durable Objects to manage state across multiple WebSocket connections for advanced real-time applications.

よくある質問

「WebSocketsとリアルタイム通信」レッスンは無料ですか？

はい。「WebSocketsとリアルタイム通信」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Edge Computing with Cloudflare Workers & Denoコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Edge Computing with Cloudflare Workers & Denoコースには全4レッスンが含まれています。

「WebSocketsとリアルタイム通信」で何を学びますか？

Cloudflare WorkersとWebSocketsを使って、インタラクティブなリアルタイムアプリケーションを実装します ブラウザで直接実行するハンズオンコードでEdge Computing with Cloudflare Workers & Denoを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Edge Computing with Cloudflare Workers & Denoを始めるのに経験は必要ですか？

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

「WebSocketsとリアルタイム通信」レッスンにはどのくらい時間がかかりますか？

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

このEdge Computing with Cloudflare Workers & Denoレッスンでコードを書いて実行できますか？

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

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

  1. WebSocketsとリアルタイム通信
  2. Queuesと非同期タスク
  3. Service Bindingsと連携
  4. Cron Triggersとスケジュール実行するWorkers
← Edge Computing with Cloudflare Workers & Denoに戻る