Cara Implement WebSocket/Real-Time Communication dengan Claude Code

リアルタイム通信pengembanganでClaude Codeをpemanfaatan

チャット、notifikasi、共同Edit dll.、リアルタイム通信 diperlukanなaplikasi 増えてい.Claude Code serverサイド dan clientサイド 両方 理解 上 、一貫 implementasi 支援.

implementasi Socket.IOによるチャット機能

> Socket.IO 使ったリアルタイムチャット server buatkan.
> ルーム機能、タイピングインジケーター、既読機能 implementasikan.

serverサイド

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'));

clientサイド（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）によるnotifikasi

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`);
  };

  // 新しいnotifikasi あればpengiriman
  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;
}

安定性を高める koneksi

environment produksi 、再koneksiロジックやハートビート implementasi penting.

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);
});

Summary

Dengan memanfaatkan Claude Code, WebSocketやSSE 使ったリアルタイム通信機能 server・client両方一貫 implementasi bisa dilakukan.プロンプト 書き方次第 コード 質 大きく変わる untuk 、プロンプトテクニック 身 つけてこ dan penting.個人pengembangan チャット機能 implementasi 際 個人pengembangan 爆速 metode juga bisa dijadikan referensi.

詳しく Anthropic公式dokumenやSocket.IO公式dokumen silakan lihat.