개발 블로그

#1.6 Chat Completed

html 로 메세지를 전송하는 버튼과, 메세지 리스트를 보여줄 수 있는 화면을 작성해보자.

line 13 ~ 16 을 추가해준다.

html에서 작성한 ul, form 을 브라우저 쪽에서 변수로 선언해주고,

from 에 대한 변수인 messageForm에 eventListener 를 add 해준다. 

즉 submit 이벤트가 발생했을 때  line 17~21 메소드를 실행한다.

* preventDefault() : submit 되었을 때 defulat 동작은 초기 화면으로 돌아오는 것인데, 해당 함수를 통해 그 default 동작을 막는다. 즉 submit 이 되어도 그 화면을 그대로 유지할 수 있도록 해준다. 

 다음 서버를 실행하고 브라우저에 hello 를 입력하면 정상 실행됨을 확인할 수 있다. 

이제 input.value를 console.log 로 출력하는 대신, socket.send 를 사용해서 

front->back 으로 입력 값을 전송해보자. 

또한 input.value 값을 초기화해줌으로써 submit 후에 입력 창에 문자가 남아있지 않도록 해준다. 

서버 재실행 후 브라우저에서 숫자를 입력해보면 backend 에서 그 값을 확인할 수 있다. 

backend 가 받은 메세지를 그대로 다시 front 로 전송해보자.

line 32를 line 33으로 수정해주면 

아래와 같이 브라우저에서 hi 라고 입력 후 send 버튼을 누르는 즉시 back->front 로 그 메세지를 다시 전송하여 콘솔 창에서 그 메세지를 확인할 수 있다. 

그러나 이 기능은 메세지를 입력한 그 브라우저와 서버 간에 통신을 하는 것이다. 즉 크롬 브라우저와 사파리 브라우저간의 통신이 되지 않느다. 이를 확인하기 위해 사파리에 동일한 주소로 접속을 한 뒤 메세지를 입력하면 이는 사파리에서만 확인 가능하지 크롬에서는 확인이 불가하다.

이제 chrome <-> server <-> safari 구조로 chrome ~ safari 사이에 통신할 수 있도록 해보자. 

현재 socket 에 누가 연결이 되었는지 모르므로 fake database를 생성해주자. 

앞으로 누군가 서버와 connection이 되면, 그 연결 정보인 socket 을 sockets 배열에 넣어줄 것이다. 

line 27, 30을 통해서 하나의 socket(브라우저)을 통해 받은 메세지를 다른 socket(브라우저들)들에 전송할 수 있다. 

현재 코드로는 자신의 브라우저에도 메세지를 보내는 방식이지만 추후 이 방식은 개선하도록 한다. 

line 38과 같이 연결된 모든 브라우저에 socket 을 통해 메세지를 보내주는 기능을 추가한 뒤 

크롬에서 메세지를 send 하면 safari 에서도 그 메세지가 출력됨을 볼 수 있다. 

반대로 safari 에서 입력해도 동일하게 chrome 에 출력된다.

#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)

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

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

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

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

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