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를 써야함