자바스크립트를 활용한 실시간 채팅 개발하기

10 Nov 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 실시간 채팅 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

요구 사항

Node.js 설치
Express.js 프레임워크 설치
Socket.io 라이브러리 설치

서버 설정

프로젝트 폴더를 생성하고 해당 폴더에서 터미널을 엽니다.
npm init 명령어를 실행하여 프로젝트를 초기화합니다.
npm install express socket.io 명령어를 사용하여 Express.js와 Socket.io를 설치합니다.
server.js 파일을 생성하고 아래의 코드를 추가합니다.

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

app.use(express.static(__dirname + '/public'));

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

클라이언트 작성

public 폴더를 생성합니다.
index.html 파일을 생성하고 아래의 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>실시간 채팅</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="client.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  
  <form action="">
    <input id="m" autocomplete="off" /><button>전송</button>
  </form>
</body>
</html>

client.js 파일을 생성하고 아래의 코드를 추가합니다.

const socket = io();

const form = document.querySelector('form');
const input = document.querySelector('#m');
const messages = document.querySelector('#messages');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  socket.emit('chat message', input.value);
  input.value = '';
});

socket.on('chat message', (msg) => {
  const li = document.createElement('li');
  li.textContent = msg;
  messages.appendChild(li);
});

실시간 채팅 애플리케이션 테스트

터미널에서 node server.js 명령어를 실행하여 서버를 시작합니다.
웹 브라우저에서 http://localhost:3000 주소로 접속합니다.
여러 사용자 간에 메시지를 보내면 실시간으로 채팅이 이루어지는 것을 확인할 수 있습니다.

결론

이번 포스트에서는 자바스크립트를 활용하여 실시간 채팅 애플리케이션을 개발하는 방법에 대해 알아보았습니다. Node.js의 Express.js 프레임워크와 Socket.io 라이브러리를 이용하여 서버와 클라이언트를 작성하고, 실시간으로 메시지를 주고받는 것을 구현했습니다. 이를 통해 실제 라이브 채팅 애플리케이션을 개발할 수 있는 기초를 다졌습니다.

#javascript #realtimechat

목차

요구 사항

서버 설정

클라이언트 작성

실시간 채팅 애플리케이션 테스트

결론