자바스크립트 서버 푸시 기능

10 Sep 2023

javascript

서버 푸시는 웹 애플리케이션이 서버로부터 새로운 데이터나 업데이트된 정보를 실시간으로 클라이언트에게 전달하는 기능입니다. 이 기능은 실시간 채팅, 알림, 주식 가격 업데이트 등 다양한 웹 애플리케이션에서 사용될 수 있습니다. 자바스크립트를 사용하여 서버 푸시 기능을 구현하는 방법에 대해 알아보겠습니다.

WebSockets

WebSockets은 클라이언트와 서버 간에 양방향 통신을 제공하는 프로토콜입니다. 이 프로토콜을 사용하면 서버에서 클라이언트로 메시지를 보낼 수 있으며, 클라이언트에서도 서버로 메시지를 보낼 수 있습니다.

자바스크립트에서 웹 소켓을 사용하기 위해서는 WebSocket 객체를 생성해야 합니다.

const socket = new WebSocket('wss://example.com');

socket.addEventListener('open', () => {
  console.log('WebSocket connection established!');
});

socket.addEventListener('message', (event) => {
  console.log('Received message:', event.data);
});

socket.addEventListener('close', () => {
  console.log('WebSocket connection closed!');
});

socket.addEventListener('error', (error) => {
  console.error('WebSocket error:', error);
});

위의 예제에서 'wss://example.com'는 WebSocket 서버의 주소입니다. addEventListener를 사용하여 이벤트를 처리하고, 메시지를 수신할 때마다 콘솔에 출력하도록 했습니다.

서버 푸시 이벤트 수신

웹 소켓을 사용하여 서버에서 메시지를 수신하면 클라이언트 애플리케이션에서 필요한 동작을 수행할 수 있습니다. 예를 들어, 실시간 채팅 애플리케이션에서 새로운 메시지가 도착하면 해당 메시지를 화면에 표시할 수 있습니다.

서버에서 클라이언트로 메시지를 보내려면 웹 소켓의 send 메소드를 사용합니다.

socket.send('Hello, client!');

위의 코드는 서버에서 클라이언트로 'Hello, client!'라는 메시지를 보낼 때 사용하는 방법입니다. 클라이언트 애플리케이션은 서버로부터 메시지를 수신하는 콜백 함수를 등록하여 해당 메시지를 처리할 수 있습니다.

Socket.io

Socket.io는 자바스크립트 서버와 클라이언트 간에 실시간 양방향 통신을 가능하게 해주는 라이브러리입니다. 웹 소켓과 일반 HTTP 기반 통신을 모두 지원하므로 브라우저와 서버 간의 호환성 문제를 해결할 수 있습니다.

Socket.io를 사용하려면 서버와 클라이언트 모두에 라이브러리를 설치하고 설정해야 합니다.

서버 측에서 Socket.io를 설정하기 위해 다음과 같이 작성합니다.

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('New client connected!');
  
  socket.on('disconnect', () => {
    console.log('Client disconnected!');
  });
  
  socket.on('chat message', (message) => {
    console.log('Received message:', message);
    io.emit('chat message', message);
  });
});

클라이언트 측에서 Socket.io를 사용하기 위해 다음과 같이 작성합니다.

const socket = io();

socket.on('connect', () => {
  console.log('Connected to server!');
});

socket.on('disconnect', () => {
  console.log('Disconnected from server!');
});

socket.on('chat message', (message) => {
  console.log('Received message:', message);
});

위의 예제에서 'chat message'라는 이벤트를 사용하여 클라이언트에서 서버로 메시지를 보내고, 서버에서 클라이언트로 메시지를 보냅니다.

Socket.io를 사용하면 실시간으로 데이터를 교환하고, 채팅이나 알림과 같은 다양한 기능을 구현할 수 있습니다.

결론

자바스크립트를 사용하여 서버 푸시 기능을 구현하는 방법을 알아보았습니다. 웹 소켓을 사용해 양방향 통신을 구현하거나 Socket.io를 사용해 브라우저와 서버 간의 실시간 통신을 구현할 수 있습니다. 이러한 기술을 사용하면 다양한 실시간 기능을 만들 수 있으며, 사용자 경험을 향상시킬 수 있습니다.