웹소켓 구현해보기 1편 - 웹소켓의 정의와 웹소켓 서버 생성 (Web Socket with Node.js)

728x90

웹소켓의 정의

웹소켓(WebSocket)은 HTML5에서 소개된 통신 프로토콜로, 클라이언트와 서버(브라우저와 서버)를 연결하고 실시간으로 통신이 가능하도록 하는 프로토콜입니다.

http처럼 이것도 프로토콜(일종의 약속)이기 때문에, 특정 프로그래밍 언어에 국한되거나 하는 개념이 아닙니다..

우리가 http 프로토콜로 만든 웹을 http, https를 통해서 접근할 수 있는 것처럼, 웹소켓 프로토콜로 만든 웹은 ws, wss로 접근 가능하죠.

웹소켓의 탄생과 http의 한계

출처 : https://www.scaleway.com/en/blog/iot-hub-what-use-case-for-websockets/

웹소켓은 위의 사진에 나온 것처럼 http 프로토콜의 한계를 보완하기 위해 탄생했습니다..

http는 request를 보내면 response를 보내주는 걸 반복하는 방식이고, realtime으로 작동하지 않습니다.

또한, http는 stateless한 프로토콜이죠.(무상태).

HTTP가 stateless하다는 것은, 비유를 들자면 콜센터에 연결할 때 매번 새로운 상담원과 연결되는 느낌으로, 서버가 클라이언트의 상태를 저장하지 않는다는 의미입니다.

stateless한 프로토콜은 다음과 같은 특징을 지닙니다.

서버는 각 요청을 독립적으로 처리. 이전 요청에 대한 정보를 기억하지 않음.
클라이언트는 매 요청마다 필요한 모든 정보를 포함해야 함. 이전 상태에 대한 정보도 함께 전송해야 함
서버 측에서 클라이언트의 상태를 관리할 필요가 없어 서버 리소스를 효율적으로 사용할 수 있음.
서버의 확장성이 향상됨. 어떤 서버로도 요청을 처리할 수 있어 서버를 쉽게 증설할 수 있음.

물론, 쿠키, 세션, 토큰 등의 추가적인 메커니즘을 사용하여 상태를 관리하긴 하지만, 기본적으로는 stateless한 프로토콜이에요.

이에 반해, websocket은 request를 보내면 서버와 연결되고, 클라이언트가 누군지 기억할 수 있는 프로토콜입니다.

클라이언트로부터 request가 와야만 답하는 http와는 달리, websocket 프로토콜 하에서는 서버가 먼저 뭔가를 보낼 수도 있습죠. 누가 먼저 뭘 보내도 이상하지 않은, 양방향으로 전화통화를 하는 느낌이라고 생각하면 되겠습니다요.

Node.js 에서 웹소켓 서버 생성하기

node js 런타임에서 웹소켓을 구현하려면 먼저 npm i ws 명령어로 설치를 해줘야합니다.

그 다음, http 서버 객체를 만든 뒤 같은 서버에서 websocket 연결을 허용하도록 해줘봅시다.

기존에 http 서버를 만드려면, app.listen() 명령어로 실행이 가능했는데 이건 http 서버만 생성이 가능한 메서드니까 http.createServer 메서드로 http 서버 객체를 만들어 준 다음에 websocket 연결을 해줍시다.

단독으로 만들 수도 있지만, 보통은 두개를 같이 구현하는게 유연하고 효율적이니까요.(두개 다 할 수 있으니까)

//server.js
import express from "express";
import http from "http";
import { WebSocketServer } from "ws";
const app = express();
app.engine("pug", require("pug").__express); 
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => res.render("home"));
app.get("/*", (req, res) => res.redirect("/"));
const handleListen = () => console.log("listening to port 8000");
const server = http.createServer(app); //이건 http 서버
const wss = new WebSocketServer({ server }); //거기다가 websocket 얹기기
server.listen(8000, handleListen);


//views/home.pug
doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Hello!
    link(rel="stylesheet" href="https://unpkg.com/mvp.css")
  body 
    header
      h1 Hello!
    script(src="/public/js/app.js")
    
    
//public/js/app.js
const socket = new WebSocket(`ws://${window.location.host}`);

요렇게 말이죠. 이렇게 하면 8000번 포트는 웹소켓과 http 모두를 구현할 수 있게 됩니다.

이렇게 되면 ws / http 어떤 프로토콜로도 접근이 가능합니다.

웹소켓 구현해보기 1편은 여기까지입니다.

2편에서는 웹소켓을 이용해 클라이언트와 서버를 연결해보겠습니다.

감사합니다.