자바스크립트를 활용한 실시간 알림 기능 개발

10 Nov 2023

javascript

개요

실시간 알림 기능은 웹 애플리케이션의 사용자 경험을 향상시키는 중요한 기능 중 하나입니다. 이 기능은 서버와 클라이언트 간의 통신을 통해 실시간으로 변경된 내용을 사용자에게 알려주는 역할을 합니다. 자바스크립트는 이러한 실시간 알림 기능을 구현하기에 적합한 언어로, 이번 블로그 포스트에서는 자바스크립트를 활용하여 실시간 알림 기능을 개발하는 방법에 대해 알아보겠습니다.

개발환경 설정

먼저 실시간 알림 기능을 개발하기 위해 필요한 개발환경을 설정해야 합니다. 여기에서는 Node.js와 Express 프레임워크를 사용하여 서버를 구축하고, Socket.IO를 활용하여 실시간 통신 기능을 구현합니다.

Node.js 설치: Node.js 공식 웹사이트에서 Node.js를 다운로드하고 설치합니다.
Express 설치: 명령 프롬프트(터미널)에서 npm install express 명령을 통해 Express를 설치합니다.
Socket.IO 설치: 명령 프롬프트(터미널)에서 npm install socket.io 명령을 통해 Socket.IO를 설치합니다.

실시간 알림 기능 개발 방법

1. 서버 구축

먼저 Express를 사용하여 간단한 웹 서버를 구축합니다. 다음은 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('New user connected');

  // 클라이언트로부터의 알림 메시지 이벤트 처리
  socket.on('notification', (message) => {
    console.log('Received new notification:', message);
    // 알림 메시지를 다른 모든 클라이언트에게 전송
    io.emit('newNotification', message);
  });

  // 연결이 끊어진 클라이언트 처리
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

2. 클라이언트 구현

실시간 알림을 받을 클라이언트를 구현합니다. 웹 페이지의 HTML 파일에 Socket.IO 클라이언트 스크립트를 추가하고, main.js 파일에서 알림 이벤트와 알림 메시지를 처리하는 JavaScript 코드를 작성합니다.

<!-- index.html -->
<html>
<head>
  <script src="/socket.io/socket.io.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <!-- 웹 페이지의 내용 -->
</body>
</html>

// main.js
const socket = io();

// 알림 메시지 전송 함수
function sendNotification(message) {
  socket.emit('notification', message);
}

// 실시간 알림 받기
socket.on('newNotification', (message) => {
  console.log('New notification:', message);
  alert('New notification: ' + message);
});

3. 테스트 진행

웹 서버를 실행시키고 웹 페이지에 접속하여 실시간 알림 기능을 테스트합니다. 클라이언트에서 sendNotification 함수를 호출하여 서버로 알림 메시지를 전송하고, 서버에서는 해당 메시지를 다른 클라이언트로 전달합니다. 클라이언트에서는 실시간으로 알림 메시지를 받아서 출력하게 됩니다.

마무리

이번 포스트에서는 자바스크립트를 활용하여 실시간 알림 기능을 개발하는 방법에 대해 알아보았습니다. 웹 애플리케이션에서 실시간 정보를 제공해야 하는 경우, Socket.IO를 사용하여 쉽게 구현할 수 있습니다. 실시간 알림은 사용자 경험을 향상시킬 뿐만 아니라 웹 애플리케이션의 활용도를 더욱 높일 수 있습니다.

#javascript #실시간알림