노마드코더 줌 클론코딩 - #1.4 WebSockets Messages

#1.4 WebSockets Messages

앞서 server.js 에서 handleConnection 이라는 함수를 따로 정의했었는데,

on 함수의 두번째 인자 내에 바로 함수를 생성해보자. (line 26~28)

이 방식으로 하면 line 23~25 방식에 비해, socket이 현재 어떤 상태인지 알기 쉽다. 즉, 연결이 되면 socket이 인자에 들어온다는 것을 직관적으로 이해할 수 있다. 

이제 console.log 대신 "welcome to chat" 이라는 메세지를 보내보자. 

send 메소드는 server의 메소드가 아닌 socket 의 메소드이며, 이는 socket 과의 직접적인 연결을 제공해준다.

 

backend 에서 메세지를 보냈으니, 이를 Frontend에서 받아보자. 가능한 옵션은 네가지가 있고 이 중 open을 입력하자. open은 connection 이 opne 되었을 때를 의미한다.

 

backend 쪽도 로그를 추가해주자. 

 

다음으로 socket에 이벤트 두개를 추가해보자. message와 close 이벤트를 추가한 코드이다. 

message이벤트는 메세지를 받을때마다 아래 내용을 출력한다. 

서버에도 브라우저와 잘 연결되었다는 메세지가 출력된 모습이다. 

브라우저 쪽도 잘 작동한다.

이 중에 직접 받은 data 만 받고 싶다면 위 사진의 line 8 중 message 파라미터를 message.data 로 바꿔보자. 

data 만 출력한 모습이다. 

 

이 상태에서 서버 터미널에 ^C를 입력하여 서버를 kill 하면, 브라우저에서는 서버 연결이 끊겼다는 메세지가 발생한다. 

 

동일하게 서버에서도 close event에 대한 Listener 를 등록해보자. (socket.on () )

 

브라우저에서 연결을 끊기 위해 크롬 창을 닫으면,  아래와 같이 터미널창에 브라우저로부터 연결이 끊겼다는 메세지가 출력된다. 

서버와 브라우저 간 양방향 통신에 대해 알아봤고,

이제 frontend -> backend 로 메세지를 보내보자. (위에서는 backend -> frontend 만 했음)

보내기 전에 10초를 기다리기 위해 timeout 을 설정하자. 

timeout을 설정함으로써 메세지를 순차적으로 보낼 수 있다. 

브라우저가 보낸 메세지를 backend 에서 받기 위해 eventListener를 작성해보자. (line 31~33)

 

이제 서버를 재실행하면,

1. back -> front : hello! 메세지를 보냄. ( 위 사진의 Line 34)

frontend

2. front -> back : front에서 10초 후 메세지를 보내면 backend 터미널에 hello from the server 라는 메세지 출력됨.

그러나 아래와 같은 에러가 떠서

 

강의 아래 있는 코멘트를 보고 수정한 뒤 재실행 하니

정상적으로 출력된것을 확인할 수 있었다.

 

* 메세지를 받을 때, frontend 에서는 addEventListener() 메소드로 받고, backend 에서는 socket.on() 메소드로 받는다.