2021-02-03(Wed)

항목	내용
학습 날짜	2021-02-03(수)
학습 시간	11:00~24:00
학습 범위 및 주제	backbone, ActionCable
학습 목표	appearance 유저 상태바를 만든다.
동료 학습 방법	sanam, jujeong님과 appearance_view를 liveshare로 함께 구현

상세 학습 내용

액션 케이블을 활용하여 유저 상태가 업데이트되도록 만들었다.

이 과정에서 아래 문제가 발생하여 긴 시간을 썼는데, 동료 분들 덕에 결국 해결되었다.

문제)

최초에 로그인하며 websocket 연결 & Appearance channel을 구독한 current_user가 window를 종료할 때까지 유지된다. 때문에 로그아웃 후 다른 아이디로 로그인해도 최초에 로그인했던 user가 current_user로 인식된다.

원인)

• websocket에 connect하는 과정에서 current_user가 초기화된다.

• 그런데 로그아웃시 channel 구독은 끊었지만, websocket의 connect를 끊지는 않았다.

• 따라서 다시 로그인 했을 때 websocket을 connect하는 과정이 없어서 current_user가 초기화되는 과정도 생략된 것이 원인이었다.

해결)

아래 내용은 eunhkim님이 정리해주신 내용.

1. consumer에 대한 이해 레일즈는 액션 케이블에 대해 공식적으로 'consumer'라는 개념을 사용하고 있습니다. consumer란 서비스 이용자(current_user) 안에 포함되는 개념으로 하나의 디바이스나 브라우저의 탭에 대응합니다. 우리가 브라우저 탭 5개를 열고 모바일, 태블릿, 핸드폰으로도 하나의 서비스를 이용(같은 계정이든 아니든 간에)한다면 한 유저가 여덟 명의 컨슈머로써 작용하고 있는 것입니다.

2. conection에 대한 이해 connection이란 consumer와 rails server가 맺고 있는 관계를 의미하며, 말 그대로 서버와 클라이언트 websocket 간의 '연결'을 의미합니다. 하나의 컨슈머는 채널 수에 무관하게 하나의 커넥션만을 이용합니다.

3. consumer와 connection은 언제 만들어지는가? consumer는 어플리케이션이 윈도우에 로드되는 즉시 만들어집니다. 레일즈는 하나 이상의 채널을 구독할 때에만 connection을 열어두는 것을 권장하므로, 윈도우에 로드되는 시점에 즉시 채널을 구독하지 않는다면 connection은 바로 생성되지 않습니다. xx_channel.js 파일을 보면 consumer.subscriptions(channel_name, mixin object)를 통해 구독을 만든다는 것을 알 수 있습니다. 이 때 커넥션이 연결되어 있지 않다면 내부적으로 consumer의 connect 메서드를 통해 웹소켓이 생성되고 채널이 연결됩니다. connection.rb의 connect 메서드가 실행되는 시점이 바로 이 타이밍입니다.

4. 그래서, 오늘 같은 문제는 왜 일어났나? subscription을 해제하는 것이 connection의 close를 보장하지 않기 때문입니다. 쿠키가 초기화되더라도 SPA에서는 connection이 처음 웹소켓을 연결할 때를 제외하고 다시 연결을 인증할 일이 없습니다. 그나마 새로고침하면 정상적으로 돌아갔던 것도 윈도우 로드시 쿠키를 초기화하도록 저희가 처리를 해놓았기 때문이고요.

5. 그러면 커넥션을 닫으면 되겠네? 네. 우리가 케이블을 이용하기 위해 this.channel = connectChannel 메서드를 이용해 생성한 subscription은 consumer 객체가 가진 subscriptions 컬렉션의 엘리먼트이며, consumer를 참조하고 있습니다. 즉, this.channel.consumer와 같은 방식으로 접근이 가능한 개체입니다. consumer는 자신이 가진 하나의 connection에 대한 참조를 가지고 있고, consumer.connection.close() 메서드를 명시적으로 호출함으로써 커넥션을 닫을 수 있습니다.

6. 그러면 정말 해결되나? 아니요. connection.close() 메서드는 기본적으로 서버에 의한 자동 재연결을 허락하는 내부 옵션을 가지고 있습니다. 잠깐 끊길 뿐 곧 다시 연결됩니다. 가장 좋은 방법은 consumer 객체를 따로 보관하고, consumer 객체가 구독하는 subscriptions array의 각 subscription에 대해 명시적으로 undescribe한 뒤, consumer가 가진 disconnect 메서드를 호출하는 것입니다. 내부적으로 보면 consumer.connection.close 메서드를 재연결 허락을 거부하는 옵션으로 호출하는 메서드입니다.

7. 너는 이런 걸 어떻게 알았니? window에 channel이나 consumer를 담아서 내부 구조를 들여다보면 됩니다. appearance channel을 new로 만든 하나의 노드만 있더라도 서비스에 관여하는 connection, consumer, 모든 subscriptions를 참조하고 영향력을 행사할 수 있습니다.

참고

참고2

학습 내용에 대한 개인적인 총평

개발을 하다보면 계단식으로 진행되는 것 같다. 순조롭게 진행하다가 이슈가 생기면 이를 해결하기 위해 시간을 한참 보내고 다시 이슈를 해결하고 나면 순조롭게 진행하다가 이슈가 또 생기면 이를 해결하기 위해 시간을 보내고.. 그래도 동료들과 함께하니 빠르게 해답을 찾아낼 수 있어서 다행이다. 더욱 다행인건 eunhkim님처럼 깨달은 바를 잘 전파하는 동료를 뒀다는 것이다. 이런걸 잘 흡수해야지.

다음 학습 계획

• AppearanceView 구현 완료