broadcastChannel API

역시 오랜만에 글을 올린다.

 

런칭전 너무 많은 변화가 생겼고 거의 리뉴얼 수준으로 작업이 이루어졌다... 거의 끝났다.

 

작업을 진행하며 한가지 문제가 된 부분이 있는데 브라우저에서 로그인시 해당 상태가 다른 탭에 공유 되지 않는 현상이었다.

 

물론 새탭으로 열면 app의 상태는 공유 되어 있다.

 

하지만 로그아웃시? 또는 두개의 탭이 열린 상태에서 로그인시? apollo의 loggedinVar가 지속적으로 읽혀지고 있어서

 

새로고침으로 앱을 다시 시작하지 않으면 해당 상태는 역시 공유 되지 않았다.

우선 급한데로 apollo authLink에서 로그인 상태를 token의 유무에 따라 조정을 해줬다..

 

이 경우 session의 상태에 따라 api호출시 로그인 상태가 결정되므로 즉각 반응은 아니지만

 

api호출 이 이루어지는 어떤 action이 이루어지면 해당 탭에서도 로그인 로그아웃이 이루어진다.

 

단점은 api호출이 없는 페이지의 경우 공유되지 않는 다는 점...

 

이것도 급하게 한거지만 이거 적용하느라 엄청 해멨다... 뭐가 문제인고 하면 header나 app에서 useEffect를 사용해서

cookie의 변화에 따라 로그인 로그아웃을 결정해줬는데 이게 제대로 안된다.. 미치는 줄 알았다..

 

그리고 이번 ios15.4  mac os 12.3업데이트 이후 드디어 broadcastChannel API를 사용할 수 있게 되었다.

 

https://developer.mozilla.org/ko/docs/Web/API/BroadcastChannel

BroadcastChannel - Web API | MDN

broadcastChannel 이란 browser상에서 일종의 pubsub개념이 적용된 api이다.

 

브라우저의 app에서 해당 api를 사용하면 같은 앱을 사용하는 다른 브라우저 탭에 message를 보낼 수 있고 다른 탭은 message를 받아서 어떠한 액션을 취할 수 있다.

 

주의할 점은 ie는 역시 지원안되고 ios는 15.4이후 부터 safari도 15.4이후 부터 적용이 가능하다는점 명심하자 안그럼

api 호출 할수 없다는 에러와 함께 웹이 빈페이지로 보일 것이다.

 

자 그럼 예시로 사용해보자.

 

현재 사용중인 회원가입 callback page이다. 목적은 token을 받은 뒤 firebase token을 설정하고서 이전 completion page나

sns login page에서 해당 메세지를 받아 로그인 상태로 전환하고 callback page를 닫는다.

 

기존에는 useEffect를 사용해서 cookie를 확인 후 닫아 줬는데  cookie를 제대로 읽어 들이지 못해 적용이 안될때가있었다 내 코드에 문제였겠지만 한방에 해결이 가능한 api를 쓰자.

회원가입 completion페이지 의 코드이다. boradcastChannel의 onMessage event handler로  data의 type을 체크한뒤

로그인상태를 만들어주고 home화면으로 이동 시켰다.

 

아주 간단하다.!

 

실제로 로그인 로그아웃시 공유되는 것을 보자

 

탭간에 아주 잘 적용되고 있다! 굳굳

 

필자가 해당 api를 찾는데 꽤 오랜기간이 걸렸다.. ㅠㅠ 역시 검색의 힘과 인내가 필요하다