[Game] graphql subscription vs. websocket

[yechoi42]

둘 중 선택의 근거를 모아봅시당.
아래는 고민/서치해봐야 할 점들인데, 생각나는 게 있다면 추가해주세요.

• 기존의 웹소켓 라이브러리들이 웹소켓을 지원하지 않는 브라우저에서는 http로 '웹소켓처럼' 작동하게 하도록 지원하는데, graphQL subscription도 가능한가?
• websocket library 간 비교

[yechoi42]

기존의 웹소켓 라이브러리들이 웹소켓을 지원하지 않는 브라우저에서는 http로 '웹소켓처럼' 작동하게 하도록 지원하는데, graphQL subscription도 가능한가?

• 공식문서를 찾지는 못했지만 websocket fallback으로 socket.io를 써야하는지 물어보는 reddit 글이나 subscription에서 websocket fallback을 지원했으면 한다는 이슈를 보았을 때, 아직 subscription은 websocket이 불안정하거나 지원되지 않을 때의 대안을 갖추고 있지 않는 것으로 보임.
• websocket을 지원하지 않는 브라우저가 있는 경우 또는 websocket이 불안정한 상황의 경우 GraphQL의 Subscription은 문제가 생길 수 있음.

[hochan222]

기존의 웹소켓 라이브러리들이 웹소켓을 지원하지 않는 브라우저에서는 http로 '웹소켓처럼' 작동하게 하도록 지원하는데, graphQL subscription도 가능한가?

아래 호환표를 보면 이미 충분히 많은 브라우저의 버전들이 지원을합니다. 저희 subject에서는 브라우저의 특정 버전 이상이 아닌 해당 브라우저만 지원하면 되어서 웹소켓을 지원하지 않는 브라우저를 고려하지 않아도 됩니다. 또한, 직접 websocket을 사용하지 않고 Socket.io 같은 라이브러리를 사용한다면 이미 브라우저 별로 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하기때문에 고려하지 않아도 됩니다.

• https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API#browser_compatibility

참고

• https://d2.naver.com/helloworld/1336

---

고려해야할 사항이 있다면 아래 사항을 추가적으로 고려해보는것도 좋을것같습니다.

• 실시간 성을 잘 보장할 수 있는 방법
• 현존하는 레퍼런스
• 본 프로젝트에서 얼마나 빨리 적용할 수 있는가?

[yechoi42]

또한, 직접 websocket을 사용하지 않고 Socket.io 같은 라이브러리를 사용한다면 이미 브라우저 별로 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하기때문에 고려하지 않아도 됩니다.

넵 맞아요. subscription을 주로 사용할 거면 websocket 문제에 대한 자체적인 보완책이 없기 때문에, 부가적으로 socket.io 같은 보완이 필요하다는 의미의 이야기였어요.
별개로 보완책으로 socket.io를 사용한다면, subscription을 사용해야 할 필요가 있을까? 싶긴 합니다.

추가적인 고려사항에 대해선

• 현존하는 레퍼런스: socket.io 등의 웹소켓 라이브러리가 우위로 보입니다.
• 본 프로젝트에서 얼마나 빨리 적용할 수 있는가?: 는 앞선 '현존하는 레퍼런스'에 의존적인 것 같네요. 다른 변수가 있다면 이야기해주세요 !
• 실시간 성을 잘 보장할 수 있는 방법: subscription에선 실시간성 보장이 어렵다는 이슈가 있다고 했는데, 웹소켓 라이브러리를 써도 이러한 문제가 생길까요?

[hochan222]

별개로 socket.io를 사용한다면, subscription을 사용해야 할 필요가 있을까? 싶긴 합니다.

socket.io을 사용하는 방법에서는 subscription은 사용하지 않는다고 생각을했습니다.

본 프로젝트에서 얼마나 빨리 적용할 수 있는가?

에 대해서는 저희는 우선 graphql 서버를 세팅해놓았고 subscription말고도 graphql 관련 websocket 라이브러리가 여러개가 있는데, 어느것의 비용이 적을지를 고려를 해보아야한다는 의미였습니다.

실시간성 같은 경우에는 라이브러리보다는 저희가 짜는 로직에 따라 크게 달라질것같습니다. (일정 delay를 주는 방법등) 하지만, 라이브러리의 기능들에 의해 로직이 결정될 수 있다고 생각해서 이것 또한 조사가 조금 필요합니다.

---

이것과는 별도로 graphql과 socket.io를 같이 사용하는것이 권장되는 패턴인지는 한번 확인해 볼 필요가 있다고 생각합니다.

---

[hochan222]

• subscriptions-transport-ws
  • You don’t need any additional libraries like Socket.io or similar, since this one package handles everything you need for GraphQL subscriptions.

[yechoi42]

• graphql-ws
  • subscriptions-transport-ws 라이브러리가 지속적으로 메인테인되지 않아 자주 사용되는 라이브러리입니다. subscriptions-transport-ws 에서도 graphql-ws를 사용할 것을 권장합니다.

[hochan222]

• graphql over websockets

---

• WebRTC
  • WebRTC는 비디오, 오디오 및 임의 데이터의 고성능, 고품질 통신을 위해 설계
• WebSocket
  • WebSocket은 클라이언트와 서버 간의 양방향 통신을 위해 설계

우리가 사용할것 WebSocket

---

• 게임 동기화 기법
  • https://blog.naver.com/PostView.naver?blogId=linegamedev&logNo=221060368580&parentCategoryNo=&categoryNo=10&viewDate=&isShowPopularPosts=false&from=postView

[hochan222]

Because subscription updates are usually pushed by the server (instead of polled by the client), they usually use the WebSocket protocol instead of HTTP.
출처: apollo server, https://www.apollographql.com/docs/apollo-server/data/subscriptions/

nestjs에서 쓰고 있는 서버는 apollo server이며, websocket 프로토콜을 사용하고있다.

#120 에서 yarn add subscriptions-transport-ws로 subscription을 구현했다. 이유는 apollo server 공식 홈페이지에서 권장하고 있는 방법이기 때문.

그렇다면 graphql-ws을 사용하려고할 때 기존 subscriptions-transport-ws을 고려해야한다.

[yechoi42]

이미 사용하고 있고 에러상황을 마주한 적이 없으면 계속 사용하는 게 더 효율적이겠네요.
에러가 생기면 그때 고민해보죠 ㅋㅋㅋ

[hochan222]

그럼 빠르게 subscriptions-transport-ws 을 이용해서 1초에 60번 렌더링하는걸 기준으로 프로토타입 만들어볼까요?

[hochan222]

폴더명: playing-info

• ball
  • x
  • y
• player1Y
• player2Y