노마드코더 줌 클론코딩 - #1.3 WebSockets Events

#1.3 WebSockets Events

이제 ws를 사용해서 backend 와 frontend 사이에 connection을 만들어보자. 

frontend 에서 websocket을 이용하여 backend 와 연결하는 것은 -> JS 에서 지원한다. 

 

websocket은 위의 버튼리스너가 동작하는 방식과 비슷하다.

즉 Event가 있고, 그 Event가 실행될 때 사용할 Function을 정하면 된다. 

(* 추가 상세 이론은 무료 vanilla JS 강의 참고) 

websocket은 listen 할 특정 event 명이 있으며, 추가적인 정보를 받기 위한 function 도 있디.

 

Event는 어떤 것들이 있을까?

-> click, submit, Wi-Fi on/off 등이 있다.

on() 함수의 첫번째 인자는 event, 두번째 인자는 function 이다. 이 function은 첫번째 인자인 event 가 발생할 때 호출된다. 

여기서 cb(call back)으로 socket을 받는다고 나와있다. socket은 연결된 어떤 사람을 말한다. 연결된 브라우저의와 contact line을 말하며, 이 socket 인자를 변수에 저장해놔야한다. 그래야 Function의 인자에 넣을 수 있다. 

아래는 event 들의 종류이다. connection를 입력한다. 

 

그 후 function을 생성한다. 이름은 handleConnection.(line 23~25)

connection 이벤트가 발생하면 handleConnection함수는 인자를 통해

backend에 연결된 사람의 정보를 socket을 통해 frontend로 받아온다. 이 방법은 vanilla JS를 사용할 때의 방법입. 

 

 

이제 frontend에서 backend와 연결하는 부분을 작성해보자.

참고 : https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#syntax

WebSocket() - Web APIs | MDN

 

아래와 같이 frontend 에 작성 후 

 

console에서 새로고침을 해보면, 아래와 같이 http 프로토콜을 사용해서 에러가 났음을 확인할 수 있다. 

http를 ws로 변경하자. 

 

그리고 모바일에서 사용 시 localhost:3000으로 접속할 수 없으니 이 부분도 수정을 해보자.

브라우저에서 위 정보를 스스로 가져오게 해보자. 

콘솔창에서 window.location.host 를 입력하면 'localhost:3000'과 같이 뜨는 것을 확인할 수 있다. 

frontend 코드상에서도 아래와 같이 수정한 뒤 저장하고 refresh를 해보면 

 

WebSocket connection to 'ws://%24%7Bwindow.location.host%7D/' failed: 

와 같은 오류가 뜨는데 이는 따옴표(')를 -> 백틱(` - 물결 아래에 있으며 한글일 때는 ₩로 타이핑되므로 영문으로 전환 후 입력하면 된다)을 쓰면 해결된다. 

여기까지 websocket을 이용해 frontend와 backend 간 connection을 만들어보았다.

이제 real-time 으로 메세지를 주고 받아보자.