[Network] Websockets

HTTP

=>stateless
request와 response로 이루어짐. 유저가 서버에 request를 보내면 서버가 응답하는 방식

Websockets

=> protocol
유저가 Websocket request를 보내면 서버가 websocket accept를 하거나 거절을 한다.
accept를 하게 된다면 connect가 되어서 그 다음부턴 bi-directional connection이 된다. 서버와 유저가 어느 때든 주고받을 수 있음

---

WS

ws는 Node.js의 웹소켓 라이브러리이다.

server.js setup

import express from "express";
import { WebSocketServer } from "ws";
import http from "http";
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); //http server
const wss = new WebSocketServer({ server }); //websocket server
server.listen(3000, handleListen);

http 서버와 wss 서버를 동시에 구동하게 해 주었다.

function handleConnection(){
    console.log(socket)
}
wss.on("connection",handleConnection);

처럼 사용한다. wss.on("이벤트",함수);
이 방법은 좀 혼란스러움.

---

server.js

function handleConnection(socket) {
  console.log(socket);
}

여기서의 socket은 연결된 브라우저를 의미

app.js

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

서버로의 연결을 뜻함

app.js

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

socket.addEventListener("open", () => {
  console.log("connected to Server");
});

socket.addEventListener("message", (message) => {
  console.log("Just got this", message.data, "from the server");
});

socket.addEventListener("close", () => {
  console.log("disconnected from Server");
});

socket에 eventLinstener를 적용

---

여러 개의 브라우저에서 서로 연결되게 하는 법
server.js

const sockets = [];

wss.on("connection", (socket) => {
  sockets.push(socket);
  console.log("connected to Browser");
  socket.on("close", () => {
    console.log("disconnected from Browser");
  });
  socket.on("message", (message) => {
    sockets.forEach((aSocket) => {
      aSocket.send(message.toString("utf-8"));
    });
  });
});

sockets 배열에 socket들을 넣어준다.
아.. 어렵다 ... ㅠ