[javascript] Socket.io를 사용하여 실시간 주식 시세를 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

주식 시세를 실시간으로 제공하기 위해 Socket.io를 사용하는 방법에 대해 알아보겠습니다. Socket.io는 웹 소켓을 기반으로 한 실시간 통신 라이브러리로, 클라이언트와 서버간에 양방향 통신을 가능하게 합니다.

먼저, Node.js와 Express를 사용하여 서버를 설정해야 합니다. 다음은 기본적인 서버 설정 예시입니다.

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

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

  // 클라이언트에게 주식 시세를 전송
  setInterval(() => {
    const stockPrice = Math.random() * 1000;
    socket.emit('stock_price', stockPrice);
  }, 1000);

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

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

위 코드에서는 클라이언트가 서버에 접속할 때마다 새로운 클라이언트 연결(connection) 이벤트가 발생합니다. 이때, setInterval 함수를 사용하여 주식 가격을 일정 간격으로 생성하고, socket.emit을 통해 클라이언트로 주식 가격을 전송합니다.

이제 클라이언트 측에서는 Socket.io를 사용하여 서버로부터 주식 시세를 받아오는 코드를 작성해야 합니다. 다음은 기본적인 클라이언트 설정 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Stock Price</title>
  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
</head>
<body>
  <h1>Real-time Stock Price</h1>
  <div id="stock-price"></div>

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

    socket.on('stock_price', (stockPrice) => {
      document.getElementById('stock-price').innerText = `Current Stock Price: $${stockPrice}`;
    });
  </script>
</body>
</html>

위 코드에서는 Socket.io 클라이언트 라이브러리를 HTML 파일에 추가했습니다. 클라이언트 측에서 io 함수를 호출하여 서버에 연결하고, socket.on을 사용하여 서버로부터 받은 주식 가격을 업데이트합니다.

이제 서버를 실행하고 클라이언트를 열어보면 실시간으로 주식 시세가 업데이트되는 것을 확인할 수 있습니다. Socket.io를 사용하면 실시간 데이터를 쉽게 전송할 수 있으므로, 주식 시세를 비롯한 다양한 실시간 데이터를 구현할 수 있습니다.

이 글은 다음 자료를 참고하여 작성되었습니다: