노마드코더 줌 클론 코딩 주소
사용한 github주소

1-1 http vs websockets

둘 다 프로토콜(protocol)

브라우저와 backend사이에서만 http와 websocket을 사용하는 것이 아님

• real-time으로 소통하는 2개의 서버 사이에서도 사용, 작용!

http

https://nomadcoders.co

1. 모든 서버들이 작동하는 방식, 인터넷 전체가 http를 기반으로 만들어져 있음.
2. 유저가 req보내면 서버가 res 반응

• 유저가 app.get으로 req보냈을때 서버는 templates를 반응하도록

3. stateless, backend 즉 서버가 유저를 기억하지 못함. 유저와 backend 사이에 아무런 연결이 없음.

• 그렇기 때문에 유저가 누군지 쿠키를 통해 유저정보를 전달해서 서버가 일치하는 profile로 response를 주게 됨.

4. 실시간 real-time이 아니다.

• 유저가 request를 보내야 response를 해주고
• 서버는 유저에게 먼저 무엇도 줄 수 없기 때문

websocket

wss://nomadcoders.co

• 지원하는 브라우저만 사용가능

1. websocket 연결이 일어날 때는 handshake

• 브라우저가 서버로 websocket request를 보내면, 서버가 받거나 거절함.
• 만약 서버가 응답하면 연결이 성립되어서 브라우저든 서버든 서버가 유저를 기억하게 됨.
• 또한 서버가 유저에게 메세지를 보낼 수도 있게 됨.

1-2 websockets in NodeJS

ws

클라이언트와 서버 사이의 websocket실행에서 검증된 ws라는 패키지를 사용할 것!

npm i ws

/src/server.js

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

const app = express();

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

// 서버 생성(http)
const server = http.createServer(app);
// websocket 서버 생성(http서버를 이용한) => http/ws 둘 다 사용가능
// websocket.server는 객체를 전달인자로 받아주는데
// {server, port}에서 포트를 생략해주면 http와 같은 port를 사용함!
const wss = new WebSocket.Server({ server });

server.listen(3000, handleListen);

/src/public/js/app.js

//front에서 back으로 연결할때
const socket = new WebSocket(`ws://${window.location.host}`);

이렇게 프론트와 백을 ws로 연결

1-3,4 Websocket event & message

백과 프론트 서로가 서로에게 메세지를 보내고 받을 수 있게 코드구성

/src/server.js

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

const app = express();

//뷰 엔진 설정과 express에 template 지정
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
//public url 생성해서 유저에게 파일 공유
app.use("/public", express.static(__dirname + "/public"));
//home.pug를 render
app.get("/", (req, res) => res.render("home"));
//페이지 홈만 쓸거라서
app.get("/*", (req, res) => res.redirect("/"));

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

// 서버 생성(http)
const server = http.createServer(app);
// websocket 서버 생성(http서버를 이용한) => http/ws 둘 다 사용가능
// websocket.server는 객체를 전달인자로 받아주는데
// {server, port}에서 포트를 생략해주면 http와 같은 port를 사용함!
const wss = new WebSocket.Server({ server });

function onSocketClose() {
  console.log("Disonnected from the Browser ❌");
}

// function onSocketMessage(message) {
//   //스트링으로 변환 안해주면 이상한 코드가 나옴
//   console.log(message.toString("utf8"));
// }

// websocket작동
// wss는 서버전체, socket은 브라우저 하나대상
wss.on("connection", (socket) => {
  console.log("Connected to Browser");
  //브라우저가 닫혔을때
  socket.on("close", onSocketClose);
  // 브라우저가 서버에 메세지 보냈을때 다시 그 값을 브라우저에 보내주기
  socket.on("message", (message) => {
    const messageString = message.toString("utf8");
    socket.send(messageString);
  });
});

server.listen(3000, handleListen);

/src/public/js/app.js

const messageList = document.querySelector("ul");
const messageForm = document.querySelector("form");

//front에서 back으로 연결할때
const socket = new WebSocket(`ws://${window.location.host}`);

//소켓이 연결되었으면 프론트의 console에
socket.addEventListener("open", () => {
  console.log("Connected to Server ✅");
});
// 소켓에 메세지가 들어오면
socket.addEventListener("message", (message) => {
  console.log("New message:", message.data);
});
// 연결이 끊겼을때
socket.addEventListener("close", () => {
  console.log("Disonnected from Server ❌");
});

// // 서버에 메세지 보내주기
// setTimeout(() => {
//   socket.send("hello from the browser");
// }, 10000);

//프론트엔드에서 백엔드 그러니까 서버로 값을 보내주기
function handleSubmit(event) {
  event.preventDefault();
  const input = messageForm.querySelector("input");
  socket.send(input.value);
  // 보내줬으니까 비워주기
  input.value = "";
}

messageForm.addEventListener("submit", handleSubmit);

1-6 simple chat

연결되어있는 socket을 저장할 fake db를 만들어주고 거기에 저장한 모든 socket에게 메세지를 보내주면 간단하게 구현가능하다!

/src/server.js

//fake db
const sockets = [];

// websocket작동
// wss는 서버전체, socket은 브라우저 하나대상
wss.on("connection", (socket) => {
  //연결되는 socket을 db에 저장
  sockets.push(socket);
  console.log("Connected to Browser");
  //브라우저가 닫혔을때
  socket.on("close", onSocketClose);
  // 브라우저가 서버에 메세지 보냈을때 다시 그 값을 브라우저에 보내주기
  socket.on("message", (message) => {
    const messageString = message.toString("utf8");
    // 각각의 연결된 소켓 모두에게 메세지 전달(보낸 나도 포함)
    sockets.forEach((aSocket) => aSocket.send(messageString));
  });
});