Socket.io는 실시간 웹 어플리케이션을 구현할 수 있는 JavaScript 라이브러리입니다. 이를 사용하여 실시간 타이머를 구현하는 방법은 다음과 같습니다:

1. 서버 측 구현:

   // server.js
   
   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);
   
   let timer;
   
   // 클라이언트가 연결되었을 때
   io.on('connection', (socket) => {
     console.log('새로운 클라이언트가 연결됨');
   
     // 타이머 시작 이벤트를 받았을 때
     socket.on('startTimer', () => {
       clearInterval(timer);
       timer = setInterval(() => {
         // 클라이언트에게 남은 시간을 보냄
         socket.emit('timer', new Date().getTime());
       }, 1000);
     });
   
     // 타이머 중지 이벤트를 받았을 때
     socket.on('stopTimer', () => {
       clearInterval(timer);
     });
   
     // 클라이언트가 연결이 끊겼을 때
     socket.on('disconnect', () => {
       clearInterval(timer);
       console.log('클라이언트 연결이 끊어짐');
     });
   });
   
   server.listen(3000, () => {
     console.log('서버가 시작되었습니다. 포트: 3000');
   });
   

2. 클라이언트 측 구현:

   // client.js
   
   const socket = io('http://localhost:3000');
   
   // 타이머 시작 버튼 클릭 시
   document.getElementById('startBtn').addEventListener('click', () => {
     socket.emit('startTimer');
   });
   
   // 타이머 중지 버튼 클릭 시
   document.getElementById('stopBtn').addEventListener('click', () => {
     socket.emit('stopTimer');
   });
   
   // 타이머 값 업데이트 이벤트를 받았을 때
   socket.on('timer', (time) => {
     // 타이머 값을 이용하여 UI 업데이트
     document.getElementById('timer').innerText = new Date(time).toLocaleTimeString();
   });
   

위의 코드에서는, 서버는 클라이언트와 Socket.io를 사용하여 통신하고 타이머 값을 전송합니다. 클라이언트는 서버로부터 받은 타이머 값을 이용하여 UI를 업데이트합니다.

참고 문서:

• Socket.io 공식 문서: https://socket.io/docs/
• Express.js 공식 문서: https://expressjs.com/
• Node.js 공식 문서: https://nodejs.org/