많은 웹 애플리케이션에서 실시간으로 사용자에게 알림을 보내는 기능이 필요합니다. 이를 위해 WebSocket과 같은 실시간 통신 기술을 사용할 수 있습니다. 이번 글에서는 JavaScript 프로젝트에서 이러한 실시간 알림 기능을 설정하는 방법을 알아보겠습니다.

1. Socket.io 설치

Socket.io는 실시간 웹 애플리케이션을 위한 라이브러리로, JavaScript와 Node.js에서 사용할 수 있습니다. 프로젝트에 Socket.io를 설치하기 위해 다음 명령어를 사용합니다:

npm install socket.io

2. Express와 Socket.io 통합

Express는 Node.js 웹 애플리케이션 프레임워크로, Socket.io와 함께 사용할 수 있습니다. 이를 위해 다음과 같이 Express와 Socket.io를 통합해주는 코드를 작성합니다:

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

// Socket.io와 Express 통합 설정
app.use(express.static(__dirname + '/public'));

// Socket.io 이벤트 처리
io.on('connection', (socket) => {
  console.log('새로운 사용자가 연결되었습니다.');

  // 실시간 알림 이벤트 처리
  socket.on('notification', (data) => {
    console.log('새로운 알림을 받았습니다:', data);
    // 알림을 받은 사용자에게 알림을 보냄
    socket.emit('receiveNotification', data);
  });

  // 연결 해제 이벤트 처리
  socket.on('disconnect', () => {
    console.log('사용자가 연결을 해제했습니다.');
  });
});

// 서버 시작
http.listen(3000, () => {
  console.log('서버가 시작되었습니다. 포트: 3000');
});

3. 클라이언트 측 코드 작성

클라이언트 측에서도 Socket.io를 사용하기 위해 다음 스크립트를 HTML 파일에 추가합니다:

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  // 알림 전송 함수
  function sendNotification() {
    const notification = '새로운 알림이 있습니다!';
    socket.emit('notification', notification);
  }

  // 알림 수신 처리 함수
  socket.on('receiveNotification', (data) => {
    console.log('새로운 알림을 받았습니다:', data);
    alert(data);
  });
</script>

4. 프로젝트 실행

모든 설정이 완료되었으므로 프로젝트를 실행해보겠습니다. 다음 명령어를 사용하여 서버를 시작합니다:

npm start

웹 브라우저에서 http://localhost:3000을 열고 개발자 도구의 콘솔을 확인하면, 새로운 사용자가 연결되었다는 메시지와 함께 알림을 보내고 받는 과정을 확인할 수 있습니다.

위의 예시를 참고하여 실시간 알림 설정을 원하는 프로젝트에서 해당 코드를 적절히 수정하여 사용하면 됩니다.

결론

Package.json을 활용하여 JavaScript 프로젝트에서 실시간 알림 설정하는 방법에 대해 알아보았습니다. Socket.io를 사용하여 서버와 클라이언트 간의 실시간 통신을 구축할 수 있으며, Express 프레임워크를 통해 이를 통합할 수 있습니다.

해당 기술은 웹 애플리케이션의 실시간 기능을 구현할 때 유용하게 활용될 수 있습니다. 추가적인 자세한 내용은 Socket.io 공식 문서를 참고하시기 바랍니다.

#JavaScript #실시간알림