Colin's Blog
자바스크립트 fetch API를 사용한 실시간 채팅 기능 구현

웹페이지에서 실시간으로 채팅을 구현하려면 서버와 클라이언트 사이의 실시간 데이터 전송이 필요합니다. 이를 위해 자바스크립트 fetch API를 사용하여 채팅 기능을 구현할 수 있습니다. fetch API는 비동기적으로 HTTP 요청을 보내고 응답을 받을 수 있는 강력한 도구입니다.

1. 서버 설정

먼저, 서버에 실시간 채팅을 처리할 수 있는 기능을 추가해야 합니다. 이 예제에서는 Node.js와 Express를 사용하여 구현하겠습니다. 다음은 서버의 코드입니다.

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

// 클라이언트가 새로운 메시지를 보낼 때마다 처리
io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // 모든 클라이언트에게 메시지를 전송
  });
});

// 서버 시작
http.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

코드에서 socket.io 라이브러리를 사용하여 실시간 데이터 통신을 처리합니다. 클라이언트가 새로운 메시지를 보내면 chat message 이벤트를 받고 모든 클라이언트에게 메시지를 전송합니다.

2. 클라이언트 설정

이제 클라이언트에서 위에서 설정한 서버와 통신하여 실시간 채팅 기능을 구현해보겠습니다. 다음은 클라이언트의 코드입니다.

// client.js
const socket = io();

// 메시지 전송
function sendMessage() {
  const input = document.getElementById('message-input');
  const message = input.value;
  
  // 메시지를 서버로 전송
  socket.emit('chat message', message);
  
  // 입력 필드 초기화
  input.value = '';
}

// 메시지 수신
socket.on('chat message', (msg) => {
  const messages = document.getElementById('messages');
  const li = document.createElement('li');
  li.textContent = msg;
  
  messages.appendChild(li);
});

클라이언트에서는 socket.io 라이브러리를 이용하여 서버와 실시간 통신을 수행합니다. sendMessage 함수는 메시지를 서버로 전송하는 역할을 합니다. socket.emit('chat message', message) 코드를 통해 서버의 chat message 이벤트를 실행하고 메시지를 전송합니다.

또한, socket.on('chat message', (msg) => { ... }) 코드는 서버로부터 전달된 메시지를 받아서 화면에 표시합니다.

3. HTML 및 CSS

마지막으로, HTML과 CSS를 설정하여 실시간 채팅 인터페이스를 구성합니다. 다음은 예제 HTML 코드입니다.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>실시간 채팅</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <ul id="messages"></ul>
  
  <input type="text" id="message-input">
  <button onclick="sendMessage()">전송</button>
  
  <script src="/socket.io/socket.io.js"></script>
  <script src="client.js"></script>
</body>
</html>

실시간으로 메시지를 표시하기 위해 ul 요소와 li 요소를 사용합니다. 메시지 입력은 input 요소로 받고, 전송 버튼을 클릭하면 sendMessage 함수가 실행되도록 설정합니다.

4. 결과 확인

이제 서버를 실행하고 웹 브라우저에서 index.html 파일을 열어 실시간 채팅을 테스트해 볼 수 있습니다.

실시간으로 메시지를 보내고 받을 수 있으며, 모든 클라이언트에게 메시지가 전송됩니다.

위에서 제시한 코드와 설정을 기반으로 하여 실시간 채팅 기능을 구현하실 수 있습니다. fetch API를 사용하면 HTTP 요청을 비동기적으로 보내고 응답을 처리하는 간편한 방법을 제공합니다. 이를 활용하여 다양한 실시간 기능을 구현할 수 있습니다.

© 2018 Colin. All rights reserved.