[프로토콜] HTTP vs WebSocket

• http는 stateless로 client로부터 request가 있어야 서버가 response 할 수 있다.
• WebSocket은 한번 연결되면 서버가 client를 기억하기 때문에 양방향 데이터 전송&응답이 가능하다.
• 브라우저에는 내장된 webSocket API가 있다.
• http와 WebSocket 모두 client-backend(server) / backend-backend 간의 연결을 지원한다.

socket

: 서버와 연결된 브라우저의 contact(연락) 라인. 혹은 연결된 어떤 사람.

서버 생성 및 Front-Back 연결

설치

npm i ws

Server.js

import http from "http";
import WebSocket from "ws";

const app = express();

const server = http.createServer(app);
//http 서버 생성
const wss = new WebSocket.Server({server});
//같은 서버에서 http, ws를 동시에 돌림

const sockets=[];
//어느 브라우저들이 연결하고 있는지를 저장하기 위한 배열

wss.on("connection",(socket)=>{ //서버가 연결
	sockets.push(socket);
	socket.on("message", (message)=>
		{sockets.forEach((aSocket)=>
			aSocket.send(message))};
}

server.listen(3000, handleListen);

App.js

const socket = new WebSocket(`ws://${window.location.host}`);

socket.addEventListener(“open”, ()=> {}); //연결됐을 때
socket.addEventListner(“message”, (message) => {
	const li = document.createElement(“li);
	li.innerText = message.data;
	messageList.append(li);
	});