1. Nicknames

1.1 home.pug ㄲ - html SetUp

-> #name form을 추가해준다. 여기다가 nickname 적을겨.

main
    div#welcome
        form
            input(placeholder="room name", required, type="text")
            button Enter Room
    div#room
        h3
        ul
        form#name
            input(placeholder="nickname", required, type="text")
            button Save
        form#msg
            input(placeholder="message", required, type="text")
            button Send

1.2 app.jsㄱ ㄱ

• msg, name폼을 각각 가져온다.

• msg 폼을 숨긴다.

• handleNicknameSubmit
  -> #name 안의 input을 가져온 뒤, 그 값을 socket을 통해 "nickname"이라는 이벤트로 backend로 전달

• showRoom
  -> roomMsgForm을 밑의 코드와 같이 이름을 Form -> roomMsgForm으로, 쿼리 셀렉터도 알맞게 써준다.
  -> nameForm을 숨겨준다.

• event리스너
  name이벤트 리스너를 설정해준다.

밑의 코드들을 추가한다. 혹은 있는 코드에 수정해서 더해준다.

<<<<<<<<추가 및 수정코드>>>>>>>
const roomMsgForm = room.querySelector("#msg");
const roomNameForm = room.querySelector("#name");

roomMsgForm.hidden = true;

/*function handleMessageSubmit(event){
    event.preventDefault();
    const input = room.querySelector("#msg input");
    const value = input.value;
    frontSocket.emit("new_message", input.value, roomName, () => {
        addMessage(`You: ${value}`);
    });
    input.value = "";
}; -> 여기의 input을 보면 쿼리 셀렉터로 #msg내의 input을 선택해줌 */


function handleNicknameSubmit(event){
    event.preventDefault();
    const input = room.querySelector("#name input");
    frontSocket.emit("nickname", input.value);
};

function showRoom(){
    welcome.hidden = true;
    roomNameForm.hidden = true;
    roomMsgForm.hidden = false;
    const h3 = room.querySelector("h3");
    h3.innerText = `Room: ${roomName}`;
    roomMsgForm.addEventListener("submit",handleMessageSubmit);
};

roomNameForm.addEventListener("submit",handleNicknameSubmit);



<<<<<<<<최종 코드@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  
const frontSocket = io();//backend Socket과 연결됨.

const welcome = document.getElementById("welcome");
const form = welcome.querySelector("form");
const room = document.getElementById("room");
const roomMsgForm = room.querySelector("#msg");
const roomNameForm = room.querySelector("#name");

roomMsgForm.hidden = true;

let roomName;

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

function handleMessageSubmit(event){
    event.preventDefault();
    const input = room.querySelector("#msg input");
    const value = input.value;
    frontSocket.emit("new_message", input.value, roomName, () => {
        addMessage(`You: ${value}`);
    });
    input.value = "";
};

function handleNicknameSubmit(event){
    event.preventDefault();
    const input = room.querySelector("#name input");
    frontSocket.emit("nickname", input.value);
};

function showRoom(){
    welcome.hidden = true;
    roomNameForm.hidden = true;
    roomMsgForm.hidden = false;
    const h3 = room.querySelector("h3");
    h3.innerText = `Room: ${roomName}`;
    roomMsgForm.addEventListener("submit",handleMessageSubmit);
};

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

form.addEventListener("submit",handleRoomSubmit);
roomNameForm.addEventListener("submit",handleNicknameSubmit);

frontSocket.on("welcome",(user) => {
    addMessage(`${user} joined!`);
});

frontSocket.on("bye",(left) => {
    addMessage(`${left} left ㅠㅠ`);
});

frontSocket.on("new_message", (msg) => {
    addMessage(msg);
});

1.3 server.js (backend)

-> 1.2의 handleNicknameSubmit에서 "nickname"이란 이벤트로 input.value를 보내준 emit에 반응하는 handler를 만들어야함.
-> "nickname"이벤트로 받은 input.value값은 backSocket["nickname"] = input.value, 이렇게 backSocket안에 저장한다.
-> nickname이 생겼으므로 뭔가 메시지를 보낼 때, 내 닉네임과 메시지를 함께 보내도록 .emit들을 수정해준다.

<<<<<<추가 코드>>>>>>
backSocket["nickname"] = "Anonymous";//초기 닉네임 값 지정.

backSocket.on("nickname",(nickname) => backSocket["nickname"] = nickname);//input.value값 "nickname"이벤트로 emit받아서, backSocket에다가 닉네임으로 지정.

<<<<<<수정 코드>>>>>>
backSocket.to(roomName).emit("welcome", backSocket.nickname);//welcome nickname

backSocket.rooms.forEach((room) => backSocket.to(room).emit("bye", backSocket.nickname));//bye nickname

backSocket.to(room).emit("new_message", `${backSocket.nickname}: ${msg}`);//nickname: message


<<<<<최종 코드>>>>>>>
ioServer.on("connection",(backSocket) => {
    backSocket["nickname"] = "Anonymous";
    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", `${backSocket.nickname}: ${msg}`);//상대 메시지 창에 메시지를 보낸 출처를 나타나게 할 수 있음.
        done();
    });
    backSocket.on("nickname",(nickname) => backSocket["nickname"] = nickname);
});

1.4 app.js:

-> 1.3의 수정코드로 인해 frontend에서도 변수를 받아 출력하는 것으로 수정헤줘야함.

frontSocket.on("welcome",(user) => {
    addMessage(`${user} joined!`);
});

frontSocket.on("bye",(left) => {
    addMessage(`${left} left ㅠㅠ`);
});

1.5 결과

2. 추가 Documentation

2.1 room에 Socket추가(방에 유저 초대)

server.socketjoin API

// make all Socket instances join the "room1" room
io.socketsJoin("room1");

// make all Socket instances in the "room1" room join the "room2" and "room3" rooms
io.in("room1").socketsJoin(["room2", "room3"]);

// this also works with a single socket ID
io.in(theSocketId).socketsJoin("room1");

-> io: server.js에서는 ioServer(const ioServer = SocketIO(httpServer);)를 말함.