1. Room Notifications(방을 나가진 않지만, 접속을 끊을 때 알림 - 컴퓨터를 끌 때 등)
1.1 Event:'disconnecting'이용 (!=disconnect)
- disconnect: 연결이 완전히 끊어졌다는 거.
- disconnecting: 고객이 접속을 중단할 것이지만, 아직 방을 완전히 나가진 않은 것.
-> backend에서 이벤트 리스너(on)를 이용해서 "disconnecting" event를 듣고, backSocket에 있는 모든 rooms(= {"id","roomName(내가 속한 방)"}) 에다가 각각 emit을 이용하여 "bye" event를 frontend에 보내줄 것임
-> frontend(app.js)에서는 이걸("bye" event) 받아서 그 이벤트를 듣는 사람들(방안에 있는 사람들은 그 이벤트를 다 들음)에게 접속을 중단했다는 알림을 보낼 것임.
1.2 server.js ㄲ
<<<<<<<<<<<<<<<<<<<<<<<<<<<추가 코드>>>>>>>>>>>>>>>>>>>>>>>>>>>
backSocket.on("disconnecting",() => {
backSocket.rooms.forEach((room) =>
backSocket.to(room).emit("bye"));//backSocket.rooms: {"id~~", "roomName"}
});
<<<<<<<<<<<<<<<<<<<<<<<<<<<최종 코드>>>>>>>>>>>>>>>>>>>>>>>>>>>
ioServer.on("connection",(backSocket) => {
backSocket.onAny((event) => {
console.log(`Socket Event: ${event}`);
});
backSocket.on("enter_room", (roomName, showRoom) => {
backSocket.join(roomName);
showRoom();
backSocket.to(roomName).emit("welcome");
});
backSocket.on("disconnecting",() => {
backSocket.rooms.forEach((room) => backSocket.to(room).emit("bye"));//backSocket.rooms: {"id~~", "roomName"}
});
});1.3 app.js ㄱ ㄱ
<<<<<추가 코드>>>>>
frontSocket.on("bye",() => {
addMessage("Someone left ㅠㅠ");
});1.4 결과
2. message보내기
-> room에 입장했을 때, 나타나는 form에다가 submit 이벤트리스너를 해주면 됨. 이 때 리스너의 callback 함수는 "new_message"라는 이벤트로 input.value의 값과 roomName(어느 방에다 보내줘야 할지 정해야 해서)을 backend로 넘겨주면서, 동시에 화면에 input.value값이 나타나도록 하는 함수도 같이 보내줌.
-> frontend에서 "new_message"라는 이벤트를 emit해준 뒤, backend에서 현재 속한 room에다가 또다시 "new_message"라는 이벤트와 함께 msg(input.value)를 emit해준다. 후에 frontend에서 받은 함수(화면에 message보이게 하는)를 실행해준다.
-> 2.2에서 frontend에서 받은 msg를, backend에서 room에 "new_message"라는 이벤트로 msg를 넣어서 emit했다. 이제 방 안에 있는 사람들은 "new_message"이벤트로 msg를 받았고, 이를 이벤트 리스너로 받은 다음에 msg가 화면에 보이도록 처리해줘야 한다.
요약: frontend(입력 및 back으로 보냄)
-> backend(방 안에 있는 사람들한테 문자 보내고, 사용자 화면에 뜨도록 함수 호출해줌)
-> frontend(방 안에 있는 사람들이 문자를 받고 화면에 보이도록 해줌)
2.1 app.js ㄱ ㄱ
-> room에 입장했을 때, backend에서는 showRoom이라는 callback함수를 제어하여 frontend에 실행해주는데, 이 showroom에 이벤트 리스너를 넣어서 room에 입장했을 때부터 form이 메시지에 대해 submit 이벤트를 리슨하도록 만들어주기!
-> 또한 이 리스너의 callback함수를 이용해, input.value와 roomName(어느 방에다 보내줘야 할지 정해야 해서)을 "new_message"라는 이벤트로 backend에 emit해주며, 화면에 입력값이 나타나도록 하는 함수도 보내주고 있음.
다음 코드를 추가해준다.
/*function addMessage(message){
const ul = room.querySelector("ul");
const li = document.createElement("li");
li.innerText = message;
ul.appendChild(li);
}; -> addMessage: 화면에 msg를 보여주는 함수임.*/
function handleMessageSubmit(event){
event.preventDefault();
const input = room.querySelector("input");
frontSocket.emit("new_message", input.value, roomName, () => {
addMessage(`You: ${input.value}`);
});
};
function showRoom(){
welcome.hidden = true;
room.hidden = false;
const h3 = room.querySelector("h3");
h3.innerText = `Room: ${roomName}`;
const form = room.querySelector("form");
form.addEventListener("submit",handleMessageSubmit);
};2.2 server.js ㄲ
-> frontend에서 "new_message"라는 이벤트를 emit해준 걸 받은 뒤, backend에서 현재 속한 room에다가 또다시 "new_message"라는 이벤트와 함께 msg(input.value)를 emit해준다. 후에 frontend에서 받은 함수(화면에 message보이게 하는)를 실행해준다.
<<<<<추가 코드>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
backSocket.on("new_message",(msg, room, done) => {
backSocket.to(room).emit("new_message", msg);
done();
});
<<<<최종 코드 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ioServer.on("connection",(backSocket) => {
backSocket.onAny((event) => {
console.log(`Socket Event: ${event}`);
});
backSocket.on("enter_room", (roomName, done) => {
backSocket.join(roomName);
done();
backSocket.to(roomName).emit("welcome");
});
backSocket.on("disconnecting",() => {
backSocket.rooms.forEach((room) => backSocket.to(room).emit("bye"));//backSocket.rooms: {"id~~", "roomName"}
});
backSocket.on("new_message",(msg, room, done) => {
backSocket.to(room).emit("new_message", msg);
done();
});
});2.3 app.jsㄲ
-> 2.2에서 frontend에서 받은 msg를, backend에서 room에 "new_message"라는 이벤트로 msg를 넣어서 emit했다. 이제 방 안에 있는 사람들은 "new_message"이벤트로 msg를 받았고, 이를 이벤트 리스너로 받은 다음에 msg가 화면에 보이도록 처리해줘야 한다.
다음 코드를 추가해준다.
frontSocket.on("new_message", (msg) => {
addMessage(msg);
});
부가요소:
-> 맨 마지막에 input.value = "" 해줘서 보내면 자동으로 input창 비워지게 하기.
const value로 해준 이유: 저렇게 안하고 addMessage에 input.value넣으면,
이미 비워진 input.value값을 보내게 되어서 따로 저장해주는 거임.
function handleMessageSubmit(event){
event.preventDefault();
const input = room.querySelector("input");
const value = input.value;
frontSocket.emit("new_message", input.value, roomName, () => {
addMessage(`You: ${value}`);
});
input.value = "";
};