자바스크립트를 활용하여 Vercel 환경에서 실시간 채팅 애플리케이션 개발하기

10 Nov 2023

vercel

Vercel은 서버리스 환경에서 웹 애플리케이션을 배포하고 호스팅하기 위한 플랫폼입니다. 이번 포스트에서는 자바스크립트를 사용하여 Vercel을 활용하여 실시간 채팅 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

환경 설정

먼저, Vercel 계정을 만들고 프로젝트를 생성합니다. Vercel은 Git 또는 GitHub과 연동하여 소스 코드를 관리할 수 있는 기능을 제공하므로, 이를 활용하여 개발을 진행합니다.

프로젝트 구조

프로젝트 구조는 다음과 같이 간단하게 설정할 수 있습니다:

- public/
  - index.html
- src/
  - client.js
  - server.js
- vercel.json

public/index.html: 웹 페이지의 UI를 위한 HTML 파일입니다.
src/client.js: 클라이언트 측에서 동작하는 자바스크립트 코드입니다.
src/server.js: 서버 측에서 동작하는 자바스크립트 코드입니다.
vercel.json: Vercel 관련 설정 파일입니다.

웹 페이지 UI

먼저, public/index.html 파일에 웹 페이지 UI를 작성합니다. 간단한 채팅 화면을 구성하기 위해 다음과 같은 HTML 코드를 작성합니다:

<!DOCTYPE html>
<html>
<head>
  <title>실시간 채팅 애플리케이션</title>
</head>
<body>
  <h1>실시간 채팅</h1>

  <div id="chat-container">
    <div id="message-container"></div>
    <input type="text" id="message-input" placeholder="메시지를 입력하세요" />
    <button id="send-button">전송</button>
  </div>

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

위 코드에서는 간단한 채팅 화면을 구성하였습니다. 메시지를 입력할 수 있는 입력란과 전송 버튼이 제공됩니다.

클라이언트 측 코드

다음으로, src/client.js 파일에 클라이언트 측에서 동작하는 자바스크립트 코드를 작성합니다. 웹 소켓을 이용하여 실시간으로 메시지를 전달하고 화면에 표시할 수 있습니다. 아래의 코드는 예시입니다:

const socket = new WebSocket("wss://your-websocket-url");

socket.onopen = function() {
  console.log("웹 소켓 연결이 열렸습니다.");
};

socket.onmessage = function(event) {
  const messageContainer = document.getElementById("message-container");
  const newMessage = document.createElement("div");
  newMessage.innerText = event.data;
  messageContainer.appendChild(newMessage);
};

document.getElementById("send-button").onclick = function() {
  const messageInput = document.getElementById("message-input");
  const message = messageInput.value;
  socket.send(message);
  messageInput.value = "";
};

위 코드는 웹 소켓을 생성하고, 연결이 열린 경우 로그를 출력하고, 메시지를 수신한 경우 화면에 표시하는 역할을 합니다. 또한, 메시지 입력과 전송 버튼이 클릭됐을 때 메시지를 전송하는 기능도 제공합니다.

서버 측 코드

마지막으로, src/server.js 파일에 서버 측에서 동작하는 자바스크립트 코드를 작성합니다. 웹 소켓 서버를 생성하여 클라이언트와의 연결을 관리하고, 메시지를 전송합니다. 아래의 코드는 예시입니다:

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", function(ws) {
  ws.on("message", function(message) {
    wss.clients.forEach(function(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

위 코드는 웹 소켓 서버를 생성하고 클라이언트와의 연결을 관리합니다. 메시지를 수신한 경우 연결된 모든 클라이언트에게 메시지를 전송합니다.

Vercel에 배포

위의 코드들을 작성하고 저장한 후, Vercel에 프로젝트를 배포합니다. Vercel은 자동으로 프로젝트를 빌드하고 호스팅하여 웹 애플리케이션을 실행시킵니다.

결론

이번 포스트에서는 자바스크립트와 Vercel을 이용하여 실시간 채팅 애플리케이션을 개발하는 방법에 대해 알아보았습니다. Vercel은 신속하게 프로젝트를 배포하고 관리할 수 있는 플랫폼이므로, 자바스크립트와 함께 활용하면 웹 개발 프로세스를 보다 효율적으로 관리할 수 있습니다.