Colin's Blog
[javascript] Socket.io를 사용하여 브라우저 간 통신을 구현할 수 있을까요?

Socket.io를 사용하여 브라우저 간 통신 구현하기

Socket.io는 JavaScript를 사용하여 클라이언트와 서버 사이에 실시간 양방향 통신을 가능하게 하는 라이브러리입니다. 이 라이브러리를 사용하면 브라우저 간의 통신을 간단하게 구현할 수 있습니다.

Socket.io 설정

Socket.io를 사용하기 위해서는 우선 서버 측과 클라이언트 측에서 모두 해당 라이브러리를 설치해야 합니다. 먼저, Node.js 환경에서 서버를 구성하고 Socket.io를 설치합니다.

$ npm install socket.io

그리고 서버 측 코드에서 Socket.io를 초기화하고 연결을 수락하는 작업을 수행합니다. 예를 들어, Express.js를 사용하는 경우 다음과 같이 할 수 있습니다.

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

io.on('connection', (socket) => {
  console.log('a user connected');
  // 여기서부터 클라이언트와의 통신을 처리합니다.
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

이제 클라이언트 측에서 Socket.io를 사용하여 서버와 통신할 수 있는 환경을 설정합니다. HTML 파일에 다음과 같은 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
  <script>
    const socket = io('http://localhost:3000');

    socket.on('connect', () => {
      console.log('connected to server');
      // 여기서부터 서버와의 통신을 처리합니다.
    });
  </script>
</head>
<body>
</body>
</html>

위의 코드에서는 서버의 방문자 로그를 콘솔에 출력하고, 클라이언트에서 서버에 연결되었을 때 연결 메시지를 콘솔에 출력하도록 설정하였습니다.

실시간 통신

이제 Socket.io를 사용하여 실시간으로 데이터를 주고받을 수 있습니다. 서버와 클라이언트 간에 이벤트를 보내고 받는 방법은 다음과 같습니다.

서버에서 클라이언트로 이벤트 보내기

서버에서 클라이언트로 이벤트를 보내기 위해서는 emit 메서드를 사용합니다. 예를 들어, 서버에서 클라이언트에게 새로운 메시지가 도착했음을 알리는 이벤트를 보내려면 다음과 같이 작성할 수 있습니다.

socket.emit('newMessage', { content: 'Hello, World!' });

클라이언트에서 서버로 이벤트 보내기

클라이언트에서 서버로 이벤트를 보내기 위해서는 emit 메서드를 사용합니다. 서버는 이벤트를 on 메서드를 사용하여 수신하고 처리할 수 있습니다. 예를 들어, 클라이언트에서 입력한 메시지를 서버에 전송하려면 다음과 같이 작성할 수 있습니다.

const messageInput = document.getElementById('message-input');

document.getElementById('send-button').addEventListener('click', () => {
  const message = messageInput.value;
  socket.emit('sendMessage', { content: message });
  messageInput.value = '';
});

서버에서는 다음과 같이 이벤트를 수신하고 처리할 수 있습니다.

io.on('connection', (socket) => {
  socket.on('sendMessage', (message) => {
    console.log('received message:', message);
  });
});

위의 코드에서는 클라이언트에서 보낸 sendMessage 이벤트를 수신하고, 메시지를 콘솔에 출력하도록 설정하였습니다.

결론

Socket.io를 사용하면 브라우저 간에 실시간 통신을 손쉽게 구현할 수 있습니다. 이를 통해 채팅, 게임, 협업 도구 등 다양한 웹 애플리케이션을 개발할 수 있습니다. 더 자세한 사용법에 대해서는 Socket.io 공식 문서를 참조하시기 바랍니다.

© 2018 Colin. All rights reserved.