nodejs-tutorial-websocket

[Node.js – 기초 강좌] 8. Websocket 소개 및 사용하기

by

WebSocket은 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 하는 혁신적인 프로토콜입니다.

이 블로그 포스팅에서는 WebSocket의 개념, 동작 원리, 그리고 Node.js와 TypeScript를 사용하여 서버와 클라이언트에서 Websocket을 사용하는 방법을 다룹니다.

Websocket 이란?

개요

WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 네트워크 프로토콜입니다.

HTTP와는 달리, WebSocket은 지속적인 연결을 유지하여 실시간 데이터 전송에 매우 적합합니다.

이를 통해 브라우저와 서버 간의 효율적인 데이터 교환이 가능합니다.

websocket

WebSocket의 장점

  • 낮은 지연 시간: 지속적인 연결을 통해 실시간 데이터 전송이 가능하므로 지연 시간이 매우 적습니다.
  • 효율적인 네트워크 사용: 필요할 때만 데이터를 전송하므로 네트워크 사용이 효율적입니다.
  • 단순한 API: JavaScript를 통해 브라우저에서 쉽게 사용할 수 있는 간단한 API를 제공합니다.

WebSocket의 단점

  • 방화벽 문제: 일부 네트워크 환경에서는 WebSocket 연결이 차단될 수 있습니다.
  • 서버 자원 소비: 지속적인 연결로 인해 서버 자원이 많이 소모될 수 있습니다.
  • 보안 문제: WebSocket은 별도의 보안 조치가 필요합니다. 데이터 암호화 및 사용자 인증이 필수적입니다.

WebSocket의 동작 순서

  • 초기 핸드셰이크 (Initial Handshake):
    • 클라이언트는 서버에 HTTP 요청을 보내 WebSocket 연결을 시작합니다.
    • 이 요청은 “Upgrade” 헤더를 포함하여 WebSocket 프로토콜로 업그레이드될 것을 요청합니다.
  • 서버 응답 (Server Response):
    • 서버는 클라이언트의 요청을 받아들이면 HTTP 101 상태 코드와 함께 “Switching Protocols” 응답을 반환하여 WebSocket 프로토콜로 전환합니다.
  • 지속 연결 (Persistent Connection):
    • WebSocket 연결이 확립되면 클라이언트와 서버는 양방향으로 지속적인 데이터를 주고받을 수 있습니다.
    • 연결은 클라이언트 또는 서버에 의해 명시적으로 닫힐 때까지 유지됩니다.
  • 메시지 전송 (Message Transmission):
    • 데이터는 텍스트 또는 바이너리 형식의 메시지 프레임으로 전송됩니다.
    • 각 프레임은 고유의 메시지를 포함할 수 있으며, 여러 프레임이 결합되어 하나의 메시지를 구성할 수 있습니다.
  • 연결 종료 (Connection Termination):
    • 클라이언트 또는 서버는 언제든지 연결을 종료할 수 있습니다.
    • 연결 종료 요청이 수신되면 다른 쪽은 이를 확인하고 연결을 닫습니다.
Websocket communication sequence diagram

Websocket 사용하기 (with Node.js, Typescript)

개요

WebSocket을 사용하면 클라이언트와 서버 간에 실시간 양방향 통신을 할 수 있습니다.

아래에서는 Node.js와 TypeScript를 사용하여 WebSocket을 구현하는 방법을 소개합니다.

서버와 클라이언트 측 모두의 예시 코드를 포함하고 있습니다.

주요 Class 와 Method

WebSocketServer 클래스

WebSocketServer 클래스는 WebSocket 서버를 생성하고 관리하는 데 사용됩니다.

  • constructor(options: WebSocketServer.ServerOptions):
    • 새로운 WebSocket 서버 인스턴스를 생성합니다. 여기서 options 객체에는 서버 설정이 포함됩니다.
    • 예를 들어, { port: 8080 }은 서버가 포트 8080에서 실행되도록 설정합니다.
  • on(event: string, listener: Function):
    • 특정 이벤트가 발생했을 때 실행될 콜백 함수를 등록합니다.
    • 주요 이벤트는 다음과 같습니다:
      • "connection": 클라이언트가 서버에 연결되었을 때 발생합니다. 콜백 함수는 연결된 WebSocket 객체를 인수로 받습니다.
WebSocket 클래스 (서버 측 및 클라이언트 측 모두)

WebSocket 클래스는 WebSocket 연결을 나타내며, 서버와 클라이언트 간의 실시간 양방향 통신을 처리합니다.

  • on(event: string, listener: Function):
    • 특정 이벤트가 발생했을 때 실행될 콜백 함수를 등록합니다. 주요 이벤트는 다음과 같습니다:
      • "message": 메시지가 수신되었을 때 발생합니다. 콜백 함수는 수신된 메시지를 인수로 받습니다.
      • "close": 연결이 닫혔을 때 발생합니다. 이 이벤트는 서버나 클라이언트가 연결을 종료할 때 트리거됩니다.
      • "error": 오류가 발생했을 때 발생합니다. 콜백 함수는 발생한 오류를 인수로 받습니다.
  • send(data: any):
    • 서버나 클라이언트에서 상대방으로 데이터를 전송합니다. 데이터는 문자열 또는 바이너리 형태로 전송할 수 있습니다

환경설정

$ npm init -y
$ npm install ws
$ npm install typescript ts-node ts-node-dev @types/node @types/ws --save-dev
$ tsc --init

Server에서 Websocket 사용

8080 포트를 열어서 Client의 연결을 Listen 하는 WebSocketServer를 생성합니다.

connection되거나 message를 수신하거나 close하거나 error 이벤트가 발생되면 log를 기록합니다.

import { WebSocket, WebSocketServer } from "ws";

// WebSocket 서버 생성
const wss = new WebSocketServer({ port: 8080 });

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

  ws.on("message", (message: string) => {
    console.log("클라이언트로부터 메시지를 받았습니다:", message.toString());
    ws.send("Hello Client!");
  });

  ws.on("close", () => {
    console.log("클라이언트 연결이 닫혔습니다.");
  });

  ws.on("error", (error) => {
    console.error("WebSocket 오류:", error);
  });
});

console.log("WebSocket 서버가 포트 8080에서 실행 중입니다.");

Client에서 Websocket 사용

localhost:8080에 websocket으로 연결하는 client를 생성합니다.

연결되면 open 이벤트가 수신되고 client socket의 send() 통해 “Hello Server!” 메시지를 전송합니다.

import WebSocket from "ws";

// WebSocket 클라이언트 생성
const socket = new WebSocket("ws://localhost:8080");

socket.on("open", () => {
  console.log("WebSocket 연결이 열렸습니다.");
  socket.send("Hello Server!");
});

socket.on("message", (data: WebSocket.Data) => {
  console.log("서버로부터 메시지를 받았습니다:", data.toString());
});

socket.on("close", () => {
  console.log("WebSocket 연결이 닫혔습니다.");
});

socket.on("error", (error) => {
  console.error("WebSocket 오류:", error);
});

결과 (Client)

WebSocket 연결이 열렸습니다.
서버로부터 메시지를 받았습니다: Hello Client!

결과(Server)

WebSocket 서버가 포트 8080에서 실행 중입니다.
클라이언트가 연결되었습니다.
클라이언트로부터 메시지를 받았습니다: Hello Server!

참고 링크

Leave a Comment

© 2024 Marketer • Built with GeneratePress
Privacy PolicyTermsContact