[javascript] Socket.io를 사용하여 실시간 그래프를 어떻게 그릴 수 있나요?

27 Nov 2023

javascript

Socket.io는 웹 소켓을 지원하는 라이브러리로, 실시간으로 데이터를 전송하고 받기 위해 사용됩니다. 이를 활용하여 실시간 그래프를 그릴 수 있습니다.

필요한 라이브러리 설치하기

먼저, Socket.io를 설치해야 합니다. npm을 사용하여 다음 명령을 실행해주세요.

npm install socket.io

서버 측 코드 작성하기

서버 측에서 Socket.io를 초기화하고 클라이언트와의 연결을 관리해야합니다. 다음은 간단한 예제입니다.

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('New client connected');
});

http.listen(3000, () => {
  console.log('Server is running on port 3000');
});

클라이언트 측 코드 작성하기

클라이언트 측에서는 Socket.io를 사용하여 서버와 통신하고, 실시간 데이터를 받아와서 그래프를 그릴 수 있습니다. 예를 들어, Chart.js를 사용하여 그래프를 그리는 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Graph</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script>
    const socket = io();

    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          label: 'Real-time Data',
          data: [],
          backgroundColor: 'rgba(0, 0, 255, 0.5)',
          borderColor: 'rgba(0, 0, 255, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            display: true
          },
          y: {
            display: true
          }
        }
      }
    });

    socket.on('data', (data) => {
      chart.data.labels.push(data.timestamp);
      chart.data.datasets[0].data.push(data.value);
      chart.update();
    });
  </script>
</body>
</html>

위 예제에서는 클라이언트 측에서 Socket.io를 사용하여 서버와 연결하고, 데이터를 받아 그래프를 업데이트합니다. 서버에서 ‘data’ 이벤트를 발생시키면 클라이언트에서 해당 데이터를 받아 그래프를 그립니다.

이제 서버와 클라이언트 사이의 데이터 전송이 실시간으로 이루어지며, 받은 데이터를 그래프로 시각화할 수 있습니다. 필요에 따라 데이터를 가공하거나 그래프의 옵션을 수정하여 원하는 형태로 그래프를 구성할 수 있습니다.

추가적인 자세한 정보는 다음 링크들을 참고하시기 바랍니다:

Socket.io: https://socket.io/
Chart.js: https://www.chartjs.org/