본 포스팅은 노마드코더 - 줌 클론코딩 강의를 듣고 작성되었습니다.
npm run dev //서버 실행
WebSocket
실시간 chat, notification과 같은 real-time 제작 가능
http & WebSocket은 모두 protocol이라는 공통점을 有
http에 대해서
- 인터넷 전체는 http를 사용
ex) https://nomads.co - stateless 하다는 특징을 有
∴ backend가 유저를 기억하지 X
(request 와 response의 과정 후에, backend는 유저를 잊어버림) - ex) 로그인 후, profile-page를 보고싶다면, request 시, 본인정보를 담은 cookie를 함께 request에 보내야함. -> 그러면 서버가 일치하는 profile로 response를 주는 것.
- 서버는 오직 request를 받을떄만 response를 보냄
∴ 서버는 갑자기 불쑥 브라우저(유저)에게 대화걸 수 X
WebSockets에 대해서
- WSS (Secure Web Socket)을 사용
ex) ws://nomands.co - webSocket 연결이 일어날 때는 마치 악수처럼 작동
1. 브라우저가 서버로 webSocket request를 보내면, 서버가 받거나 거절하기를 진행
2. 악수가 한번 성립되면(accpet), 연결은 성립(establish)되는 것
∴ 브라우저 & 서버가 서로 커뮤니케이션을 진행하는 것 - 연결되어있기 때문에, 서버는 user를 기억할 수 有
- 연결되어있기 때문에, 원한다면 서버가 user에게 메세지 보내기 有
∴ request, response 과정이 필요하지 X
∴ bi-directional(양방향의) 연결
WS
express는 http를 사용 BUT WS는 websocket을 사용
∴ express 서버와 같은 서버에 ws기능을 설치할것
다음과 같이 server.js를 작성함으로써 서버를 구축한다.
import http from "http";
import WebSocket from "ws";
import express from "express";
const app = 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 on http://localhost:3000");
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
이렇게 함으로써, localhost:3000이라는 같은 port에서 http 서버 & webSocket 서버를 모두 사용 가능! (동일 포트에서 http, ws request 두 개 모두 처리 가능)
∴ http 서버에 access하게 한 뒤, http 서버 위에 webSocket 서버를 만든것
