[javascript] Socket.io를 사용하여 실시간 퀴즈 게임을 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

Socket.io는 JavaScript로 작성된 실시간 웹 소켓 라이브러리로, 클라이언트와 서버 사이에서 양방향 통신을 가능하게 합니다. 이를 활용하여 실시간 퀴즈 게임을 구현할 수 있습니다. 아래는 Socket.io를 사용하여 실시간 퀴즈 게임을 구현하는 간단한 예시 코드입니다.

서버 측 코드

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

// 퀴즈 문제와 정답 리스트
const questions = [
  {
    question: '가장 많이 사용하는 프로그래밍 언어는 무엇인가요?',
    answer: 'JavaScript',
  },
  {
    question: '웹에서 페이지 구조를 정의하기 위해 사용하는 언어는 무엇인가요?',
    answer: 'HTML',
  },
  // 추가적인 퀴즈 문제들...
];

let currentQuestionIndex = 0;

io.on('connection', (socket) => {
  console.log('새로운 클라이언트가 접속했습니다!');

  // 클라이언트가 접속하면 현재 퀴즈 문제를 보내줌
  socket.emit('question', questions[currentQuestionIndex].question);

  // 클라이언트로부터 정답을 받았을 때 처리
  socket.on('answer', (userAnswer) => {
    const correctAnswer = questions[currentQuestionIndex].answer;

    if (userAnswer === correctAnswer) {
      socket.emit('result', '정답입니다!');
    } else {
      socket.emit('result', '오답입니다!');
    }

    // 다음 퀴즈 문제로 이동
    currentQuestionIndex++;
    if (currentQuestionIndex >= questions.length) {
      currentQuestionIndex = 0; // 퀴즈 문제가 마지막일 경우 다시 처음부터 시작
    }

    // 다음 퀴즈 문제를 클라이언트로 보내줌
    socket.emit('question', questions[currentQuestionIndex].question);
  });
});

server.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다...');
});

클라이언트 측 코드

<!DOCTYPE html>
<html>
<head>
  <title>실시간 퀴즈 게임</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
  <h1>실시간 퀴즈 게임</h1>
  <div id="questionContainer">
    <!-- 퀴즈 문제가 보여질 곳 -->
  </div>
  <input type="text" id="answerInput" />
  <button onclick="submitAnswer()">정답 제출</button>
  <div id="resultContainer">
    <!-- 정답 여부가 보여질 곳 -->
  </div>

  <script>
    const socket = io('http://localhost:3000');

    // 서버로부터 퀴즈 문제를 받았을 때 처리
    socket.on('question', (question) => {
      const questionContainer = document.getElementById('questionContainer');
      questionContainer.innerText = question;
    });

    // 서버로부터 정답 여부를 받았을 때 처리
    socket.on('result', (result) => {
      const resultContainer = document.getElementById('resultContainer');
      resultContainer.innerText = result;
    });

    // 정답 제출 버튼 클릭 시 처리
    function submitAnswer() {
      const answerInput = document.getElementById('answerInput');
      const userAnswer = answerInput.value;

      socket.emit('answer', userAnswer);

      answerInput.value = ''; // 정답 입력 필드 초기화
    }
  </script>
</body>
</html>

이 코드는 간단한 퀴즈 게임을 구현한 예시입니다. 서버에서는 퀴즈와 정답 리스트를 관리하고, 클라이언트에서는 퀴즈 문제를 보여주고 정답을 입력받아 서버로 전송하는 역할을 합니다. 서버는 정답을 확인하여 클라이언트에게 결과를 전송하고, 다음 퀴즈로 넘어갑니다.

위 코드를 실행하면 클라이언트가 localhost:3000으로 접속하고 퀴즈 게임이 시작됩니다. 이후에 다른 클라이언트도 접속하여 같은 퀴즈 게임에 참여할 수 있습니다.

Socket.io를 이용하면 실시간으로 데이터를 주고받을 수 있기 때문에, 다양한 실시간 기능을 구현할 수 있습니다. 위 예시 코드를 기반으로 여러분의 퀴즈 게임을 발전시켜보세요!