Chat

set-up

1. home.pug ㄲ, 다음과 같이 html 만들어 줌. ul에는 채팅을 채울 것임.

main 
     ul 
     form
         input(type="text", placeholder="Write a message", required)
         button Send Message
script(src="/public/js/app.js") 

make a chats

1. chat 보내기(front -> back)
   app.js로 ㄱㄱ, ul, form 가져오고, form submit이벤트 리슨해줌. 이 이벤트 callback함수의 기능은 input에 작성한 값을 백엔드로 보내줌.

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

function handleSubmit(event){
    event.preventDefault();
    const input = messageForm.querySelector("input");
    frontSocket.send(input.value);//input에 작성한 값을 백엔드(server.js에 있는 socket)로 보내줌.
    input.value="";
};

messageForm.addEventListener("submit",handleSubmit);

2. 받은 chat 다시 보내기(back -> front)
   server.js로 ㄲ,

wss.on("connection",(backSocket) => {
    console.log("Connected to Browser ✅");
    backSocket.on("close", () => console.log("Disconnected to the Brower ❌"));
    backSocket.on("message",(message) =>{
        backSocket.send(message.toString("utf-8"));
    });//browser로부터 온 메시지 똑같이 보내주기
});

-> 위의 코드를 봤을 때, 받은 메시지 똑같이 보내주는 부분에서, 만약 서버가 A라는 브라우저에게 메시지를 받으면 A브라우저에게 메시지에 답장하고, B라는 브라우저로부터 메시지를 받았다면 B라는 브라우저에 답장한다. 즉, wss.on("connection",fn) 이 함수는 브라우저가 연결될 때마다 실행됨.
그래서 실행되는 socket마다 그 연결된 브라우저가 다름.
위의 식으로 하는건 혼잣말 하는 것과 다름 없음. 나중에는 A라는 브라우저가 서버에 메시지를 보내면, 그 메시지를 서버와 연결돼 있는 B브라우저에게 전송하는 것을 할 것임. 그러기 위해서는 서버에 누가 연결돼 있는지 알아야 함. 따라서 우리는 fakeDB를 만들어 서버와 연결된 유저의 connection을 fakeDB에 저장할 것임.

connections(각 socket) 저장하기/ A브라우저 메시지 -> 서버 -> B브라우저 전송하기.

• server.js ㄱ ㄱ, fakeDB를 만들어 각 연결된 socket들을 fakeDB에 저장할 것임.
  fakeDB에 연결된 socket(브라우저-유저)넣어주고, fakeDB에 저장된 각 socket(브라우저)에다
  가 form에서 전송된 메시지를 보내줌.

const sockets = [];//fakeDB

wss.on("connection",(backSocket) => {
    sockets.push(backSocket);//fakeDB에 연결된 socket(브라우저-유저)넣어주기
    console.log("Connected to Browser ✅");
    backSocket.on("close", () => console.log("Disconnected to the Brower ❌"));
    backSocket.on("message",(message) =>{
        sockets.forEach((aSocket) => {aSocket.send(message.toString())});
    });//fakeDB에 저장된 각 socket(브라우저)에다가 form에서 전송된 메시지를 보내줌
});