6. 닉네임

닉네임을 정하게 해보자. 정말 간단하다.

 

form#name
    input(type="text" placeholder="Nickname", required)
    button Save

그냥 form 하나 새로 더 만들어서..

 

 

$nicknameForm.addEventListener("submit",(e)=>{
  e.preventDefault();
  const $input = $nicknameForm.querySelector("input");

  socket.emit("nickname", $input.value);
});

이벤트를 추가해 주었다.

 

서버에 nickname이라는 이벤트를 내가 적은 input의 값과 함께 전달 할 것이다.

 

io.on("connection", socket =>{
  socket.nickname = "Anon"

  socket.on("nickname", (nickname)=>{
    socket.nickname = nickname;
  })
})

연결 되었을 때 처음에는 그냥 닉네임 자체를 Anon이라고 설정해 두고,

 

이후에 만약 nickname이벤트가 날라온다면 socket의 nickname에 값을 부여해준다.

원래 socket이 가지고 있던 필드는 아니다.

 

그럼 이제, 메시지 보낼 때 닉네임을 추가해서 보내야 한다.

 

 

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

이제 이런 형태로 닉네임과 함께 보낸다.

 

 

클라이언트 입장에서는

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

바뀌는 것 없이 그대로 문서에 추가해 주면 끝.

 

 

 

 

SocketIO는 정말 많은 기능들이 있다.

 

그 중에 원하면 그냥 모든 소켓에게 message를 보낼 수 있고,

그냥 서버에서

const io = SocketIO(server);

io.sockets.emit("이벤트", data)

하면 된다.

 

io.socketsJoin("room1"); //모든 소켓 room1에 강제입장
io.in("room1").socketsJoin(["room2", "room3"]); //room1에 있는 모든 소켓들 room2, room3에 강제 입장
io.in(소켓id).socketsJoin("room1"); //특정 소켓 강제 입장