SSR을 활용한 실시간 데이터 업데이트를 위한 웹 소켓 (WebSocket) 사용법

16 Oct 2023

이번 포스트에서는 SSR(Server Side Rendering)을 활용하여 웹 소켓(WebSocket)을 사용하여 실시간 데이터 업데이트를 구현하는 방법에 대해 알아보겠습니다.

웹 소켓(WebSocket)이란?

웹 소켓은 클라이언트와 서버 간에 양방향 통신을 가능하게 해주는 프로토콜입니다. 기존의 HTTP 프로토콜은 클라이언트가 서버에 요청을 보내고, 서버는 응답을 보내는 단방향 통신을 지원합니다. 하지만 웹 소켓은 이와 달리 서버와 클라이언트가 양방향으로 데이터를 주고받을 수 있어 실시간 통신에 적합합니다.

SSR과 웹 소켓의 조합

SSR은 클라이언트와 서버 간의 데이터를 동기화하는데 도움을 줍니다. 웹 소켓을 활용하면 실시간으로 데이터를 업데이트할 수 있기 때문에 SSR과 웹 소켓을 함께 사용하면 좋은 사용자 경험을 제공할 수 있습니다.

웹 소켓 사용법

서버에서 웹 소켓 생성하기

먼저, 서버에서 웹 소켓을 생성해야 합니다. 이때, Node.js의 ws 모듈을 사용할 수 있습니다. 다음은 웹 소켓을 생성하는 코드의 예시입니다.

const WebSocket = require('ws');

// 웹 소켓 서버 생성
const wss = new WebSocket.Server({ port: 8080 });

// 클라이언트 연결 이벤트 처리
wss.on('connection', function connection(ws) {
  // 클라이언트와 연결된 웹 소켓 객체
  // 메시지 전송, 연결 종료 등을 처리할 수 있습니다.

  // 메시지 수신 이벤트 처리
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  // 연결 종료 이벤트 처리
  ws.on('close', function close() {
    console.log('disconnected');
  });
});

클라이언트에서 웹 소켓 연결하기

클라이언트에서는 웹 소켓을 서버에 연결해야 합니다. 일반적으로 HTML에서 JavaScript를 사용하여 웹 소켓을 생성하고 사용합니다. 다음은 클라이언트에서 웹 소켓을 연결하는 코드의 예시입니다.

<script>
  // 웹 소켓 생성
  const socket = new WebSocket('ws://localhost:8080');

  // 연결 이벤트 처리
  socket.onopen = function() {
    console.log('connected');
  };

  // 메시지 수신 이벤트 처리
  socket.onmessage = function(event) {
    console.log('received: ' + event.data);
    // 데이터를 화면에 표시하거나 필요한 처리를 수행합니다.
  };

  // 연결 종료 이벤트 처리
  socket.onclose = function() {
    console.log('disconnected');
  };

  // 메시지 전송
  socket.send('Hello, WebSocket!');
</script>

데이터 업데이트하기

웹 소켓을 활용하여 데이터를 업데이트하려면 서버측에서 데이터 변경 시 클라이언트들에게 변경 사항을 전송해야 합니다. 예를 들어, 데이터베이스에 새로운 데이터가 추가될 때마다 클라이언트들에게 해당 데이터를 전송하는 것입니다.

// 웹 소켓 서버
wss.on('connection', function connection(ws) {
  // ...

  // 데이터베이스에 새로운 데이터가 추가될 때마다 클라이언트들에게 해당 데이터 전송
  function sendUpdatedData(data) {
    ws.send(JSON.stringify(data)); // 데이터를 JSON 형식의 문자열로 변환하여 전송
  }

  // ...
});

<script>
  // ...

  // 데이터 수신 이벤트 처리
  socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    // 전달받은 데이터를 화면에 표시하거나 필요한 처리를 수행합니다.
  };

  // ...
</script>

마무리

이렇게 SSR을 활용하여 웹 소켓을 사용하여 실시간 데이터 업데이트를 구현할 수 있습니다. 웹 소켓은 실시간 통신에 적합한 프로토콜이므로, 데이터의 실시간 업데이트가 필요한 웹 애플리케이션을 개발할 때 활용할 수 있습니다.

더 자세한 정보는 다음 링크를 참고하세요.