Xây Real-time Interactive Quiz App với WebSocket/SSE cho hàng nghìn học sinh

Xây Real-time Interactive Quiz App với WebSocket/SSE cho hàng nghìn học sinh | Shanverse

Codetypescript

1type QuizPhase =2  | 'lobby'3  | 'question_open'4  | 'question_locked'5  | 'answer_reveal'6  | 'leaderboard'7  | 'finished';89interface RoomState {10  roomId: string;11  quizId: string;12  phase: QuizPhase;13  questionIndex: number;14  version: number;15  openedAt?: string;16  closesAt?: string;17  stateOwnerEpoch: number;18}

Codetypescript

1interface RealtimeEnvelope<T> {2  protocolVersion: 1;3  eventId: string;4  roomId: string;5  sequence: number;6  eventType: string;7  serverTime: string;8  roomVersion: number;9  payload: T;10}

Codesql

1CREATE TABLE quiz_answers (2  room_id UUID NOT NULL,3  question_id UUID NOT NULL,4  participant_id UUID NOT NULL,5  request_id UUID NOT NULL,6  selected_option_ids JSONB NOT NULL,7  received_at TIMESTAMPTZ NOT NULL,8  room_version BIGINT NOT NULL,9  status TEXT NOT NULL,10  PRIMARY KEY (room_id, question_id, participant_id),11  UNIQUE (participant_id, request_id)12);

Codetypescript

1async function submitAnswer(input: SubmitAnswer, auth: ParticipantAuth) {2  assertRoomMembership(auth, input.roomId, input.participantId);3  const room = await roomRepository.current(input.roomId);45  if (room.phase !== 'question_open') return reject('QUESTION_CLOSED');6  if (room.questionId !== input.questionId) return reject('STALE_QUESTION');7  if (Date.now() > Date.parse(room.closesAt)) return reject('DEADLINE_PASSED');89  return answerRepository.insertOnce({10    ...input,11    receivedAt: new Date().toISOString(),12    roomVersion: room.version,13    status: 'accepted'14  });15}

Codetypescript

1import { WebSocketServer, WebSocket } from 'ws';23const wss = new WebSocketServer({ noServer: true });45wss.on('connection', (socket: WebSocket, session: Session) => {6  socket.on('message', async raw => {7    if (raw.toString().length > 8192) return socket.close(1009, 'too large');89    const message = parseAndValidate(raw);10    if (!rateLimiter.allow(session.participantId, message.eventType)) {11      return send(socket, { type: 'error', code: 'RATE_LIMITED' });12    }1314    if (message.eventType === 'answer.submit') {15      const result = await submitAnswer(message.payload, session);16      send(socket, { type: 'answer.ack', payload: result });17    }18  });1920  socket.on('pong', () => presence.markAlive(session.connectionId));21});

Codetypescript

1app.get('/rooms/:roomId/events', async (req, res) => {2  const session = await authenticate(req);3  authorizeRoom(session, req.params.roomId);45  res.setHeader('Content-Type', 'text/event-stream');6  res.setHeader('Cache-Control', 'no-cache, no-transform');7  res.setHeader('X-Accel-Buffering', 'no');8  res.flushHeaders();910  const lastId = req.get('Last-Event-ID');11  const subscription = await roomEvents.subscribe({12    roomId: req.params.roomId,13    participantId: session.participantId,14    afterEventId: lastId15  });1617  const heartbeat = setInterval(() => res.write(': ping\n\n'), 15000);18  subscription.onEvent(event => {19    res.write(`id: ${event.id}\n`);20    res.write(`event: ${event.type}\n`);21    res.write(`data: ${JSON.stringify(event.payload)}\n\n`);22  });2324  req.on('close', () => {25    clearInterval(heartbeat);26    subscription.close();27  });28});

Xây Real-time Interactive Quiz App với WebSocket/SSE cho hàng nghìn học sinh

WebSocket hay SSE?

Bình luận

Kiến trúc tổng thể

State machine phải do server làm chủ

Protocol event có version và sequence

Answer API: idempotent và server-authoritative

Scoring công bằng và deterministic

WebSocket gateway tối giản

SSE endpoint và resume

Scale ngang: room ownership và fan-out

Pattern A — Stateless gateways

Pattern B — Shard theo room

Redis Pub/Sub hay Redis Streams?

Reconnect không tạo thundering herd

Presence và participant count

Bảo mật và chống gian lận

Load test đúng kiểu quiz

Observability

Chiến lược triển khai

Giai đoạn 1 — Single region, modular service

Giai đoạn 2 — Horizontal gateways

Giai đoạn 3 — Room sharding

Giai đoạn 4 — Multi-region

Checklist production

Kết luận

Tài liệu tham khảo

HTTP Long-Polling vs SSE vs WebSocket: Bài toán Real-time nên chọn gì?

Kiến trúc hệ thống thi trắc nghiệm trực tuyến chống gian lận và chịu tải lớn

Xây dựng LMS hiện đại với Next.js, NestJS và PostgreSQL

WebSocket hay SSE?

Bình luận

Kiến trúc tổng thể

State machine phải do server làm chủ

Protocol event có version và sequence

Answer API: idempotent và server-authoritative

Scoring công bằng và deterministic

WebSocket gateway tối giản

SSE endpoint và resume

Scale ngang: room ownership và fan-out

Pattern A — Stateless gateways

Pattern B — Shard theo room

Redis Pub/Sub hay Redis Streams?

Reconnect không tạo thundering herd

Presence và participant count

Bảo mật và chống gian lận

Load test đúng kiểu quiz

Observability

Chiến lược triển khai

Giai đoạn 1 — Single region, modular service

Giai đoạn 2 — Horizontal gateways

Giai đoạn 3 — Room sharding

Giai đoạn 4 — Multi-region

Checklist production

Kết luận

Tài liệu tham khảo

Bài viết liên quan

HTTP Long-Polling vs SSE vs WebSocket: Bài toán Real-time nên chọn gì?

Kiến trúc hệ thống thi trắc nghiệm trực tuyến chống gian lận và chịu tải lớn

Xây dựng LMS hiện đại với Next.js, NestJS và PostgreSQL