WebSocket이란?

웹소켓은 양방향 통신을 가능하게 하는 컴퓨터 통신 프로토콜이다.

  1. 소켓이란?

    • socket : 연결된 사람과 서버 사이의 연결
    • 소켓이 연결된 상태에서 양방향 통신이 발생
  2. ws프로토콜

    • http://가 아닌 ws://로 접속해야 함 → http가 아닌 별도의 프로토콜
    💡 프로토콜 : 데이터 교환 방식에 관한 규범, 규칙 → 코딩은 이 규칙 안에서 이루어진다
    • http는 상태를 갖지 않지만(무상태성, stateless) ws는 갖기 때문에 서버가 유저에게 메시지를 보낼 수 있음
    • 서버와 서버 간 통신에도 사용 가능함
  3. ws라이브러리

    • WebSocket을 위한 라이브러리 websocket의 core, 기반
    • 브라우저에는 내장된 Websocket API가 있음
    • js의 addEventListener와 같이 작동
      • event가 있고 그때 작동할 함수를 넣어줌으로써 실행됨

      • 서버 사용 예시

        //Node.js with Express.js
        import WebSocket from "ws";
        import express from "express";
        
        const app = express();
        const server = http.createServer(app);
        const wss = new WebSocket.Server({ server });
      • 클라이언트 사용 예시

        //vanilla javascript
        const socket = new WebSocket("ws://서버url");
        
        //소켓이 열렸을 때(open) 콜백을 실행
        socket.addEventListener("open", () => {
          console.log("Connected to Server");
        });
        
        //서버에서 메시지를 받았을 때 콜백을 실행
        socket.addEventListener("message", (message) => {
          console.log(message.data);
        });
        
        //소켓이 닫혔을 때(close) 콜백을 실행
        socket.addEventListener("close", () => {
          console.log("Closed");
        });
      • 사용시 유의사항

        • 데이터를 주고 받을 때 text만 전송 가능
          • text를 전송하는 이유 : 서버와 클라이언트의 언어가 다를 수 있기 때문
  4. socket.io?

    • socket io : 탄력성이 뛰어남
    • socket.io는 Websocket을 사용하기 위한 프레임워크가 아닌, 양방향 소통의 한 방법으로 Websocket을 쓰는 것
      • Websocket사용이 불가능할 경우 다른 방법을 사용함
      • Websocket과 함께 쓸 수 없음 → 서버에서 Socket.io를 쓸 경우, 클라이언트에서도 Socket.io를 써야함

좋은 웹페이지 즐겨찾기