Colin's Blog
자바스크립트 서버 푸시 기능

서버 푸시는 웹 애플리케이션의 실시간 통신을 위해 필요한 핵심 특징 중 하나입니다. 이는 서버에서 데이터 변경이 있을 때, 즉각적으로 클라이언트에게 업데이트를 전송하는 기능을 말합니다. 자바스크립트를 사용하여 서버 푸시 기능을 구현하는 방법에 대해 알아보겠습니다.

웹 소켓 (WebSocket)

웹 소켓은 실시간 양방향 통신을 지원하는 프로토콜입니다. 웹 소켓은 클라이언트와 서버 간의 TCP 연결을 설정하고, 서버 푸시를 통해 실시간 데이터를 주고받을 수 있습니다. 아래 예제는 자바스크립트로 웹 소켓을 사용하는 간단한 예제입니다.

const socket = new WebSocket("ws://localhost:3000");
socket.onopen = function() {
  console.log("웹 소켓 연결 성공");
};
socket.onmessage = function(event) {
  const data = event.data;
  console.log("서버로부터 수신한 데이터: " + data);
};
socket.onclose = function() {
  console.log("웹 소켓 연결 종료");
};

위 코드에서는 new WebSocket("ws://localhost:3000")를 통해 서버와 웹 소켓 연결을 설정합니다. 연결이 성공적으로 이루어지면 onopen 콜백 함수가 호출됩니다. 서버로부터 메시지를 수신할 경우 onmessage 콜백 함수가 호출되며, 연결이 종료되면 onclose 콜백 함수가 호출됩니다.

Socket.io

Socket.io는 자바스크립트를 사용하여 웹 소켓 기반의 실시간 통신을 구현하는 라이브러리입니다. Socket.io는 다양한 플랫폼과 브라우저에서 작동하며, 실시간 통신을 위한 여러 편의 기능을 제공합니다.

아래 예제는 Socket.io를 사용하여 서버 푸시 기능을 구현하는 방법을 보여줍니다.

서버 측 (Node.js)

const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = require("socket.io")(server);

io.on("connection", function(socket) {
  console.log("새로운 클라이언트가 연결되었습니다.");

  socket.on("message", function(data) {
    console.log("클라이언트로부터 수신한 데이터: " + data);
    // 데이터 처리 및 필요한 로직 수행
    // 클라이언트에게 업데이트를 전송할 수도 있습니다.
    io.emit("update", "새로운 데이터가 업데이트되었습니다.");
  });

  socket.on("disconnect", function() {
    console.log("클라이언트와의 연결이 종료되었습니다.");
  });
});

server.listen(3000, function() {
  console.log("서버가 3000 포트에서 실행 중입니다.");
});

위 코드는 Node.js 서버에서 Socket.io를 사용하여 클라이언트와 서버 사이의 실시간 통신을 관리하는 방법을 보여줍니다. io.on("connection") 함수를 통해 새로운 클라이언트 연결을 처리하고, 클라이언트로부터 메시지를 받을 경우 socket.on("message") 함수를 사용합니다. 필요한 데이터 처리와 로직을 수행한 뒤, io.emit("update") 함수를 통해 클라이언트에게 업데이트를 전송합니다.

클라이언트 측 (HTML, 자바스크립트)

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.socket.io/socket.io-3.0.4.js"></script>
  <script>
    const socket = io();
    socket.on("update", function(data) {
      console.log("서버로부터 업데이트를 수신했습니다: " + data);
    });
  </script>
</head>

<body>
  <h1>서버 푸시 기능 예제</h1>
</body>

</html>

위 코드는 클라이언트 측에서 Socket.io를 사용하여 서버로부터 업데이트를 받는 예제입니다. <script> 태그 내에서 const socket = io()를 통해 서버와 연결을 설정하고, socket.on("update") 함수를 통해 서버로부터 업데이트를 수신합니다.

결론

자바스크립트를 사용하여 서버 푸시 기능을 구현하는 방법에 대해 알아보았습니다. 웹 소켓과 Socket.io를 통해 실시간 통신을 구현할 수 있으며, 클라이언트와 서버 간의 실시간 업데이트를 위해 이러한 기술을 활용할 수 있습니다. 실시간 정보 전달이 필요한 웹 애플리케이션을 개발할 때는 서버 푸시 기능을 고려해보세요.

© 2018 Colin. All rights reserved.