TIL. 최종프로젝트(21) 웹소켓 프론트연결

[오늘 한일]

- 서비스 배포준비

 

[오늘 배운점]

<웹소켓 프론트 연결>

백엔드처럼 프론트에서도 3대동작이 중요하다.

socket= new websocket()이 연결을 담당하고,

socket.onmessage()는 수신을 담당한다.

이 두부분을 백엔드에 작성한 것에 맞춰 작성해준다.

 

socket.send로 메세지를 전송한다.

 

한편, 페이지가 벗어나는걸 감지한뒤 socket.close()로 소켓 연결을 끊어줄수도 있다고한다.

페이지에서 벗어나는건 onbeforeunload로 감지한다.

하지만 이부분은 작성하지 않아도 페이지를 벗어날때 소켓연결을 알아서 잘 해제한다.

그래서 별도로 작성해주지는 않았다.

 

 

페이지가 이동되더라도 연속성있게 웹소켓을 연결할수 있진 않을까도 고민해봤다.

인터넷에 찾아봤더니 js에서는 불가능하다고 한다.

js는 페이지가 이동되면 해당 페이지의 스크립트를 새로 작성하기때문에

페이지를 이동하며 웹소켓 연결을 유지할 수 없다.

 

전역적으로 동작하는 스크립트 파일에서 웹소켓 연결을 선언해주면,

모든 페이지를 열때마다 웹소켓 연결을 새로하는 식으로 동작하게된다.

새롭게 연결이 선언되는것이다.

이 부분을 필요한 스크립트에서 임포트 해가서 필요한 동작을 하도록 한다면,

코드는 간결하게 작성할 수 있다.

 

매 페이지마다 웹소켓 연결이 갱신되는 건 크게 불편한점은 아니라고 생각된다.

오히려 사이트를 언제 벗어나든 웹소켓 연결을 즉각 해제할수 있는점은 좋다고 생각된다.