DAY 2 #1.3 ~ 1.9

#1.3 WebSocket Events

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket

app.js

// 이 socket을 이용해서 frontend에서 backend로 메세지 전송 가능
// 여기 socket은 서버로의 연결로, window.location.host는 pc뿐만 아닌 모바일에서도 접속이 가능하게끔 해줌
// (http://localhost:3000이 아닌, 아예 기기의 host의 location으로 접속)
const socket = new WebSocket(`ws://${window.location.host}`);

webSocket 사용

- server : node.js 환경에서 ws와 같은 모듈을 이용해 webSocket server를 생성 (server.js)

=> server.js에서는 {WebsocketServer} 를 ws모듈로부터 import

- client(browser) : browser에 내장된 api를 이용해 webSocet 객체 우선 생성 (app.js)

=> app.js 에서는 node.js에 내장된 Websocket instance를 사용하면 되므로 import 필요 X

* server.js의 socket = 연결된 browser

* app.js의 socket = server로의 연결

#1.4 WebSocket Messages

webSocket도 js처럼 function과 event가 있으며, browser에서의 event는 click, submit, wifi on/off 등이 있다.

server.js

wss.on("connection", (socket)=>{
    console.log("Connected to Browser");
    socket.send("hello");
});

app.js

const socket = new WebSocket(`ws://${window.location.host}`);
// ---- 특정 이벤트 발생 시 실행되는 콜백 함수 ----
// 서버가 open(연결됨)일 때
socket.addEventListener("open", ()=>{
    console.log("Connected to Server");
})
// 메시지가 도착하면 메시지를 console에 출력
socket.addEventListener("message", (message)=>{
    console.log("Just got this : ", message.data, " from the server");
})
// 서버가 close(해제)일 때
socket.addEventListener("close", () =>{
    console.log("Disconnected from server");
})
// 10초 뒤 backend로 message 보냄
setTimeout(() => {
  socket.send("hello from the browser.");
}, 10000);

server.js의 socket.send(); 와 app.js의 socket.addEventListener("message"~~~ 가 연결되어 socket에 message 이벤트를 추가할 수 있다.

server.js 추가 수정

// on method에서는 event가 발동되는 것을 기다린다
// event가 connection / 뒤에 오는 함수는 event가 일어나면 작동
// 그리고 on method는 backend에 연결된 사람의 정보를 제공 - 그게 socket에서 옴
// 익명함수로 바꾸기
wss.on("connection", socket => { // 여기의 socket이라는 매개변수는 새로운 브라우저 (wss는 전체 서버, socket은 하나의 연결
    console.log("Connected to Browser ✅");
    socket.on("close", () => console.log("Disconnected to Server ❌")); // 서버를 끄면 동작
    socket.on("message", message => {
        const messageString = message.toString("utf8"); // 버퍼 형태로 전달되기 때문에 toString 메서드를 이용해서 utf8로 변환 필요
        console.log(messageString);
    }); // 프론트엔드로부터 메시지가 오면 콘솔에 출력
    socket.send("hello!!!"); // hello 메시지 보내기 - send는 socket의 전송용 메서드
}) // socket을 callback으로 받는다! webSocket은 서버와 브라우저 사이의 연결

#1.6 Chat Completed

home.pug

        main 
            //- ul : message list(js를 이용해 채워질 예정..)
            ul 
            form
                input(type="text", placeholder="write a msg", required)
                button Send

form : 메시지를 보내는 폼

ul : 메시지 리스트

app.js

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

function handleSumbit(event){
    event.preventDefault();
    const input = messageForm.querySelector("input");
    // input의 value의 값을 front-end의 form에서 back-end로 보냄
    socket.send(input.value);
    // input 값 초기화
    input.value = "";
}

messageForm.addEventListener("submit", handleSumbit);

아직까지는 브라우저와 서버가 단독적으로 소통할 뿐, 브라우저와 브라우저까지의 소통은 할 수 없는데, 때문에 아직 채팅의 기능을 제대로 하지 못하고 있다.

server.js

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

// 누군가 우리 서버에 연결되었을 때 connection을 담을 변수.
const sockets = [];

wss.on("connection", (socket) => {
  sockets.push(socket);
  socket.on("close", onSocketClose);
  socket.on("message", (message) => {
    const messageString = message.toString("utf8");
    // 연결된 모든 socket에 message를 전달한다.
    sockets.forEach((aSocket) => aSocket.send(messageString));
  });
});

socket은 브라우저의 매개변수이며 만약 chrome으로 접속했다면 sockets에 chrome이 push될 것이고, 이제 메시지를 보낸다면 모든 socket에 메시지가 전달 될 것이다.

#1.7~1.8 Nicknames

app.js

// browser에 li 태그를 만들어 그 안에 메시지를 넣고, 그 li태그를 ul의 자식으로 넣는다.
socket.addEventListener("message", (message) => {
  const li = document.createElement("li");
  li.innerText = message.data;
  messageList.append(li);
});

지금의 코드는 브라우저끼리 서로 연결된 상태라도 채팅으로 어느 브라우저에서 어떤 채팅을 보냈는지도 알 수 없는 상태다. 때문에 닉네임 form을 하나 만들고, 닉네임 등록을 할 것이다.

그러나 back-end는 이 message들을 구별할 수 없다. 이게 닉네임을 등록하기 위한 message인지 chat을 하는 message인지 구별하기 위해 message type을 만들어 줄 것이고, 그래서 form 태그에 id를 부여해준다.

home.pug

main 
    form#nick
        input(type="text", placeholder="choose a nickname", required)
        button Save
    ul 
    form#message
        input(type="text", placeholder="write a msg", required)
        button Send

그리고 서버가 각 message의 type을 구분할 수 있도록 JSON 형식을 사용할 건데, 서버는 String 값만 받아들이므로 JSON.stringfy를 사용해 string 값으로 바꿔준다.

변환하지 않으면 javascript object 형태로 출력되는데, 이를 string 값으로 변환하는 이유 중 다른 하나는

지금 실습에서는 js를 이용하지만 접속할 누군가는 go를 이용할 수도 있고, java를 이용할 수도 있기 때문에 string 형태로 변환해 모든 언어에 대비하기 위해서이기도 하다.

app.js

const messageList = document.querySelector("ul");
const messageForm = document.querySelector("#message");
const nickForm = document.querySelector("#nick");
const socket = new WebSocket(`ws://${window.location.host}`);

// --- 생략 ---

// JSON을 string으로 바꿔주는 함수
function makeMessage(type, payload) {
  const msg = { type, payload };
  return JSON.stringify(msg);
}

function handleNickSubmit(event){
  event.preventDefault();
  const input = nickForm.querySelector("input");
  socket.send(input.value);
  input.value = "";
}

messageForm.addEventListener("submit", handleSumbit);
nickForm.addEventListener("submit", handleNickSubmit);

이제 서버로 돌아와서,

서버에서는 받아온 String 형태의 메시지를 다시 JSON 형태로 바꾸고, 키 값에 따라 다르게 동작하도록 만들어야 한다.

server.js

wss.on("connection", (socket) => {
// --- 생략 ---
  socket.on("message", (message) => {
    const messageString = message.toString("utf8");
    const parsed = JSON.parse(messageString);
    console.log(parsed, messageString)
    sockets.forEach((aSocket) => aSocket.send(messageString));
  });
});

실제로 위 코드대로 parsed한 message와 안한 message를 비교했을 때, 아래와 같은 차이를 발견할 수 있다. 게다가 실제로 우리가 화면에 보여주고 싶은 것은 parsed.payload인 것도 확인할 수 있었다.

wss.on("connection", (socket) => {
  sockets.push(socket);
  socket["nickname"] = "Anonymous"; // 익명 소켓인 경우 처리 - 맨 처음 닉네임은 Anonymous
  console.log("Connected to Browser ✅");
  socket.on("close", onSocketClose);
  socket.on("message", (msg) => {
  	// parse 할 경우 글자가 제대로 잘 나와서 아래의 과정이 필요 없게 됨... 
    // const msgString = msg.toString("utf8");
    // const message = JSON.parse(msgString); 
	const message = JSON.parse(msg);
    // new_message일 때 모든 브라우저에 payload를 전송
    // 받아온 String 형태의 메시지를 parse로 파싱한 후 구분해서 출력
    switch(message.type){
      case "new_message":
        sockets.forEach((aSocket) => aSocket.send(`${socket.nickname}: ${message.payload}`));
        break;
      case "nickname":
       // socket은 기본적으로 객체라 새로운 아이템 추가 가능. 
       // 닉네임을 socket 프로퍼티에 저장했다.
        socket["nickname"] = message.payload;
        break;
    }
  });
});

새로운 닉네임으로 고쳐서 save를 누르면, 닉네임도 변경할 수 있게 된다.

완성된 코드

server.js

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`);

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

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

// 누군가 우리 서버에 연결 됐을 때, sockets에 담겨진다.
const sockets = [];

wss.on("connection", (socket) => {
  sockets.push(socket);
  socket["nickname"] = "Anon"; // 닉네임을 정하지 않은 사람들을 위함
  console.log("Connected to Browser ✅");
  socket.on("close", onSocketClose);
  socket.on("message", (msg) => {
    const message = JSON.parse(msg);
    switch (message.type) {
      case "new_message":
        sockets.forEach((aSocket) =>
          aSocket.send(`${socket.nickname}: ${message.payload}`)
        );
        break;
      case "nickname":
        socket["nickname"] = message.payload;
    }
  });
});

server.listen(3000, handleListen);

app.js

const messageList = document.querySelector("ul");
const messageForm = document.querySelector("#message");
const nickForm = document.querySelector("#nick");
const socket = new WebSocket(`ws://${window.location.host}`);

function makeMessage(type, payload) {
  const msg = { type, payload };
  return JSON.stringify(msg);
}

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

socket.addEventListener("message", (message) => {
  const li = document.createElement("li");
  li.innerText = message.data;
  messageList.append(li);
});

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

function handleSubmit(event) {
  event.preventDefault();
  const input = messageForm.querySelector("input");
  socket.send(makeMessage("new_message", input.value));
  input.value = "";
}

function handleNickSubmit(event) {
  event.preventDefault();
  const input = nickForm.querySelector("input");
  socket.send(makeMessage("nickname", input.value));
  input.value = "";
}

messageForm.addEventListener("submit", handleSubmit);
nickForm.addEventListener("submit", handleNickSubmit);

home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
        //- mvp.css 사용
        link(rel="stylesheet", href="https://unpkg.com/mvp.css") 
    body 
        header 
            h1 Noom 
        main 
            form#nick
                input(type="text", placeholder="choose a nickname", required)
                button Save
            ul 
            form#message
                input(type="text", placeholder="write a msg", required)
                button Send
        script(src="/public/js/app.js")

'javascript > 줌 클론코딩' 카테고리의 다른 글

DAY 3 #2.0 ~ #2.3 (0)	2023.02.24
DAY 1 #0.2 ~ #1.2 (0)	2023.02.21

hykim

DAY 2 #1.3 ~ 1.9

#1.3 WebSocket Events

#1.4 WebSocket Messages

#1.6 Chat Completed

#1.7~1.8 Nicknames

'javascript > 줌 클론코딩' 카테고리의 다른 글

티스토리툴바

DAY 2 #1.3 ~ 1.9

#1.3 WebSocket Events

#1.4 WebSocket Messages

#1.6 Chat Completed

#1.7~1.8 Nicknames

'javascript > 줌 클론코딩' 카테고리의 다른 글

'javascript/줌 클론코딩' Related Articles

티스토리툴바