노마드코더 줌 클론코딩 - #2.5 Room Message

#2.5 Room Message

방에 처음 들어갔을 때 그 방 모든 사람들에게 메세지를 전송해보자. 

line 29 와 같이 backend 쪽에 코드를 추가한다. 

//server.js

import http from "http";
import SocketIO from "socket.io"
import WebSocket from "ws";
import express from "express";

const app = express();

//set the view
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public")); //user가 public 으로 이동하면 __dirname+/public 폴더를 보여주는 것. 
app.get("/", (req, res) => res.render("home"));//render 
app.get("/*", (req, res) => res.redirect("/"));

const handleListen = () => console.log('Listening on http://localhost:3000');
//app.listen(3000, handleListen);

//http의 서버
const httpServer = http.createServer(app); //app은 requestListener 의 경로. express application으로부터 서버 생성. 
const wsServer  = SocketIO(httpServer);

wsServer.on("connection", (socket) => {
    socket.onAny((event) => {   //socket 에 있는 모든 이벤트 모니터링 가능
        console.log(`Socket Event: ${event}`);
    });
    socket.on("enter_room", (roomName, done) => {
        socket.join(roomName);
        done();
        socket.to(roomName).emit("welcome");    //모든 사람에게 welcome 이벤트 Emit
    });
});

참고) socket.to

io.on("connection", (socket) => {

  // to one room
  socket.to("others").emit("an event", { some: "data" });

  // to multiple rooms
  socket.to("room1").to("room2").emit("hello");

  // or with an array
  socket.to(["room1", "room2"]).emit("hello");

  // a private message to another socket
  socket.to(/* another socket id */).emit("hey");

  // WARNING: `socket.to(socket.id).emit()` will NOT work
  // Please use `io.to(socket.id).emit()` instead.
});

 

//server.js

backend 에 Line 29와 같이 작성한다.

해당 내용은 같은 roomName을 가진 room 에 있는 socket 들 중 나를 제외한 모든 socket 에 "welcome" 이벤트를 emit 하는 것이다.

backend 에서 보낸 "welcome" 이벤트를 front 에서 받아보자.

//app.js

line 33-35에 "welcome" 이벤트에 대한 액션을 취한다.

액션을 위해 10~15에 addMessage 메소드를 작성한다. 

"Someone Joined!" 라는 message 를 li 에 담고,

그 message 들을 append 함으로써 계속 아래로 달리게 한다. 

const socket = io();

const welcome = document.getElementById("welcome");
const form = welcome.querySelector("form");
const room = document.getElementById("room");

room.hidden = true;
let roomName;

function addMessage(message){
    const ul = room.querySelector("ul");
    const li = document.createElement("li");
    li.innerText = message;
    ul.appendChild(li);
}

function showRoom(){
    welcome.hidden = true;
    room.hidden = false;
    const h3 = room.querySelector("h3");
    h3.innerText = `Room ${roomName}`;
}

function handleRoomSubmit(event){
    event.preventDefault();
    const input = form.querySelector("input");
    socket.emit("enter_room", input.value, showRoom);
    roomName = input.value;
    input.value = "";
}
form.addEventListener("submit", handleRoomSubmit);

socket.on("welcome", () => {
    addMessage("Someone Joined!");  
})

 

실행해보자.

왼쪽에서 My Room1 이라는 방을 생성한다. 왼쪽은 방에 들어가진 모습이다. 

이제 오른쪽에서 생성한 방인 My Room1 에 들어가보자.

들어가는 순간 왼쪽에 Someone Joined! 라는 메세지가 출력된다. (오른쪽은 방에 새로 들어간 본인이라 출력 안됨 )

 

 

크롬 시크릿 창을 두개 더 띄워서 테스트 해본 화면이다.

동일하게 본인을 제외하고 메세지가 출력됨을 확인할 수 있다.