WS를 이용한 back & frontend 연결

기초 설명

• WebSocket: 브라우저와 서버 사이의 연결. -> socket을 이용해 frontend와 backend가 실시간으로 소통할 수 있음. frontend가 back으로 메시지를 보내고, back이 답장해줄 수 있음.
  app.js - frontend socket이다.
  server.js의 wss socket - backend socket이다.
  socket: 전화기 같은 역할을 함. 즉 서로의 연락수단이라 생각하면 편함.

• websocket도 vanillaJS와 비슷함. 어떤 event를 실행하면 callback fn을 호출하는 형태임.

• websocket의 fn은 callback으로 socket을 받음. socket: 연결된 어떤 사람. 연결된 브라우저와의 연락(contact) 라인. socket을 이용하면 메시지 주고받기를 할 수 있음. 우리는 이 socket을 어딘가에ㅡ저장해야된다.

• on method: event가 발동하는 걸 기다림. 이 경우엔 connection임. event가 발동되면 callback fn도 작동함. backend에 연결된 사람의 정보를 제공해줌. 그게 socket에서 오는 것임. (socket은 나와 브라우저간의 연결임.)
  ->frontend와 backend가 연결돼 있어야 console에서 socket을 볼 수 있음.

server.js에 WS eventListener해주기 (backend socket에서는 on으로 eventListen함.)

• wss.on("connection",handleConnection); #추가# -> eventListener같은 역할임
• function handleConnection(socket){console.log(socket)}; #추가# -> callback함수임. 이 때 callback으로 socket을 받음.

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 서버 만들기, wss가 서버가 된 것이라 보면 편함.

wss.on("connection",(socket) => {
    console.log(socket);
}); // ws protocol 이 연결되면 fn을 실행시킨다는 eventListener임.

server.listen(3000,handleListen);

frontend socket 연결하기

• 사전 지식
  window.location.host: 현재 위치를 알려줌. - 즉, 우리 위치를 알려줌.: localhost:3000

in app.js

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

-> 이제 서버로 접속할 수 있음.
http://localhost:3000/로 접속하면 콘솔창에서 socket을 볼 수 있음.

중요 정보

• server.js와 app.js의 socket은 다른거다.
  -> server.js socket은 연결된 브라우저를 뜻함. backend socket,
  -> app.js socket은 서버로의 연결을 뜻함. frontend socket
• socket은 서로 상대방의 이벤트를 리슨한다.
  -> back socket(server)는 front socket(Browser)를,
  front socket(Browser)는 back socket(server)의 event를 리슨함.

WebSocket Messages(give & take 코드 필요)

기초 설명

메시지 보내기: socket.send(내용~)
메시지 받기: eventListener("message", fn)

backend -> frontend로 메시지 보냄

message give코드(back socket) -> eventListen을 on으로함.

• socket에 있는 메서드를 이용해,backend socket에서 브라우저에게 메시지 보내기.
  server.js에서
  다음처럼 wss.on 코드를 수정

wss.on("connection",(backSocket) => {// on: backend(server)의 eventListener임 -> 브라우저의 event에 귀 기울임
    console.log("Connected to Browser ✅");//연결되면 됐다고 콘솔창에 알림
  	backSocket.on("close", () => console.log("Disconnected to the Brower ❌"));//연결이 끊기면 알려주는 콘솔창
    backSocket.send("hello");//browser에게 message 보내기
});

message take코드(front socket) -> eventListen을 addEventListener로함.

• socket이 open됐을 때, 연결됐다고 콘솔창에 알리기.
• 메시지를 받으면 콘솔창에 메시지 출력하기

const frontSocket = new WebSocket(`ws://${window.location.host}`);
//server의 event에 귀 기울임.
frontSocket.addEventListener("open",() => {
    console.log("Connected to Server ✅");
});// socket이 열리면 연결됐다고 알리는 이벤트 리스너

frontSocket.addEventListener("message", (message) => {
    console.log("Just got this", message, " from the server");
});//server가 보낸 message를 받는 이벤트 리스너

frontSocket.addEventListener("close",() => {
    console.log("Disconnected to Server ❌");
});// socket연결이 끊기면 콘솔해주는 이벤트 리스너

-> loclhost:3000에서 새로고침 하고 콘솔창 확인하면 message이벤트에 대한 것이 주르륵 나옴.

vsCode 콘솔창 : backend socket - wss socket
localhost:3000 : frontend socket- app.js socket

-> 콘솔 창을 보고 난 뒤, app.js의 cosole창에 있는 message를 message.data로 바꿔줘야 이벤트가 아닌 메시지 내용을 받을 수 있다.

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

-> 서버를 끊으면 새로고침 없이, 바로 맨 밑의 disconnected콘솔 창이 뜬다. 즉, 신호가 즉각즉각 오간다는 걸 알 수 있다. 연결이 alive상태임.

양방향적인 연결

• 브라우저가 끊기면(창 닫기) 서버(vsCode)에 evet를 발생시켜 콘솔이 뜨고, 서버가 끊기면 event를 발생시켜 브라우저에 콘솔이 뜸.

frontend-> backend로 메시지 보냄

message give코드(front socket)

• in app.js에서 하기, 10초 뒤에 보내줄 것임.

setTimeout(() => {
    frontSocket.send("hello from the Browser");
},10000);

message take코드(back socket)

• in server.js에서 하기. wss.on("connection",fn) 의 fn 안에다가 적어줌.

backSocket.on("message",(message) =>{
        console.log(message.toString("utf-8"));
});

즉,

wss.on("connection",(backSocket) => {// on: backend(server)의 eventListener임 -> 브라우저의 event에 귀 기울임
    console.log("Connected to Browser ✅");
    backSocket.on("close", () => console.log("Disconnected to the Brower ❌"));//Browser 연결이 끊기면 알려주는 콘솔창
    backSocket.on("message",(message) =>{
        console.log(message.toString("utf-8"));
    });//browser로부터 온 메시지 받기
    backSocket.send("hello");//browser에 있는 frontend socket에 message보내기
});

Recap

• backend에서 서버를 만듦.

const wss = new WebSocket.Server({ server });//ws 서버 만들기, wss가 서버가 된 것이라 보면 편함.

• backend에서 frontend와 연결된 것을 이벤트리스너로 시각화 하기.
  connection에 귀 기울여서, 연결된 것을 시각적으로 알 수 있음. 또한 이렇게 이벤
  트 리슨을 해줘야 socket에 누가 연결된지 알 수 있음.(밑의 코드에서는 browser가
  socket에 연결됨.) 밑의 코드가 없어도 연결은 됨. 우리가 대답(반응)을 안했을
  뿐.

wss.on("connection",(backSocket) => {
    console.log("Connected to Browser ✅");
    backSocket.on("close", () => console.log("Disconnected to the Brower ❌"));
    backSocket.on("message",(message) =>{
        console.log(message.toString("utf-8"));
    });
    backSocket.send("hello");
});

• 각 socket은 연결되어 있는 상대방의 event를 리슨할 수 있음.
  -> backend - on으로 리슨
  -> frontend - addEventListener로 리슨

• backend에서 eventListen을 server(wss)가 아닌, backSocket에다가 한 이유: 이 이벤트 리스너는 백엔드와 연결된 브라우저를 위한 리스너임. wss는 서버를 위한 것임. 각 유저를 위한 것이 아니라.

• frontend에서 socket은 각 유저라 봐도 무방함. 왜냐면, 개개인마다 각자의 컴퓨터로 서버에 연결할 텐데, 그 각자의 브라우저(컴퓨터)마다 다른 socket을 가지기 때문. 따라서, backend에서도 server(wss)에서 이벤트를 리슨하지 않는 이유도 여기에 있음. 이용하여 frontend의 각 socket(유저)과 소통하기 위해 socket을 이용하여 이벤트를 리슨하는 것임.