如何Implement WebSocket/Real-Time Communication：Claude Code 实战指南

实时通信开发でClaude Codeを活用する

チャット、通知、共同Editなど、实时通信が必要な应用は増えています。Claude Code 服务器サイドと客户端サイドの両方を理解した上で、一貫した实现を支援します。

Socket.IO通过チャット機能の实现

> Socket.IO使用...的实时チャットの服务器创建。
> ルーム機能、タイピングインジケーター、既読機能实现。

服务器サイド

import express from 'express';
import { createServer } from 'http';
import { Server, Socket } from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server, {
  cors: { origin: 'http://localhost:5173' },
});

interface ChatMessage {
  id: string;
  roomId: string;
  userId: string;
  content: string;
  timestamp: Date;
}

const rooms = new Map<string, Set<string>>();

io.on('connection', (socket: Socket) => {
  const userId = socket.handshake.auth.userId;
  console.log(`User connected: ${userId}`);

  socket.on('join-room', (roomId: string) => {
    socket.join(roomId);
    if (!rooms.has(roomId)) rooms.set(roomId, new Set());
    rooms.get(roomId)!.add(userId);

    socket.to(roomId).emit('user-joined', {
      userId,
      members: Array.from(rooms.get(roomId)!),
    });
  });

  socket.on('send-message', async (data: { roomId: string; content: string }) => {
    const message: ChatMessage = {
      id: crypto.randomUUID(),
      roomId: data.roomId,
      userId,
      content: data.content,
      timestamp: new Date(),
    };

    // Save to DB
    await saveMessage(message);

    io.to(data.roomId).emit('new-message', message);
  });

  socket.on('typing-start', (roomId: string) => {
    socket.to(roomId).emit('user-typing', { userId, isTyping: true });
  });

  socket.on('typing-stop', (roomId: string) => {
    socket.to(roomId).emit('user-typing', { userId, isTyping: false });
  });

  socket.on('mark-read', (data: { roomId: string; messageId: string }) => {
    socket.to(data.roomId).emit('message-read', {
      userId,
      messageId: data.messageId,
    });
  });

  socket.on('disconnect', () => {
    rooms.forEach((members, roomId) => {
      if (members.delete(userId)) {
        io.to(roomId).emit('user-left', { userId });
      }
    });
  });
});

server.listen(3000, () => console.log('Server running on port 3000'));

客户端サイド（React）

import { useEffect, useState, useCallback } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useChat(roomId: string, userId: string) {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());

  useEffect(() => {
    socket = io('http://localhost:3000', { auth: { userId } });
    socket.emit('join-room', roomId);

    socket.on('new-message', (message: ChatMessage) => {
      setMessages(prev => [...prev, message]);
    });

    socket.on('user-typing', ({ userId: uid, isTyping }) => {
      setTypingUsers(prev => {
        const next = new Set(prev);
        isTyping ? next.add(uid) : next.delete(uid);
        return next;
      });
    });

    return () => { socket.disconnect(); };
  }, [roomId, userId]);

  const sendMessage = useCallback((content: string) => {
    socket.emit('send-message', { roomId, content });
  }, [roomId]);

  const startTyping = useCallback(() => {
    socket.emit('typing-start', roomId);
  }, [roomId]);

  const stopTyping = useCallback(() => {
    socket.emit('typing-stop', roomId);
  }, [roomId]);

  return { messages, typingUsers, sendMessage, startTyping, stopTyping };
}

Server-Sent Events（SSE）通过通知

WebSocketほどの双向性が不要な場合、SSEが軽量な选择肢です。

// server
app.get('/api/notifications/stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    Connection: 'keep-alive',
  });

  const userId = req.query.userId as string;

  const sendEvent = (data: object) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // 新しい通知があれば发送
  const unsubscribe = notificationBus.subscribe(userId, sendEvent);

  req.on('close', () => {
    unsubscribe();
    res.end();
  });
});

// client
function useNotifications(userId: string) {
  const [notifications, setNotifications] = useState<Notification[]>([]);

  useEffect(() => {
    const eventSource = new EventSource(
      `/api/notifications/stream?userId=${userId}`
    );

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setNotifications(prev => [data, ...prev]);
    };

    return () => eventSource.close();
  }, [userId]);

  return notifications;
}

接続の安定性を高める

生产环境では、再接続ロジックやハートビートの实现が很重要。

const socket = io('http://localhost:3000', {
  auth: { userId },
  reconnection: true,
  reconnectionAttempts: 10,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 5000,
  timeout: 20000,
});

socket.on('connect_error', (err) => {
  console.error('Connection error:', err.message);
});

socket.on('reconnect', (attempt) => {
  console.log(`Reconnected after ${attempt} attempts`);
  // Reconnect後にルームに再参加
  socket.emit('join-room', currentRoomId);
});

总结

Claude Codeを活用すれば、WebSocketやSSE使用…的实时通信機能を服务器・客户端両方一貫して实现可以。プロンプトの書き方次第でコードの質が大きく変わるため、プロンプトテクニックを身につけておくことが很重要。個人开发でチャット機能を实现する際は個人开发を爆速にする方法也可以参考。

详情请参阅Anthropic官方文档やSocket.IO官方文档。