[javascript] Socket.io의 서버 사이드와 클라이언트 사이드 구조는 어떻게 되나요?

27 Nov 2023

javascript

서버 사이드에서는 Node.js와 함께 사용되며, Socket.io 모듈을 이용하여 WebSocket 프로토콜을 구현합니다. 서버 사이드 코드에서는 클라이언트의 연결 요청을 받아들이는 역할을 합니다. 이때 io 객체를 통해 클라이언트와의 통신을 담당하며, io.on() 함수를 사용하여 클라이언트로부터의 이벤트를 수신합니다. 서버 사이드에서의 코드는 다음과 같습니다:

const io = require('socket.io')(3000);

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

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

클라이언트 사이드에서는 웹 브라우저에서 JavaScript를 사용하여 Socket.io 모듈을 로드합니다. 클라이언트는 서버에 연결하여 실시간 통신을 위한 소켓을 생성합니다. 이때 io() 함수를 사용하여 서버로의 연결을 수행하며, socket.emit() 함수를 사용하여 서버로 이벤트를 전송합니다. 클라이언트 사이드에서의 코드는 다음과 같습니다:

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  // 서버로부터의 이벤트 수신
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    // 메시지 출력 등의 동작 수행
  });

  // 서버로 이벤트 전송
  socket.emit('chat message', 'Hello, Socket.io!');
</script>

위의 예시 코드에서는 간단한 채팅 애플리케이션을 구현하였습니다. 클라이언트가 서버로 메시지를 보내면, 서버는 해당 메시지를 다시 모든 클라이언트에게 전송합니다.

Socket.io에 대한 더 자세한 정보는 공식 문서를 참고하세요.