Socket.io를 사용하여 실시간 디지털 사이니지 구현하기

디지털 사이니지는 실시간으로 컨텐츠를 업데이트하고 제어할 수 있는 디스플레이 시스템입니다. 이를 구현하려면 Socket.io를 사용하여 클라이언트와 서버간의 실시간 통신을 설정해야 합니다.

Socket.io란?

Socket.io는 웹 소켓 프로토콜을 기반으로 동작하는 실시간 웹 어플리케이션 개발을 위한 라이브러리입니다. 클라이언트와 서버 간의 양방향 통신을 가능하게 해주며, 실시간으로 데이터를 주고받을 수 있습니다.

디지털 사이니지 구현 방법

1. 서버 세팅

먼저, 디지털 사이니지 서버를 설정해야 합니다. Node.js와 Express를 사용하여 간단한 서버를 만듭니다.

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

server.listen(3000, () => {
  console.log('서버가 시작되었습니다.');
});

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('새로운 연결이 이루어졌습니다.');

  // 클라이언트로부터 메시지를 받았을 때 처리하는 로직을 구현합니다.
  socket.on('message', (data) => {
    console.log(data); // 수신한 메시지 출력
    // 클라이언트에 메시지를 다시 보냅니다.
    io.emit('message', data);
  });

  // 연결이 끊어졌을 때 처리하는 로직을 구현합니다.
  socket.on('disconnect', () => {
    console.log('연결이 끊어졌습니다.');
  });
});

2. 클라이언트 세팅

이제 클라이언트를 구현해야 합니다. HTML 파일에 Socket.io 클라이언트 라이브러리를 불러오고, 서버와 연결하고 메시지를 주고받을 수 있도록 코드를 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      // 서버로부터 메시지를 받았을 때 처리하는 로직을 구현합니다.
      socket.on('message', (data) => {
        console.log(data); // 수신한 메시지 출력
        // 화면에 메시지를 업데이트하는 로직을 추가합니다.
        document.querySelector('#message').innerHTML = data;
      });

      // 사용자가 입력한 메시지를 서버로 전송하는 함수를 작성합니다.
      function sendMessage() {
        const message = document.querySelector('#input').value;
        socket.emit('message', message);
      }
    </script>
  </head>
  <body>
    <h1>디지털 사이니지</h1>
    <div id="message">여기에 메시지가 표시됩니다.</div>
    <input id="input" type="text" />
    <button onclick="sendMessage()">보내기</button>
  </body>
</html>

위 코드를 사용하여 서버와 클라이언트 간의 실시간 통신이 구현됩니다. 클라이언트 측에서 sendMessage() 함수를 사용하여 메시지를 입력하고 보낼 수 있으며, 서버로부터 받은 메시지를 화면에 표시합니다.

결론

Socket.io를 사용하여 실시간 디지털 사이니지를 구현하는 방법을 알아보았습니다. 이를 기반으로 자신만의 디지털 사이니지 서비스를 개발해보세요! 좀 더 심화된 기능을 구현하려면 Socket.io의 다양한 메소드와 이벤트를 활용할 수 있습니다.

더 자세한 내용은 Socket.io 공식 문서에서 확인할 수 있습니다.