자바스크립트와 Zeit Now를 이용한 실시간 채팅 애플리케이션 구현하기

10 Nov 2023

javascript

지금은 웹 개발에서 실시간 기능이 필수적인 요소가 되었습니다. 실시간 채팅 애플리케이션은 사용자들이 서로 실시간으로 메시지를 주고받을 수 있는 환경을 제공합니다. 이번 글에서는 자바스크립트와 Zeit Now를 이용하여 실시간 채팅 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.

기술 스택

실시간 채팅 애플리케이션을 개발하기 위해 아래와 같은 기술 스택을 사용할 것입니다.

Front-end: HTML, CSS, 자바스크립트
Back-end: Node.js
데이터베이스: MongoDB (선택 사항)

개발 단계

프로젝트 설정 및 초기화
Express.js 서버 설정
Socket.io 라이브러리를 사용하여 실시간 통신 구현
사용자 인증 및 채팅 기능 구현
Zeit Now를 사용하여 애플리케이션 배포

1. 프로젝트 설정 및 초기화

먼저, 프로젝트 폴더를 생성하고 해당 폴더 내에서 아래 명령어를 통해 프로젝트 초기화를 진행합니다.

$ mkdir chat-app
$ cd chat-app
$ npm init -y

이렇게 하면 package.json 파일이 생성됩니다.

2. Express.js 서버 설정

Express.js는 Node.js의 웹 프레임워크로, 쉽게 웹 애플리케이션을 개발할 수 있습니다. Express.js를 사용하기 위해 아래 명령어를 실행하여 의존성을 설치합니다.

$ npm install express

그리고 서버 파일을 생성하고 아래의 코드를 추가합니다.

// server.js

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

const server = app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

3. Socket.io 라이브러리를 사용하여 실시간 통신 구현

Socket.io는 웹 소켓 기반의 실시간 통신을 가능하게 해주는 자바스크립트 라이브러리입니다. Socket.io를 설치하기 위해 아래 명령어를 실행합니다.

$ npm install socket.io

Socket.io를 Express.js와 함께 사용하기 위해 server.js 파일에 아래 코드를 추가합니다.

// 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) => {
  console.log('New user connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

const server = http.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

4. 사용자 인증 및 채팅 기능 구현

사용자 인증과 채팅 기능을 구현하기 위해 프론트엔드 코드를 작성합니다. HTML 파일에는 간단한 로그인 창과 채팅창이 있어야 합니다. 이후 자바스크립트 파일에서 소켓을 사용하여 사용자 입력과 메시지 전송을 처리합니다.

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Chat App</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Real-time Chat App</h1>

  <div id="chat-container">
    <div id="messages"></div>
    <input id="message-input" type="text" placeholder="Type a message...">
    <button id="send-button">Send</button>
  </div>

  <script src="/main.js"></script>
</body>
</html>

// main.js

const socket = io();

const messageContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

sendButton.addEventListener('click', () => {
  const message = messageInput.value;
  socket.emit('chat message', message);
  messageInput.value = '';
});

socket.on('chat message', (message) => {
  const newMessage = document.createElement('div');
  newMessage.innerText = message;
  messageContainer.appendChild(newMessage);
});

이제 서버 측에서도 소켓 이벤트를 처리할 수 있도록 server.js 파일을 수정합니다.

// server.js

// ...

io.on('connection', (socket) => {
  console.log('New user connected');

  socket.on('chat message', (message) => {
    io.emit('chat message', message);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

// ...

5. Zeit Now를 사용하여 애플리케이션 배포

마지막 단계는 애플리케이션을 실제 서버에 배포하는 것입니다. Zeit Now는 서버리스 배포 플랫폼으로, 아래 명령어를 실행하여 Now를 설치합니다.

$ npm install -g now

그리고 프로젝트 루트 디렉토리에서 아래 명령어를 실행하여 애플리케이션을 배포합니다.

$ now

Now CLI가 애플리케이션을 빌드하고 배포하는 과정이 진행됩니다. 성공적으로 배포되면 배포된 애플리케이션의 URL이 출력됩니다. 해당 URL로 접속하여 실시간 채팅 애플리케이션을 확인할 수 있습니다.

마무리

이번 글에서는 자바스크립트와 Zeit Now를 이용하여 실시간 채팅 애플리케이션을 구현하는 방법에 대해 알아보았습니다. 지금은 실시간 기능이 필수적인 웹 애플리케이션을 개발하는데 있어 가장 많이 사용되는 기술입니다. 실시간 채팅 애플리케이션을 개발해보면 더 복잡한 실시간 기능을 구현하는 방법을 이해하는 데 도움이 될 것입니다.

References: