Socket.io를 사용하여 실시간 쇼핑카트 업데이트 구현하기

Socket.io는 실시간 양방향 통신을 가능하게 해주는 JavaScript 라이브러리입니다. 이를 활용하여 실시간 쇼핑카트 업데이트를 구현할 수 있습니다.

1. 서버 측 구현

먼저, 서버 측에서는 Socket.io를 초기화하고 클라이언트와의 연결을 관리해야 합니다. 다음은 Express 프레임워크를 사용하여 서버 측을 구현하는 예제입니다.

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

// 클라이언트와의 연결을 관리
io.on('connection', socket => {
  console.log('새로운 클라이언트가 연결되었습니다.');

  // 클라이언트로부터의 업데이트 이벤트를 수신
  socket.on('updateCart', cart => {
    console.log('새로운 쇼핑카트 정보를 수신했습니다:', cart);
    
    // 모든 클라이언트에게 쇼핑카트 업데이트 이벤트를 발송
    io.emit('cartUpdated', cart);
  });

  // 클라이언트와의 연결이 해제되었을 때 처리
  socket.on('disconnect', () => {
    console.log('클라이언트와의 연결이 해제되었습니다.');
  });
});

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

위 코드에서 updateCart 이벤트를 수신하는 부분에서 클라이언트로부터 업데이트된 쇼핑카트 정보를 전달받습니다. 그 후, cartUpdated 이벤트를 발송하여 모든 클라이언트에게 업데이트된 쇼핑카트 정보를 전송합니다.

2. 클라이언트 측 구현

이제 클라이언트 측에서는 Socket.io를 사용하여 서버와 통신하고 쇼핑카트를 업데이트합니다. 다음은 HTML 파일에 Socket.io를 추가하고, JavaScript를 사용하여 클라이언트 측을 구현하는 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>실시간 쇼핑카트 업데이트</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <h1>실시간 쇼핑카트 업데이트</h1>
    <div id="cart">
      <!-- 쇼핑카트 내용 -->
    </div>

    <script>
      // Socket.io를 초기화하고 서버와 연결
      const socket = io();

      // 쇼핑카트 업데이트 이벤트를 수신
      socket.on('cartUpdated', cart => {
        // 쇼핑카트 업데이트
        document.getElementById('cart').innerHTML = cart;
      });

      // 쇼핑카트 업데이트 함수
      function updateCart(cart) {
        // 업데이트된 쇼핑카트 정보를 서버로 전송
        socket.emit('updateCart', cart);
      }

      // 쇼핑카트 업데이트 예시
      const updatedCart = '새로운 쇼핑카트 내용';
      updateCart(updatedCart);
    </script>
  </body>
</html>

클라이언트에서는 Socket.io를 초기화하고 서버와 연결한 뒤, cartUpdated 이벤트를 수신하여 쇼핑카트를 업데이트합니다. updateCart 함수를 사용하여 업데이트된 쇼핑카트 정보를 서버로 전송할 수 있습니다. 위 예제에서는 updateCart 함수를 호출하여 쇼핑카트를 업데이트하는 예시가 포함되어 있습니다.

이제, 서버와 클라이언트가 실시간으로 쇼핑카트 정보를 업데이트하는 예제를 구현했습니다. Socket.io를 사용하기 위해서는 서버와 클라이언트에 각각 해당 라이브러리를 추가해야 합니다. 상황에 맞게 수정하여 실제 활용해보세요!

Socket.io를 사용하여 실시간 쇼핑카트 업데이트 구현하기

1. 서버 측 구현

2. 클라이언트 측 구현

참고 자료