Room chat 1

기본적으로 user는 이미 방에 혼자 들어가있다. 그 방의 이름은 user의 socket id와 같다.

우리는 기본적으로 방에 입장하려고 한다. socket.join을 사용하는데 만약 방이 없다면 방을 만들고

방이 있다면 그 방에 들어가는 방식이다.

 

home.pug

먼저 div#room 속 form을 하나 더 만들어 준다.

 

app.js

새로 만든 room을 처음에 숨겨주고. roomName은 일단 정해지지 않았기에 let으로 정의만해주었다.

그리고 showForm 함수를 통해서 welcome form이 지워지고 다시 roomForm이 나타나도록 하는 함수를 만들어주었다.

 

그리고 전과 마찬가지로 welcomeForm의 input의 값과 enter_event를 emit으로 백엔드에 전달해주고 콜백함수에는

h3에 roomName을 입력하는 것과 showForm함수가 동작하도록 하였다.

여기서 실험을 하였는데 socket.emit코드가 h3.innerText보다 위에 있다. 이 때 socket.emit코드를 실행하고 돌아와서 나머지 코드를 실행하는 건가? 그렇다면 rooname은 undifined이지 않을까? 라는 생각을 하여 저런 코드를 짜보았지만. 

console창에 2가 먼저 찍히는 것이 아닌 1이 먼저 찍히는 것을 보았기에 의문이 풀렸다.

그리고 받아온 roomname을 통해서 socket.join(roomname)을 통해 방에 입장하였고 받아온 cb를 그대로  실행시켜주었다.

여기서 enter room을 클릭하면

socket.rooms로 확인을 통해 socket.join(roomname)을 하기 전에 socket이 들어가 있는 방과 join 후의 방을 확인할 수 있고 ( 기본적으로 자기 고유id의 방에 있음 )

 

방에 잘 입장된 것을 확인할 수 있다.

공식문서를보면 방 안의 나를 제외한 모든 사람에게 메시지를 에 보낼 수 도있고, 여러방에 보낼 수 도있고 또 socketID를안다면 개인 메시지또한 보낼 수도 있다.

 

방에 들어왔을 때 to(roomname).emit(이벤트)로 다시 app.js에 이벤트를 보내주는 것이다.

to는 자기 자신을 제외한 그 방에 있는 모든 사람들에게 보내진다. 

socket이 welcome이벤트를 받으면 someone join이라는 message를 받도록 해보았다.

Edge브라우저로 안녕이라는 방을 만들었고 나 이외의 사람에게 보내므로 일단 someone joined가 생기지 않았다.

chrome브라우저로 안녕이라는 방에 들어가면 나 이외의 사람에게 보내므로 Edge에는 생기는 것을 확인할 수 있다.

socektIO의 멋진 기능 덕분에 disconnecting 이라는 event가 있다. (내장 되어있는 event)  이건 클라이언트가 서버와 연결이 끊어지기 전에 마지막 "굿바이" message를 보낼 수 있다. socket.rooms를하면 socket이 속해있는 방을 보여준다. 이건 Set(중복되는 요소가 없는 array)이므로 배열 함수를 쓸 수 있다.

 

이번엔 나갈 때도 메시지가 출력되도록 해보겠다. disconneting이라는 Event를 사용할 것인데 이건 연결이 끊기기 전에 자동적으로실행해주는 socketIO의 기본 event이다.

socket.nickname은 일단 넘어가자 나중에 설명하겠다. socket.rooms를 하면 전에 내 socket이 속해있는 모든 방을 Set(중복이 없는 배열)로 나타내주었다. 따라서 forEach함수를 통해서 모든 방에 emit('bye')를 해주겠다.

받아온 nickname을 사용하여 메시지를 출력하면 된다.

이번엔 닉네임을 설정해보려고한다. 처음 방에 들어가기전에 닉네임을 설정해두고 방에 들어가는 것이 훨씬 더 깔끔할 것이다.

먼저 home.pug를 수정해줄 것이다.

실행하면 처음 보이는 form이다 방 제목과 nickname을 설정할 수 있는 input을 2개 만들어준다.

welcome form에서 전송을 하면

title의 값과 name의 값 두개를 enter_room event에 딸려 보내자. 그리고 콜백함수로 showForm()을 준다. roomName은 title.value의 값을 넣어주자

그럼 서버에서 enter_room이벤트를 받으면 그 방으로 입장하고 닉네임도 지정하고 방에있는 사람들에게 입장한다고 보낸다. 그리고 콜백을 실행해준다.

콜백의 내용은 위와 같다. welcome form을 숨기고 숨겨있던 roomForm을 꺼낸다.

그리고 제목을 달아주고 msgForm에게 생명을 불어넣어준다. msgForm아 너는 이제 submit이 되면 handleChatSubmit을 실행하렴~~

new_message라는 event에 채팅내용과(value) 이 방의 이름(roomName)을 딸려 보낸다. 만약 방이름을 같이 보내지 않으면 어떤 방으로 보내야하는지 알 수 없다.

아까 지정해 두었던 socket.nickname과 같이 보내어 이름도같이 보내도록 하자.

잘 작동이 되는것을 확인할 수 있다.