[포스코x코딩온] WebSocket의 기본

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기

[포스코x코딩온] WebSocket의 기본

항상 발전하는 개발자 2023. 8. 28. 20:12

728x90

WebSocket

WebSocket을 하기에 앞서 기본 지식을 알아두면 좋다.

2023.08.28 - [개념 정리] - TCP/IP , OSI 7계층, 소켓, 소켓 프로그래밍 정리

TCP/IP , OSI 7계층, 소켓, 소켓 프로그래밍 정리

TCP/IP TCP/IP는 컴퓨터 네트워크에서 데이터 통신을 위한 프로토콜 스택으로, 네트워크 간의 데이터 교환을 가능하게 하는 중요한 기술 데이터를 분할하여 보냄 정확한 전송을 보장하며 데이터의

dongho-kang.tistory.com

WebSocket이란?

양방햔 소통을 위한 프로토콜(약속)이다.

HTML5 웹 표준 기술
빠르게 작동하며 통신할 때, 아주 적은 데이터를 이용한다.
이벤트를 단순히 듣고, 보내는 것만 가능하다.
Handshake: 클라이언트가 서버로 웹소켓 연결을 요청할 때, 서버와 클라이언트 간에 초기 핸드셰이크가 이루어지며 이 과정을 통해 웹소켓을 연결한다.
클라이언트 측에서는 브라우저의 WebSocket 객체를 사용하여 웹소켓 연결을 생성하고 관리한다.

이벤트

open: 웹소켓 연결이 성공적으로 열렸을 때 발생
message: 웹소켓을 통해 데이터를 주고받을 때 발생
error: 웹소켓 연결 중 오류가 발생했을 때 발생. 연결 실패, 통신 오류 등이 해당
close: 웹소켓 연결이 종료되었을 때 발생

클라이언트

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const socket = new WebSocket("ws://localhost:8000");
      //서버에 연결
      socket.addEventListener("open", (event) => {
        console.log("서버에 연결되었습니다.");
        socket.send("메세지가 간다.");
      });
      //메세지 주고 받기
      socket.addEventListener("message", (event) => {
        console.log(event);
        console.log(`서버로부터 받은 메시지: ${event.data}`);
      });
      //오류 처리
      socket.addEventListener("error", (event) => {
        console.log(`오류가 발생하였습니다.`, event.console.error);
      });
      //종료
      socket.addEventListener("close", (event) => {
        console.log("서버와 연결이 종료됨");
      });
    </script>
  </body>
</html>

백엔드

브라우저 환경에서는 WebSocket API를 사용하여 웹소켓 클라이언트를 만들 수 있지만, 서버를 만들려면 별도의 라이브러리나 모듈이 필요하다.

npm install ws

ws - npm (npmjs.com)

Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js. Latest version: 8.13.0, last published: 6 months ago. Start using ws in your project by running `npm i ws`. There are 16092 other projects in the npm registry using

www.npmjs.com

ws 모듈 이벤트

connection : 클라이언트가 웹소켓 서버에 연결되었을 때 발생. 이 이벤트의 콜백 함수는 새로운 클라이언트 연결마다 실행
message 이벤트: 클라이언트로부터 메시지를 받았을 때 발생
error 이벤트: 웹소켓 연결 중 오류가 발생했을 때 발생
close 이벤트: 클라이언트와의 연결이 종료되었을 때 발생

const ws = require("ws"); //websocket 불러옴..
const PORT = 8000;

//웹소켓 서버 접속
const wss = new ws.Server({ port: PORT }); //서버 연결

wss.on("connection", (socket) => {
  //socket변수: 접속한 브라우저를 의미
  console.log("클라이언트가 연결되었습니다.");

  //클라이언트에서 메시지 수신
  socket.on("message", (message) => {
    console.log(`클라이언트로부터 받은 메시지: ${message} `);

    //클라이언트로 응답 메시지 전송
    socket.send(`서버에서 받은 받은 메시지: ${message}`);
  });

  //오류 처리
  socket.on("error", (error) => {
    console.error("오류가 발생했습니다.", error);
  });

  //접속 종료
  socket.on("close", () => {
    console.log("클라이언트와 연결이 종료되었습니다.");
  });
});

연결 결과 확인

그렇다면 이렇게 웹소켓을 사용하는 이유는 뭘까?

실시간 통신: 웹소켓은 클라이언트와 서버 간에 지속적인 연결을 제공하여 실시간으로 데이터를 주고받을 수 있어서 이를 통해 실시간 채팅, 실시간 게임, 주식 시장과 같은 실시간 업데이트가 필요한 곳에서 사용할 수 있다.
낮은 지연: 웹소켓은 HTTP와 달리 연결을 유지하면서 데이터를 전송하기 때문에, 매번 새로운 연결을 만들어야 하는 HTTP와 비교하여 데이터 교환의 지연이 줄어든다. 이는 사용자 경험을 향상시키고 서버와의 효율적인 통신을 가능하게 한다.
서버 푸시: 웹소켓을 사용하면 서버에서 클라이언트롤 데이터를 푸시(PUSH)할 수 있다. 이는 클라이언트가 서버에 직접 요청하지 않아도 서버가 변경된 정보를 보낼 수 있다. 이를 통해 실시간 업데이트가 필요한 알림이나 알람을 구현할 수 있다.
효율적인 통신: HTTP 프로토콜은 매 요청마다 헤저 정보가 추가되어 오버헤드가 발생하지만, 웹소켓은 한 번의 연결로 계속해서 데이터를 주고받을 수 있어 오버헤드가 적다.
양방향 통신: 웹소켓은 클라이언트와 서버 간의 양방향 통신을 지원한다. 따라서 클라이언트와 서버 간에 상호작용이 필요한 기능에 유용하게 사용할 수 있다.

이러한 이유로 웹소켓을 사용할 수 있다고 한다.

그러면 다음글에서는 웹소켓을 사용하여 간단한 채팅 기능을 구현해 보겠다.

728x90