Colin's Blog
자바스크립트 웹 소켓을 활용한 실시간 채팅 앱 개발

소개

실시간 채팅 앱은 사용자들이 실시간으로 메시지를 주고받을 수 있는 웹 애플리케이션입니다. 이번 블로그 포스트에서는 자바스크립트의 웹 소켓을 활용하여 실시간 채팅 앱을 개발하는 방법을 알아보겠습니다.

웹 소켓이란?

웹 소켓은 클라이언트와 서버 간 양방향 통신을 제공하는 프로토콜입니다. HTTP와 비교하면, HTTP는 클라이언트가 서버로 요청을 보내고 서버는 응답을 보내는 단방향 통신을 수행하는 반면, 웹 소켓은 양방향으로 실시간 데이터를 주고받을 수 있습니다.

개발 환경 설정

이번 예제에서는 Node.js와 Express 프레임워크를 사용하여 웹 서버를 구축하고, Socket.IO 라이브러리를 사용하여 웹 소켓 통신을 구현할 것입니다. 따라서 먼저 Node.js와 Express를 설치해야 합니다.

$ npm install express
$ npm install socket.io

서버 구현

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

// 클라이언트가 연결되었을 때 실행되는 이벤트 핸들러
io.on('connection', (socket) => {
  console.log('클라이언트 연결됨');

  // 클라이언트로부터 메시지를 받았을 때 실행되는 이벤트 핸들러
  socket.on('message', (data) => {
    console.log('메시지 받음:', data);

    // 모든 클라이언트에게 메시지 전송
    io.emit('message', data);
  });

  // 클라이언트가 연결 해제되었을 때 실행되는 이벤트 핸들러
  socket.on('disconnect', () => {
    console.log('클라이언트 연결 해제됨');
  });
});

httpServer.listen(3000, () => {
  console.log('서버 시작됨');
});

위의 코드는 서버 측 코드입니다. Express를 사용하여 간단한 웹 서버를 생성하고 Socket.IO를 통해 웹 소켓 통신을 설정합니다. 클라이언트 연결, 메시지 수신 및 전송, 연결 해제와 같은 이벤트 핸들러를 구현합니다.

클라이언트 구현

<!DOCTYPE html>
<html>
<head>
  <title>실시간 채팅 앱</title>
</head>
<body>
  <input type="text" id="messageInput" />
  <button id="sendButton">전송</button>
  <ul id="messages"></ul>

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

    // 메시지 수신 이벤트 핸들러
    socket.on('message', (data) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.innerHTML = data;
      messages.appendChild(li);
    });

    // 메시지 전송 이벤트 핸들러
    document.getElementById('sendButton').addEventListener('click', () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      socket.emit('message', message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

위의 코드는 클라이언트 측 코드입니다. HTML 파일에서 Socket.IO 클라이언트 스크립트를 로드한 후, 웹 소켓을 통해 서버와 통신합니다. 입력 필드에 메시지를 입력하고 전송 버튼을 클릭하면 서버로 메시지가 전송되며, 서버에서 수신된 메시지는 동적으로 화면에 추가됩니다.

실행 및 테스트

터미널에서 서버를 실행하고 웹 브라우저에서 http://localhost:3000으로 접속합니다. 두 개 이상의 창을 열고 실시간으로 메시지를 주고받는지 확인합니다.

결론

자바스크립트의 웹 소켓을 활용하여 실시간 채팅 앱을 개발하는 방법을 알아보았습니다. 웹 소켓은 실시간 통신을 구현하는데 매우 유용한 프로토콜입니다. 이를 활용하여 다양한 실시간 애플리케이션을 개발할 수 있습니다.

이 글이 여러분에게 도움이 되길 바랍니다! 자세한 내용은 공식 문서를 참고하시기 바랍니다.

© 2018 Colin. All rights reserved.