Colin's Blog
자바스크립트 fetch API를 사용한 웹 소켓 채팅방 구현

웹 소켓은 실시간 양방향 통신을 제공하는 프로토콜입니다. 이를 활용하여 웹 소켓 채팅방을 구현할 수 있습니다. 이번 글에서는 자바스크립트 fetch API를 사용하여 간단한 웹 소켓 채팅방을 구현하는 방법을 알아보겠습니다.

기술 스택

해당 구현에는 다음과 같은 기술 스택을 사용합니다:

구현 단계

  1. 웹 소켓 서버 설정
  2. 클라이언트 측 구현
  3. 서버 측 구현

1. 웹 소켓 서버 설정

먼저, 웹 소켓 서버를 설정해야 합니다. Node.js와 Express.js를 사용하여 WebSocket 서버를 만들 수 있습니다.

// server.js

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

const PORT = process.env.PORT || 3000;

// 웹 소켓 연결을 처리하는 부분
io.on('connection', socket => {
  console.log('소켓 연결됨:', socket.id);

  // 메세지 전송 이벤트를 처리하는 부분
  socket.on('message', message => {
    console.log('메시지:', message);
    socket.broadcast.emit('message', message);
  });
});

server.listen(PORT, () => {
  console.log(`서버가 ${PORT} 포트에서 실행 중입니다.`);
});

2. 클라이언트 측 구현

클라이언트 측에서는 fetch API를 사용하여 웹 소켓 서버에 연결하고, 메시지를 송수신하는 기능을 구현합니다.

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket 채팅방</title>
  <style>
    /* 스타일링 */
    ...
  </style>
</head>
<body>
  <div id="messages"></div>
  <form id="chat-form">
    <input type="text" id="message-input" placeholder="메시지 입력" />
    <button type="submit">전송</button>
  </form>

  <script>
    const socket = io(); // 웹 소켓 서버에 연결

    // 메시지를 화면에 출력하는 함수
    function addMessage(message) {
      const messagesDiv = document.getElementById('messages');
      const messageP = document.createElement('p');
      messageP.textContent = message;
      messagesDiv.appendChild(messageP);
    }

    // 폼 제출 이벤트 리스너
    document.getElementById('chat-form').addEventListener('submit', e => {
      e.preventDefault();
      const messageInput = document.getElementById('message-input');
      const message = messageInput.value;

      // 메시지를 전송하는 fetch 요청
      fetch('/message', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message })
      });

      messageInput.value = ''; // 입력 필드 초기화
    });

    // 웹 소켓에서 메시지를 수신하는 이벤트 리스너
    socket.on('message', message => {
      addMessage(message);
    });
  </script>
</body>
</html>

3. 서버 측 구현

서버 측에서는 클라이언트로부터 전송된 메시지를 받아서 다른 모든 연결된 클라이언트에게 전달하는 역할을 수행합니다.

// server.js (이어서)

const bodyParser = require('body-parser');

app.use(bodyParser.json());

// 클라이언트에서 전송된 메시지를 처리하는 부분
app.post('/message', (req, res) => {
  const { message } = req.body;
  io.emit('message', message); // 모든 클라이언트에게 메시지 전송
  res.status(200).end();
});

실행 및 테스트

  1. npm install 명령어로 필요한 패키지들을 설치합니다.
  2. node server.js 명령어로 서버를 실행합니다.
  3. 웹 브라우저에서 http://localhost:3000 주소로 접속하여 채팅룸을 사용합니다.

이제 자바스크립트 fetch API를 사용한 간단한 웹 소켓 채팅방을 구현하였습니다. 웹 소켓을 활용하면 클라이언트와 서버 간에 실시간 통신을 할 수 있어 다양한 애플리케이션을 개발할 수 있습니다.

© 2018 Colin. All rights reserved.