WebSocket

브라우저가 이미 webSocket 클라이언트에 대한 implemention을 가지고 있다. (심지어 IE조차!!)

backend를 연결해주는 webSocket은 이미 저번시간에 준비해 두었다 

 

btn.addEventListener('event',fn)
wss.on('event',fn)

wss에서도 event와 fn을 받을 수 있다. frontend의 click 하면 fn이 호출되는 것과 같다.

callback으로 socket을 받는다. 이 socket은 연결된 어떤 사람이라고 생각하자. 연결된 브라우저와의 contact라인이다.

socket을이용하면 메세지 주고 받기를 할 수 있다.  이 것을 어딘가에 저장해야한다.

먼저 console로 찍어보자.

연결이 되면 콘솔창에 socket이 나타날 것이다.

 

app.js

app.js로와서 socket을 생성해주고 주소를 ws://로 지정해줘야한다. http로지정하면 오류가난다.

window.locaion.host는 localhost:3000을 의미해준다. 이렇게 하고 새로고침을 해주면

 

socket이 생성이 된 것이 보이고 이 것을 통하여 frontend와 실시간으로 소통할 수 있다.

 

server.js의 socket은 연결된 브라우저를 의미한다.

app.js의 socket은 서버로의 연결을 뜻한다.

 

서버와 연결이 되었다면 콘솔창에 Connect to Browser 이라고 띄우고

hello라는 메시지를 전달해보았다.

브라우저에서 서버와 연결이 되면 Connet to Server를 보내고

연결이 되었을 때 hello를 보냈으니 message에 hello가 담겨오고

연결이 끊기면 Disconnect to Server가 콘솔에 나올 것이다.

backend에서 잘 출력이 되었고

브라우저에서도 잘 출력이 된 것을 확인할 수 있다. 반대로 브라우저의 창을 껐을 때

bakcend에 나타나게 하는 방법은 아래와 같다.

app.js

브라우저에서 서버로 보낼때 역시 socket.send하면된다. 10초뒤에 보내볼텐데.

 

보낸다 하더라도 아래와 같이 socket.on('message',~~) message를 받았을 때 출력하는 동작을 설정해주지 않는다면

아무 반응이 없다

 저 주석처리를 해제하면

ㅂ메시지가 잘 출력하는 모습을 보인다.

 

이 부분을 지워도 브라우저와 Connection이 된다. 하지만 connection이 되었을 때 우리는 아무 반응을 하지 않을 것이다. 우리는 wss.on('connection")을 통하여websocket과의 connetcion event에서 listen을 하고 있는 것이다.

connection이 생기면 저 socket에서 누가연결했는지 알 수 있다. 각각 다른 브라우저마다 연결된 socket에서 이벤트를 listen할 수 있다. 우리는 wss서버가 아니라 특정 socket에 이벤트를 주고 있는 것이다. socket.on은 backend와 연결한 각 브라우저를 위한 것이다. wss는 서버 전체를 위한 것이고 socket.on message는 특정 socket에서 메시지를 받았을 때 발생할 것이다. 즉 connetcion이 생기길 기다리는 listener를 만들었고 connection이 생기면 각 브라우저의 특정 socket을 만들어 그 socket의 여러 이벤트 listener를 설정한 것이다.

 

브라우저에선 이 부분이 backend와 connection을 열어주고 있는 것이다.

그리고 마찬가지로 브라우저의 각 socket에서도 event listener를 등록했다