1. http

• 브라우저 or backend에 대해 서버가 response밖에 못함. 하나의 req가 가면 하나의 res가 오는 방식임. 서버가 유저나 backend로는 먼저 말을 걸거나 할 수 없음. 즉, stateless형태. 서버가 res를 하면 상대 유저가 누구인지 잊어버리고 다시 req를 기다리는 형태임.
  브라우저는 req만 가능하고, backend는 res만 가능한 형태임.

2. Websocket

• 서로 악수를 하는 것처럼 손을 잡는 형식임(연결된 것암) 연결이 되면 어느 때나 쌍방향으로 의사소통이 가능함(전화통화하는 것과 비슷함). 연결돼 있는 동안에는 유저를 기억함. 서버가 먼저 말을 걸 수 있는 protocol임.

• JS가 Websocket전용은 아니지만, 구현된 게 있어서 JS에서도 사용할 수 있음. 그리고 브라우저에는 Websocket API가 있음. 서버와 연결하기 위해 브라우저에서 Websocket을 써볼 것임.
  Websocket은 어느 프로그래밍언어에 국한되지 않음. 그저 protocol이기 때문.

nodeJS로 Websocket서버 만들기

기초 설명

• WS라는 패키지의 도움을 받을 것임. -> WS는 어떤 규칙을 따르는 코드라는 뜻임. nodeJS에서 Websocket의 핵심이 되는 패키지임. WS는 Websocket implimentation(구현)을 함.

• WS는 채팅방을 만들 수 없음. 채팅방은 Websocket protocol의 일부분이 아닌 그저 feature이기 때문.

• WS를 이용하여 채팅방이 아닌 'public채팅'을 만들건데, 어떻게 사용하고, WS를 사용하는 framework를 알려줄것임(framework에는 채팅방까지 만드는 기능이 있음.).
  WS는 완전 기초틀임. 기반이 되는 핵심 부분임.

-> 우리는 ws서버(websocket을 다룸)를 만드는 대신, express서버(http를 다룸)를 만들어서 함께 ws와 합칠 것임. 둘은 다른 protocol을 다루기 때문에 나중에 가서 한꺼번에 합칠 것임. express로 같은 서버에 ws기능을 설치할 것임.

WS 설명서

설치

npm i ws

실행

-> 우리가 여기서 할 건 같은 서버에서 http와 webSocket 둘 다 작동시키는 것임.(http://localhost:3000, ws://localhost:3000 둘 다에서 작동하도록하는것)
if http서버가 불필요할 경우 ws서버만 만들면됨 즉, 2번은 건너 뛰어도 됨.

- server.js에서

1. 여기의 express는 ws를 지원하지 않기 때문에 function을 추가해줘야함.

2. http서버 만들기. (정확히는 내 http 서버에 접근 가능하도록 만들기.)

• import http from "http"; #추가# -> nodeJS에 이미 설치돼 있어서 따로 설치X
• app.listen(3000, handleListen);//server만들기: babel, Nodemon, Express로 서버 만든 것임. #삭제#
• const server = http.createServer(app); #추가# -> 서버를 만들려면 requestListener경로가 있어야함. 그래서 안에 app(express)을 넣어준 것임. express는 req를 listen할 수 있기 때문에. 불필요해 보여도 webSocket을 하려면 꼭 필요한 부분임.
  이렇게 함으로써 서버를 만들고, 접근할 수 있게 됨. 이제 이 서버에 webSocket을 만들 수 있다는 말임.

3. Websocket server만들기.

• import WebSocket from "ws"; -> WS import해주기
• const wss = new WebSocket.Server({ server }) -> http서버 위에websocket서버 만들기. 겹겹히 만든 것임.
  -> 즉, Websocket(wss)가 http서버에 덮어씌여지면서 서버가 된 것임.

4. server listen해주기

• server.listen(3000,handleListen); #추가#

결론:
-> 이렇게 같은 서버에서 http, ws서버를 작동가능하도록 만들면, localhost(서버)는 같은 port(3000)에서 http,ws의 req 두개를 다 처리할 수 있음.
서버는 http, ws 두개의 protocol을 이해하게 됐음.

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("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));


const handleListen = () => console.log(`Listening on http://localhost:3000, ws://localhost:3000`);

const server = http.createServer(app);//server에 접근하도록 만들어 준 것임.
const wss = new WebSocket.Server({ server })//ws 서버 만들기.

server.listen(3000,handleListen);

Q) why http서버도 같이 만들어준 것일까?
A) http서버가 필요한 이유는, views, static files, home, redirection을 원하기 때문임.

3. 공통점

• 둘 다 browser-backend의 관계에서만 작동하는 것이 아닌, 2개의 백엔드 사이에서도 발동함
  backend-backend에서도 작동. 이 중 Websocket은 두 개의 real-time서버 사이에도 작동함.

• 둘 다 protocol임. protocol: 어떤 사람들이 어딘가에 있는 방에서 만나고 어떻게 일이 진행될지를 결정함. 즉, 어떻게 일이 진행될지 규칙을 정하고, 프로그래머는 규칙에 따라 코딩을 함.
  이 중 방 안의 표준이 되는 규칙인 protocol을 만듦.