자바스크립트 웹 소켓을 활용한 실시간 데이터 전송

10 Sep 2023

javascript

인터넷을 통해 데이터를 실시간으로 전송하고 싶다면, 자바스크립트 웹 소켓(Web Socket)을 활용할 수 있습니다. 웹 소켓은 양방향 통신을 제공하여 클라이언트와 서버 간에 실시간 데이터 전송이 가능합니다. 이 글에서는 자바스크립트 웹 소켓을 사용하여 실시간 데이터를 전송하는 방법에 대해 알아보겠습니다.

웹 소켓 API

웹 소켓을 사용하기 위해선 먼저 웹 소켓 API를 이해해야 합니다. 현재 모든 최신 브라우저는 웹 소켓을 지원하고 있으며, 다음과 같이 웹 소켓 API를 사용할 수 있습니다.

// 웹 소켓 생성
const socket = new WebSocket("ws://localhost:3000");

// 연결이 만들어졌을 때 실행되는 이벤트 핸들러
socket.onopen = function(event) {
  console.log("연결이 성공적으로 이루어졌습니다.");
};

// 메시지를 받았을 때 실행되는 이벤트 핸들러
socket.onmessage = function(event) {
  console.log("새로운 메시지를 받았습니다:", event.data);
};

// 에러가 발생했을 때 실행되는 이벤트 핸들러
socket.onerror = function(error) {
  console.error("에러가 발생했습니다:", error);
};

// 연결이 종료되었을 때 실행되는 이벤트 핸들러
socket.onclose = function(event) {
  console.log("연결이 종료되었습니다.");
};

// 메시지를 전송하는 함수
function sendMessage(message) {
  socket.send(message);
}

서버 측 설정

웹 소켓을 사용하여 실시간 데이터를 전송하려면 서버 측에도 설정이 필요합니다. 서버는 클라이언트의 웹 소켓 연결 요청을 받아들일 수 있어야 합니다. 서버 측의 설정은 자바스크립트 외의 언어나 프레임워크를 사용할 수 있지만, 이 글에서는 간단한 예시로 Node.js와 Express를 사용하겠습니다.

먼저, Node.js를 설치한 후 다음과 같은 명령어를 이용해 Express 프로젝트를 생성합니다.

$ npm install -g express-generator
$ express realtime-data-server
$ cd realtime-data-server
$ npm install

그 다음, 프로젝트 폴더 안에 있는 app.js 파일을 열고 다음과 같이 웹 소켓을 추가합니다.

// express 모듈을 불러옵니다.
const express = require("express");
const http = require("http");
const WebSocket = require("ws");

// express 앱을 생성합니다.
const app = express();

// http 서버를 생성합니다.
const server = http.createServer(app);

// 웹 소켓 서버를 생성합니다.
const wss = new WebSocket.Server({ server });

// 클라이언트가 웹 소켓 연결을 요청했을 때 처리합니다.
wss.on("connection", function(ws) {
  console.log("새로운 연결이 생성되었습니다.");

  // 클라이언트로부터 메시지를 받았을 때 처리합니다.
  ws.on("message", function(message) {
    console.log("클라이언트로부터 메시지를 받았습니다:", message);

    // 클라이언트에게 메시지를 전송합니다.
    ws.send("서버에서 보낸 메시지");
  });

  // 연결이 종료되었을 때 처리합니다.
  ws.on("close", function() {
    console.log("연결이 종료되었습니다.");
  });
});

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

위 코드에서는 클라이언트로부터 받은 메시지를 다시 클라이언트에게 전송하는 간단한 에코(echo) 서버를 만들었습니다. 따라서 클라이언트에서 메시지를 전송하면 서버에서 받은 메시지를 다시 클라이언트로 전송합니다.

클라이언트 측 사용 예시

위에서 설정한 서버에 연결하여 실시간 데이터를 전송하는 클라이언트 측의 예시 코드는 다음과 같습니다.

// 웹 소켓 생성
const socket = new WebSocket("ws://localhost:3000");

// 연결이 만들어졌을 때 실행되는 이벤트 핸들러
socket.onopen = function(event) {
  console.log("연결이 성공적으로 이루어졌습니다.");
};

// 메시지를 받았을 때 실행되는 이벤트 핸들러
socket.onmessage = function(event) {
  console.log("새로운 메시지를 받았습니다:", event.data);
};

// 에러가 발생했을 때 실행되는 이벤트 핸들러
socket.onerror = function(error) {
  console.error("에러가 발생했습니다:", error);
};

// 연결이 종료되었을 때 실행되는 이벤트 핸들러
socket.onclose = function(event) {
  console.log("연결이 종료되었습니다.");
};

// 메시지를 전송하는 함수
function sendMessage(message) {
  socket.send(message);
}

// 예시: 1초마다 "Hello, world!" 메시지를 전송합니다.
setInterval(function() {
  sendMessage("Hello, world!");
}, 1000);

위 코드에서는 웹 소켓을 생성하고, 연결이 만들어진 후에 onopen, onmessage, onerror, onclose와 같은 이벤트 핸들러 함수를 등록합니다. 클라이언트에서 서버로 메시지를 전송하는 예시 코드도 포함되어 있습니다.

정리하자면, 자바스크립트 웹 소켓을 사용하면 클라이언트와 서버 간에 실시간 데이터 전송이 가능합니다. 이를 활용하여 실시간 채팅, 주식 시세 업데이트, 실시간 게임 플레이 등 다양한 기능을 구현할 수 있습니다.