웹소켓은 실시간 통신을 제공하는 프로토콜로, 브라우저와 서버 간 양방향 통신을 가능하게 합니다. 자바스크립트를 사용하여 웹소켓 통신을 구현하는 방법을 알아보겠습니다.

1. 웹소켓 설정하기

웹소켓 통신을 위해 먼저 WebSocket 객체를 생성해야 합니다. 다음과 같은 코드로 웹소켓을 설정할 수 있습니다.

const socket = new WebSocket("ws://localhost:3000");

socket.onopen = () => {
  console.log("웹소켓 연결이 열렸습니다.");
};

socket.onmessage = (event) => {
  const message = event.data;
  console.log("받은 메시지:", message);
};

socket.onclose = () => {
  console.log("웹소켓 연결이 닫혔습니다.");
};

위 코드에서 onopen은 웹소켓 연결이 열리면 실행될 콜백 함수, onmessage는 메시지를 받으면 실행될 콜백 함수, onclose는 웹소켓 연결이 닫히면 실행될 콜백 함수를 정의합니다.

2. 메시지 전송하기

메시지를 웹소켓 서버로 전송하는 방법은 간단합니다. socket.send() 메서드를 사용하여 메시지를 전송할 수 있습니다. 예를 들어, 다음과 같은 코드로 메시지를 전송할 수 있습니다.

const message = "Hello, server!";
socket.send(message);

메시지 전송 후, 서버에서는 이를 받아 처리할 수 있습니다.

3. 미들웨어 사용하기

미들웨어는 웹소켓 통신을 관리하고 필요한 처리를 수행하는 역할을 합니다. 미들웨어를 사용하면 웹소켓 통신에 특정 기능을 추가할 수 있습니다.

예를 들어, ws 미들웨어는 웹소켓 통신을 쉽게 구현할 수 있도록 도와줍니다. 이를 사용하여 서버측 웹소켓 통신을 구현하는 예제는 다음과 같습니다.

const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", (ws) => {
  console.log("클라이언트가 연결되었습니다.");

  ws.on("message", (message) => {
    console.log("받은 메시지:", message);

    // 메시지 처리 로직
  });

  ws.on("close", () => {
    console.log("클라이언트가 연결을 종료했습니다.");
  });
});

위 코드에서 ws 객체는 클라이언트와의 개별 웹소켓 연결을 의미하며, message 이벤트는 클라이언트로부터 메시지를 받았을 때 실행됩니다. 메시지를 받은 후 필요한 처리를 수행할 수 있습니다.

마무리

이렇게 자바스크립트 미들웨어를 사용하여 웹소켓 통신을 구현할 수 있습니다. 웹소켓을 활용하면 실시간으로 데이터를 주고받을 수 있는 웹 애플리케이션을 만들 수 있습니다. 추가적인 자세한 내용은 Mozilla Developer Network 등의 참고 자료를 참조하시기 바랍니다.

#웹소켓 #자바스크립트