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

10 Sep 2023

javascript

자바스크립트의 fetch API를 이용하면 서버와의 간단한 통신을 손쉽게 처리할 수 있습니다. 이를 활용하여 실시간 채팅 기능을 구현해보겠습니다.

Step 1: HTML 구조 설정하기

먼저, HTML 파일에 채팅창과 메시지 입력창을 생성합니다. 아래는 예시로 제시된 HTML 구조입니다.

<!DOCTYPE html>
<html>
<head>
    <title>실시간 채팅</title>
</head>
<body>
    <div id="chat">
        <div id="message-container">
            <!-- 메시지가 출력될 영역 -->
        </div>
        <div id="message-input">
            <input type="text" id="message" placeholder="메시지를 입력하세요">
            <button id="send-btn">전송</button>
        </div>
    </div>
    <script src="chat.js"></script>
</body>
</html>

Step 2: JavaScript로 서버와 통신하기

다음으로, JavaScript 파일 (chat.js)을 생성하고 아래의 코드를 작성합니다.

const messageContainer = document.getElementById('message-container');
const messageInput = document.getElementById('message');
const sendBtn = document.getElementById('send-btn');

// 서버 URL
const serverUrl = '<YOUR_SERVER_URL>';

// 채팅 메시지를 서버로 보내는 함수
const sendMessage = async () => {
    const messageText = messageInput.value;

    // Fetch API로 POST 요청 보내기
    const response = await fetch(serverUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: messageText })
    });

    // 응답 처리
    if (response.ok) {
        const result = await response.json();
        console.log(result);
        // TODO: 메시지를 화면에 출력하는 로직 추가
    } else {
        console.error('Error:', response.statusText);
    }
};

// '전송' 버튼 클릭 이벤트 핸들러 등록
sendBtn.addEventListener('click', sendMessage);

위 코드에서 <YOUR_SERVER_URL> 부분에는 실제 서버의 URL을 입력해야 합니다.

Step 3: 서버 응답 받아와 화면에 출력하기

서버로부터 메시지를 받아와 화면에 출력하기 위해서는, sendMessage 함수 내의 응답 처리 로직을 추가해야 합니다.

// 서버로부터 메시지를 받아와 화면에 출력하는 함수
const receiveMessage = (message) => {
    const newMessage = document.createElement('div');
    newMessage.innerText = message;
    messageContainer.appendChild(newMessage);
};

// '전송' 버튼 클릭 이벤트 핸들러 등록
sendBtn.addEventListener('click', async () => {
    // ...

    if (response.ok) {
        const result = await response.json();
        receiveMessage(result.message); // 서버에서 받은 메시지 출력
    } else {
        console.error('Error:', response.statusText);
    }

    // ...
});

위 코드에서는 receiveMessage 함수를 생성하여, 새로운 메시지를 받아올 때마다 해당 함수를 호출하여 화면에 출력합니다.

Step 4: 서버에서 실제로 메시지를 처리하는 로직 작성하기

마지막으로, 채팅 메시지를 받고 처리하는 서버 로직을 작성해야 합니다. 서버의 성격에 따라 다르게 구현될 수 있습니다. 아래는 간단한 예시입니다.

const express = require('express');
const app = express();
const cors = require('cors');

app.use(express.json());
app.use(cors());

// 클라이언트로부터 새로운 메시지를 받는 엔드포인트
app.post('/', (req, res) => {
    const message = req.body.message;
    console.log('Received new message:', message);

    // TODO: 메시지 처리 로직 구현

    // 응답
    res.json({ message: '서버에서 전송한 메시지' });
});

const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

위 코드에서는 express, cors 모듈을 이용하여 간단한 Express 서버를 생성하고, 클라이언트로부터 새로운 메시지를 받는 엔드포인트를 만듭니다. 서버의 동작을 더욱 채우기 위해서는 TODO 부분에 실제로 메시지를 처리하는 로직을 구현해야 합니다.

결론

이제 자바스크립트의 fetch API를 이용하여 실시간 채팅 기능을 구현하는 방법을 알아보았습니다. 위의 코드를 참고하여 채팅 기능을 확장하거나 다른 기능을 추가해보세요. Happy coding!