Socket.io를 사용하여 실시간 주행 거리 측정 앱 구현하기

실시간 주행 거리 측정 앱을 구현하기 위해 Socket.io를 사용할 수 있습니다. Socket.io는 실시간 양방향 통신을 제공하는 라이브러리로, 웹소켓을 기반으로 작동합니다. 이를 통해 서버와 클라이언트 간 실시간 데이터 전송이 가능하게 됩니다.

1. 서버 측 구현

먼저, 서버 측에서 Socket.io를 초기화하고 클라이언트의 연결을 관리해야 합니다. 아래는 Express 프레임워크를 사용한 예시입니다.

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

// 클라이언트 연결 관리
io.on('connection', (socket) => {
  console.log('Client connected');

  // 클라이언트로부터 주행 거리 데이터 수신
  socket.on('distance', (distance) => {
    console.log('Distance:', distance);

    // 다른 클라이언트에게 주행 거리 데이터 전송
    socket.broadcast.emit('distance', distance);
  });

  // 클라이언트 연결 해제 처리
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

// 서버 시작
server.listen(3000, () => {
  console.log('Server started on port 3000');
});

위 코드에서 connection 이벤트는 클라이언트가 서버에 연결되었을 때 실행되며, disconnect 이벤트는 클라이언트가 연결을 해제했을 때 실행됩니다. distance 이벤트는 클라이언트로부터 주행 거리 데이터를 수신하고, 다른 클라이언트에게 전송합니다.

2. 클라이언트 측 구현

이제 클라이언트 측에서 Socket.io를 사용하여 주행 거리 데이터를 서버로 전송하고, 실시간으로 데이터를 수신할 수 있도록 구현해야 합니다. 아래는 HTML과 JavaScript를 사용한 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 주행 거리 측정 앱</title>
  <script src="https://cdn.socket.io/4.0.1/socket.io.js"></script>
  <script>
    // 서버와의 연결 설정
    const socket = io('http://localhost:3000');

    // 주행 거리 데이터 전송
    function sendDistance() {
      const distance = document.getElementById('distance').value;
      socket.emit('distance', distance);
    }

    // 주행 거리 데이터 수신
    socket.on('distance', (distance) => {
      document.getElementById('display').innerText = 'Distance: ' + distance;
    });
  </script>
</head>
<body>
  <input type="number" id="distance" placeholder="주행 거리">
  <button onclick="sendDistance()">전송</button>
  <div id="display"></div>
</body>
</html>

위 코드에서 io('http://localhost:3000')는 서버의 주소로 연결 설정을 합니다. emit을 사용하여 주행 거리 데이터를 서버로 전송하고, on을 사용하여 서버로부터 데이터를 수신합니다. 수신한 데이터는 display 요소에 표시됩니다.

마무리

위 예시 코드를 참고하여 Socket.io를 사용하여 실시간 주행 거리 측정 앱을 구현할 수 있습니다. Socket.io의 강력한 실시간 양방향 통신 기능을 활용하여 사용자들에게 실시간으로 데이터를 전송하고 표시할 수 있습니다. 자세한 내용은 Socket.io의 공식 문서를 참고하시기 바랍니다.

Socket.io를 사용하여 실시간 주행 거리 측정 앱 구현하기

1. 서버 측 구현

2. 클라이언트 측 구현

마무리

참고 자료