자바스크립트에서 JSON 데이터를 이용하여 실시간 채팅 생성하기

15 Sep 2023

javascript

자바스크립트를 사용하여 웹 페이지에서 실시간 채팅을 구현하는 방법을 알아보겠습니다. 이를 위해 JSON 데이터 형식을 사용하여 채팅 메시지를 주고받을 것입니다.

요구 사항

웹 브라우저 환경 (HTML, CSS, JavaScript)
채팅 서버 (Node.js 등으로 구현)

구현 단계

1. HTML 구조 설정

먼저, HTML 파일에서 채팅창을 표시할 영역과 메시지 입력창을 생성합니다. 채팅창에는 채팅 메시지가 표시될 <ul> 요소를 사용합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 채팅</title>
</head>
<body>
  <div id="chat-container">
    <ul id="chat-messages"></ul>
  </div>
  <input type="text" id="message-input" placeholder="메시지 입력..." />
  <button id="send-button">전송</button>

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

2. JavaScript 코드 작성

JavaScript 파일인 script.js에서 채팅 기능을 구현합니다. 먼저, WebSocket을 사용하여 서버와 클라이언트 간의 실시간 통신을 설정합니다.

// WebSocket 연결
const socket = new WebSocket('ws://localhost:3000');

// 메시지 입력창과 버튼 요소 가져오기
const input = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// 메시지 전송 함수
function sendMessage() {
  const message = input.value;
  // JSON 데이터 형식으로 메시지 전송
  socket.send(JSON.stringify({ type: 'message', content: message }));
  // 입력창 비우기
  input.value = '';
}

// 버튼 클릭 시 메시지 전송
sendButton.addEventListener('click', sendMessage);

// 엔터 키 입력 시 메시지 전송
input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    sendMessage();
  }
});

// 채팅 메시지 표시 함수
function showMessage(message) {
  const chatMessages = document.getElementById('chat-messages');
  // JSON 데이터 파싱
  const { type, content } = JSON.parse(message);
  // 메시지 타입에 따라 스타일링
  const className = type === 'message' ? 'message' : 'alert';
  // li 요소 생성 및 내용 추가
  const li = document.createElement('li');
  li.className = className;
  li.textContent = content;
  // 채팅창에 메시지 추가
  chatMessages.appendChild(li);
}

// 새로운 메시지 도착 시 처리
socket.onmessage = (event) => {
  showMessage(event.data);
};

3. 채팅 서버 구현

채팅 서버는 WebSocket을 사용하여 클라이언트와 실시간 통신을 수행합니다. Node.js를 기반으로 간단한 채팅 서버를 구현해보겠습니다.

const WebSocket = require('ws');

// WebSocket 서버 생성
const wss = new WebSocket.Server({ port: 3000 });

// 클라이언트 연결 시 처리
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 받은 메시지 전체 클라이언트에게 전송
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

4. 서버 실행

위의 채팅 서버 코드를 chat-server.js로 저장한 후, 터미널에서 다음 명령어를 실행하여 서버를 실행합니다.

node chat-server.js

이제 브라우저에서 index.html을 열어서 채팅을 테스트할 수 있습니다.

마무리

위의 예제는 간단한 실시간 채팅을 JSON 데이터를 활용하여 구현하는 방법입니다. 더 복잡한 기능을 추가하거나 보완하기 위해서는 추가적인 개발과 고려가 필요합니다. JSON 데이터를 활용하여 다양한 실시간 기능을 구현할 수 있으므로, 참고하여 원하는 기능을 구현해보세요.

#javascript #json #실시간채팅