5. 알림

떠나는 걸 알림

 

SocketIO에는 당연히 우리가 명명한 이벤트 말고도, 다양한 이벤트가 있다.

 

그 중 하나가 disconnecting

이거는 disconnect와 다르다.

말 그대로 연결을 끊는 '중'이다.

 

그러니까 왜, 완전히 끊어버리면 뭔갈 못하니까,

완전히 끊기 전에 하고 싶은 거 날리는 그런 거다.

 

io.on("connection", socket =>{
  socket.on("disconnecting", ()=>{
    socket.rooms.forEach(room => socket.to(room).emit("bye"));
  })
})

추가로 등록해 줬다.

socket이 연결을 끊고 있을 때,

그 소켓이 가입했던 모든 방에다가 "bye"라는 이벤트를 날린다.

 

그러면, 

socket.on("bye",()=>{
  addChatToUl("Someone leave.");
})

그냥 간단히 그 이벤트 받으면,

function addChatToUl(msg){
  const $li = document.createElement("li");
  $li.textContent = msg;
  $roomUl.append($li);
}

떠났다고 메시지 추가하게끔 했다.

 

 

 

 

이제 본격적으로 메시지 주고 받는 걸 추가해 보자.

const enterRoom = (roomName)=>{
  $welcome.style.display = 'none';
  $room.style.display = 'block';
  const $roomTitle = $room.querySelector("h3");
  $roomTitle.textContent = `Room ${roomName}`;

  addChatToUl(`${roomName}에 입장하셨습니다.`);
  $roomForm.addEventListener("submit", (e)=>{
    e.preventDefault();

    const $input = $roomForm.querySelector("input");
    socket.emit("new_message", $input.value, roomName);
    addChatToUl(`You: ${$input.value}`);
    $input.value = "";
  })
}

방 입장 시 추가적으로 이벤트를 추가시키도록 했다.

서버에 new_message라는 이벤트를 보내는 것 이다.

거기에 내가 input에 친 값과, roomName을 같이 보낸다.

roomName을 보내는 이유는 저번 room에 대해 이야기 할 때, 한 소켓은 여러 room을 가질 수 있으며, 또 id와 이름이 똑같은 private room도 가질 수 있다. 그래서 어떤 방인지 특정해 주기 위해 방이름도 같이 보냈다.

전송하면 서버쪽에서 소켓에서 이벤트를 보낼 때 나한테는 빼고 보내니까 그냥 바로 addChat 해서 문서에 추가했다.

그리고 input을 비워줬다.

 

io.on("connection", socket =>{
  socket.on("new_message",(msg, roomName)=>{
    socket.to(roomName).emit("new_message",msg);
  })
})

서버쪽도 간단하다. 그냥 new_message 이벤트를 추가시켜줬다.

콜백 인자로는 우리가 보낸 msg와 방이름을 받는다.

 

그걸 그대로 방이름에 입장해있는 소켓들에게 

new_message라는 이벤트를 메시지와 함께 보낸다.

 

이제 클라이언트쪽에서 new_message 보내는 것만 말고 받는 것도 만들어 보면,

socket.on("new_message",(msg)=>{
  addChatToUl(`Anno : ${msg}`);
})

그냥 이렇게 추가시켜 줬다.

 

 

 

 

const socket = io();

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

const $room = document.getElementById("room");
const $roomForm = $room.querySelector("form");
const $roomUl = $room.querySelector("ul");

$room.style.display = 'none';

const enterRoom = (roomName)=>{
  $welcome.style.display = 'none';
  $room.style.display = 'block';
  const $roomTitle = $room.querySelector("h3");
  $roomTitle.textContent = `Room ${roomName}`;

  addChatToUl(`${roomName}에 입장하셨습니다.`);
  $roomForm.addEventListener("submit", (e)=>{
    e.preventDefault();

    const $input = $roomForm.querySelector("input");
    socket.emit("new_message", $input.value, roomName);
    addChatToUl(`You: ${$input.value}`);
    $input.value = "";
  })
}

$welcomeForm.addEventListener("submit", (e)=>{
  e.preventDefault();
  const $input =  $welcomeForm.querySelector("input");
  socket.emit("enter_room", {payload : $input.value}, (roomName)=>{
    enterRoom(roomName);
  });
});


socket.on("welcome", ()=>{
  addChatToUl("Someone joined!");
});

socket.on("bye",()=>{
  addChatToUl("Someone leave.");
})

socket.on("new_message",(msg)=>{
  addChatToUl(`Anno : ${msg}`);
})


function addChatToUl(msg){
  const $li = document.createElement("li");
  $li.textContent = msg;
  $roomUl.append($li);
}

 

 

 

 

import express, { json } from "express";
import http from "http";
import SocketIO from 'socket.io'
// 인덱스 찾아보기
const app = express();
app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public"));
console.log(__dirname);
app.get("/", (req, res) => res.render("home"))
app.get("/*", (req, res) => res.redirect("/"))

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

const server = http.createServer(app);
const io = SocketIO(server);

io.on("connection", socket =>{
  socket.onAny(e=>{
    console.log(`socket on : ${e}`);
  });
  socket.on("enter_room", (roomName, callback)=>{
    socket.join(roomName.payload);
    callback(roomName.payload);
    socket.to(roomName.payload).emit("welcome");
  })

  socket.on("disconnecting", ()=>{
    socket.rooms.forEach(room => socket.to(room).emit("bye"));
  })

  socket.on("new_message",(msg, roomName)=>{
    socket.to(roomName).emit("new_message",msg);
  })
})

server.listen(3000, handleListen);


function msgToObject(m){
  const data = m.toString('utf-8');
  const msgObj = JSON.parse(data);
  return msgObj;
}