表も裏もすべて見せます！ KLab謹製大規模オンラインゲームのリアルタイムチャットマイクロサービス

1. KLabについて

2. © KLab Inc. 2022 3 ミッション：「世界と自分をワクワクさせろ」ビジョン：「エンターテインメントで、世界中のユーザーをひとつにつなげる」社会に感動と喜びを提供できるような、サービス・技術を創造しています。会社紹介：KLab株式会社（クラブ）設立 2000年8月1日資本金 53億6364万円（2022年10月末現在）株式公開市場東京証券取引所･プライム市場（3656）代表者代表取締役社長CEO 森田英克代表取締役副会長五十嵐洋介所在地本社（東京都港区、六本木ヒルズ森タワー）大阪事業所、福岡事業所、仙台事業所主要関連会社株式会社BLOCKSMITH&Co. 株式会社グローバルギア海外拠点可来软件开发（上海）有限公司（KLab China Inc.）グループ従業員数正社員 553名(2022年9月末時点) 主力：ゲーム事業アニメ、コミック、ゲームなど、世界中で人気の高いIPを原作としたモバイルオンラインゲームを国内外に展開。現在155の国と地域で配信その他：スマートフォン関連のアプリケーション、サービス及びサーバーインフラの企画、開発、提供、新規事業開拓など

3. © KLab Inc. 2022 4 コーポレートサイト紹介 https://www.klab.com/jp/

4. 本日の講演について

5. © KLab Inc. 2022 6 本日の講演について勝見祐己 6つのゲームで採用されたチャットサービスの作り方〜マイクロサービスは使い回しがきく♪〜𠮷富愛梨沙 Kubernetesで作るマイクロサービス〜複数プロジェクト×複数環境でも大丈夫🥤〜山内敏彰ゲーム内チャットのUIをWebViewで実装してみた話～Unityと絵文字🤗🐩～山田雅人 Push通知でチャットサーバの負荷対策〜常時接続やめました🔌〜

6. 6つのゲームで採用されたチャットサービスの作り方〜マイクロサービスは使い回しがきく♪〜

7. superficial

8. © KLab Inc. 2022 9 ゲーム内チャット？

9. © KLab Inc. 2022 10 ゲーム内チャット？

10. © KLab Inc. 2022 11 KMS -- KLab Messaging Service ● 内製の、ゲーム内チャットシステム ● KLabのゲーム用に開発 (2015年〜運用￭汎用性をもたせて開発(特定のゲーム用ではない￭６タイトルに採用(予定含む ● 現在は Kubernetes®上で運用￭当初はオンプレ環境で運用 https://youtu.be/vgcspB34-ro 「KLabチャットシステムインフラ変遷」 KLabのチャットサービス

11. © KLab Inc. 2022 12 KMSの設計思想 ○ 汎用のゲーム内チャットシステム ■ 特定のゲームのために設計されたものではない ○ チャットメッセージの中身や表示の仕方はゲーム側に一任 KMSの主要な構成要素は5つ KMS ― このセクションで話すこと ○ Client API ○ Message Bus ○ Push通知サービス ○ Server API ○ DB

12. © KLab Inc. 2022 13 汎用的なゲーム内チャットシステム ● 開発もシステム運用も完全に分離 ● ゲームシステムとは疎結合￭ゲーム側とはAPIでやり取り￭マイクロサービス ( Not! ライブラリ ) KMS ― 設計思想 KMSチームゲームチーム

13. © KLab Inc. 2022 14 汎用的なゲーム内チャットシステム ● 開発もシステム運用も完全に分離 ● ゲームシステムとは疎結合￭ゲーム側とはAPIでやり取り￭マイクロサービス ( Not! ライブラリ ) KMS ― 設計思想 1つのシステム/サービスを構成する複数の機能/要素を分解し、それぞれを切り出して1つのシステムとしたもの ex: ショッピングサイト ● ID 管理システム ● 決済機能 ● データ分析 KMSチームゲームチーム

14. © KLab Inc. 2022 15 KMS ― 役割ゲームクライアント間の、チャットメッセージの配送 ● 最大の役割 + 周辺機能チャットメッセージ配送のための仕組みを提供 ● メッセージの中身はノータッチ ● メッセージの表示の仕方もノータッチ

15. © KLab Inc. 2022 16 KMS ― 役割ゲームクライアント間の、チャットメッセージの配送 ● 最大の役割 + 周辺機能チャットメッセージ配送のための仕組みを提供 ● メッセージの中身はノータッチ ● メッセージの表示の仕方もノータッチ ● 普通のチャット ● 対戦機能の、対戦相手の募集

16. © KLab Inc. 2022 17 ● Game Client API ○ ゲームクライアントと直接やり取りする ○ メインは、チャットメッセージのやり取り ● Game Server API ○ ゲームサーバからのリクエストを受け付ける ○ ユーザ管理やチャンネル管理などの機能を提供 ● DB / Message Bus ○ サーバ間の、メッセージやデータのやり取りを仲立ち ● Push通知サービス KMS ― システム構成

21. © KLab Inc. 2022 22 KMS system Client API Server API Game Servers KMS ― システム構成(Client API) Message Bus チャットメッセージ等 DB Push通知サービス

22. © KLab Inc. 2022 23 KMS system Client API Server API Game Servers KMS ― システム構成(Server API) Message Bus ユーザ登録など DB Push通知サービスチャットメッセージ等接続してくるゲームクライアントの、認証情報など

23. © KLab Inc. 2022 24 KMS system Client API Server API Game Servers KMS ― システム構成(Backend) Message Bus チャットメッセージ等ユーザ登録など DB Push通知サービス Push 通知メンション付きメッセージ

24. into the Depth!

25. © KLab Inc. 2022 26 KMS system Client API Server API Game Servers KMS ― システム構成(通信) Message Bus DB Push通知サービス WebSocket HTTPS 単純な Request & Response 通信

26. © KLab Inc. 2022 27 KMS system Client API Server API Game Servers KMS ― システム構成(通信) Message Bus DB Push通知サービス WebSocket HTTPS 常時接続新着メッセージをClient API側から送るのに必要

27. © KLab Inc. 2022 28 Client API KMS システム ― Client API Client API ● クライアント認証 ● チャット送信 ● チャット受信 ● 過去ログ取得 ● 既読管理 ● ユーザ情報取得

28. © KLab Inc. 2022 29 KMS KMS システム ― Server API Server API Game Servers Server API ● ユーザ管理 ● チャンネル管理 ● システムメッセージ投稿 ● NG word 管理 ● メンテ状態管理

29. © KLab Inc. 2022 30 ex: チャンネルへの参加について ● オープンチャンネルへの参加は、Client API ○ ex: ワールドチャット = 誰が参加しても OK ● クローズドチャンネルへの参加は、Server API ○ ex: ギルドチャット = ギルドメンバーだけが参加ゲームデザインに基づく判断は、KMSでは行わない ○ 判断が必要な操作は (Game Client) → Game Server → Server API Client API / Server API 役割分担

30. © KLab Inc. 2022 31 ex: チャンネルへの参加について ● オープンチャンネルへの参加は、Client API ○ ex: ワールドチャット = 誰が参加しても OK ● クローズドチャンネルへの参加は、Server API ○ ex: ギルドチャット = ギルドメンバーだけが参加ゲームデザインに基づく判断は、KMSでは行わない ○ 判断が必要な操作は (Game Client) → Game Server → Server API Client API / Server API 役割分担

31. © KLab Inc. 2022 32 Client API KMS ― システム構成(バックエンド) Message Bus DB Server API DB(RDB) ● チャットログ ● ユーザ情報 ○ 認証情報 ● チャンネル情報 Message Bus ● サーバ間のメッセージ送受信を仲立ち ○ チャットメッセージ ○ データ更新情報 Game Servers

32. © KLab Inc. 2022 33 Client API KMS ― システム構成(バックエンド) Message Bus DB Server API DB(RDB) ● チャットログ ● ユーザ情報 ○ 認証情報 ● チャンネル情報 Message Bus ● サーバ間のメッセージ送受信を仲立ち ○ チャットメッセージ ○ データ更新情報 Game Servers Client API も Server API も複数台のサーバで運用

33. © KLab Inc. 2022 34 Client API KMS ― システム構成(Message Bus) Message Bus DB Server API サーバは複数台＝女の子と男の子は別サーバへ接続 1. 女の子からのメッセージが上のサーバへ届く 2. 男の子は別のサーバに接続しているのでMessage Busへ 3. Message Busを経由して下のサーバへメッセージを転送 4. 下のサーバから男の子へ、女の子のメッセージが届く Game Servers ① ② ③ ④

38. © KLab Inc. 2022 39 Client API KMS ― システム構成(Message Bus) Message Bus DB Server API Game Servers ⑤ ⑥ ⑦ ⑦ ⑧ ⑧ Server APIへの更新情報＝ex:新規チャンネル参加 5. ゲームサーバから Server API へリクエスト 6. 更新情報を Message Bus へ 7. Client API のサーバへ更新情報が届く 8. ゲームクライアントに、チャンネル参加情報が届く

43. © KLab Inc. 2022 44 Pub/Sub topicを軸にメッセージを a) Publishすると b) Subscribeしてる全員に届く KMS ― Message Bus Message Bus ● Redis (以前は IRC) ○ Master - Replica ● Pub/Subのみ利用 Client API Publish Sub- scribe Subscribe Replica Replica Master Redis Icon: © Liran.amir, CC BY-SA 4.0 Replication

44. © KLab Inc. 2022 45 KMSはゲーム用のチャットマイクロサービス ● ゲーム側の事情を持ち込まないことで汎用性を確保 ● 結果 ○ 6タイトルのゲームに採用 ○ チャット以外の用途にも活用最後に

45. © KLab Inc. 2022 46 この後のセクションに向けて KMSは Kubernetes上で運用 KMSはゲーム用のチャットマイクロサービス ○ チャットメッセージ配送のための仕組みを提供 ○ チャットメッセージの中身や表示はゲームクライアント任せ KMSの主要な構成要素は5つ ○ game client 用の Client API ○ game server 用の Server API ○ Push 通知サービス ○ DB / Message Bus(Redis)

46. Kubernetesで作るマイクロサービス〜複数プロジェクト×複数環境でも大丈夫🥤〜

47. KMSのシステム構成

48. © KLab Inc. 2022 49 KMSのシステム構成 Client API Server API ログ収集メッセージバスメトリクス収集 etc… KMSを構成するアプリケーション群

49. © KLab Inc. 2022 50 KMSのシステム構成ゲーム① 本番KMS 開発KMS ゲーム② 本番KMS 開発KMS ゲーム③ 本番KMS 開発KMS KMSには沢山環境があるゲーム環境毎に開発・本番など... ：：

50. © KLab Inc. 2022 51 複数のアプリケーションの運用にKMSでは Kubernetes(k8s)を利用本スライドではどのようにKMSをk8sを利用して運用管理を行っているか紹介していきます KMSのシステム構成

51. Kubernetesについて

52. © KLab Inc. 2022 53 Kubernetesとは：複数のコンテナを統合管理するコンテナオーケストレーションツール Kubernetesについて Kubernetesの主な機能 ● サービスディスカバリーと負荷分散 ● ストレージオーケストレーション ● 自動化されたロールアウトとロールバック ● 自動ビンパッキング ● 自己修復 ● 機密情報と構成管理今回はこれらの機能について具体的な話はほぼしません

53. © KLab Inc. 2022 54 システムの管理・運用のためのリソース： ● 実行するアプリケーションに関するリソース￭ (ワークロードリソース) ￭ Pod、Deployment、DaemonSet ● 負荷分散・アプリケーションの公開に関するリソース￭ Service、Ingress Kubernetesについて

54. © KLab Inc. 2022 55 今スライドで出てくるリソース ● Pod ￭実行中のコンテナを抽象的に扱うリソース ● Service ￭ Podへのエンドポイントを管理するリソース ○ エンドポイント：アクセスする方法 ● Ingress ￭ Serviceに対する外部からのアクセスする方法を管理するリソース Kubernetesについて

55. © KLab Inc. 2022 56 機能毎にシステムを細かく分離するマイクロサービス構成を実現 Kubernetesについて Client API Server API ログ収集メッセージバスメトリクス収集動作するコンテナは Pod単位に抽象化されるので、コンテナ内での技術選定は自由になる

56. KMSのK8s構成

57. © KLab Inc. 2022 58 KMSのK8s構成 ALB Message Bus Game Server API Game Client API WSS HTTPS Pub/Sub RDS Game Server API Game Client API

58. k8sリソースの管理

59. © KLab Inc. 2022 60 k8sリソースはテキストベースで管理が出来る k8sリソースの管理マニフェストファイル： k8sリソースをYAML(またはJSON)形式で内容を定義作成・削除・変更などの操作 apiVersion: v1 kind: Pod metadata: namespace: default name: test labels: app: test spec: containers: - name: app1 image: testapp:latest マニフェストファイル例

60. © KLab Inc. 2022 61 k8sリソースの管理 apiVersion: v1 kind: Pod metadata: namespace: default name: test labels: app: test spec: containers: - name: app1 image: testapp:latest リソースの種別リソースのメタ情報リソースの状態リソースの希望の状態を定義 k8sはこの状態を目指して管理を行う k8sのバージョン

61. © KLab Inc. 2022 62 KMSの環境は沢山ある ● ゲーム毎の環境 ● 開発・本番・ステージングetc... k8sリソースの管理環境差分の管理にはKustomizeを利用ゲーム① 本番KMS 開発KMS ゲーム② 本番KMS 開発KMS ゲーム③ 本番KMS 開発KMS ：： └ ホスト名・スケーリングの設定など

62. © KLab Inc. 2022 63 k8sリソースの管理 Kustomizeとは： k8sマニフェスト管理ツールベースとなるマニフェストファイルを、変更したい箇所だけ上書き apiVersion: v1 kind: Pod metadata: namespace: default name: test labels: app: test spec: replicas: 1 containers: - name: app1 image: testapp:latest apiVersion: v1 kind: Pod metadata: namespace: default name: test spec: replicas: 3 ベース上書き apiVersion: v1 kind: Pod metadata: namespace: default name: test labels: app: test spec: replicas: 3 containers: - name: app1 image: testapp:latest 適用される内容

63. CD(継続的デリバリー)

64. © KLab Inc. 2022 65 CDツールとしてArgoCDを利用 CD(継続的デリバリー) PUSH 変更を検知デプロイ開発者 GitHub Argo CD k8s Podの状態を管理出来る

65. © KLab Inc. 2022 66 ● KMSはKubernetesで運用￭疎結合なシステム￭テキストベースでの管理 ● さらにKustomize・ArgoCDを利用￭複数環境￭ CD まとめ

66. ゲーム内チャットのUIをWebView で実装してみた話～Unityと絵文字🤗🐩～

67. © KLab Inc. 2022 68 ● 今回とあるアプリにチャット機能を導入したお話をします￭クライアントの役割とUIにWebViewを採用した話 ● 特にWebViewはKLabの中でも特殊な使いをした前置き

68. © KLab Inc. 2022 69 ● 簡単な構成と役割の紹介 ● チャットの発言時を例にして処理の流れ紹介 ● WebViewの表示で困ったところもくじ

69. 簡単な構成と役割

70. © KLab Inc. 2022 71 簡単な構成と役割クライアント(Unity) WebView チャットScene KMS ゲームサーバー各種情報の取得や更新取得した情報の表示 KMS クライアントライブラリ各種情報の取得や更新 KMSに関する情報の取得や更新

71. © KLab Inc. 2022 72 KMSとの通信をラップしたライブラリ ● KMSのAPIを簡単に利用できる￭各ゲーム制作チームは導入コストが軽減される ● 開発を社内の基盤系ライブラリチームが担当簡単な構成と役割: KMSクライアントライブラリクライアント(Unity) WebView チャットScene 取得した情報の表示 KMS クライアントライブラリ KMSに関する情報の取得や更新これ

72. © KLab Inc. 2022 73 大まかに提供される機能 ● クライアントからKMSに対して情報を取得/更新するためのインターフェースの提供 ● KMSからクライアントに対して送られる情報を受け取るためのインターフェースの提供簡単な構成と役割: KMSクライアントライブラリ

73. © KLab Inc. 2022 74 ● クライアントからKMSに対して情報を取得/更新するためのインターフェースの提供 ● KMSからクライアントに対して送られる情報を受け取るためのインターフェースの提供簡単な構成と役割: KMSクライアントライブラリゲームクライアント KMS ゲームクライアント KMS ・新しい発言をしたい！・チャンネルに参加したい！・他ユーザーの新しい発言があるよ！・他ユーザーからチャンネルに招待されたよ！

74. © KLab Inc. 2022 75 ● クライアントからKMSに対して情報を取得/更新するためのインターフェースの提供 ● KMSからクライアントに対して送られる情報を受け取るためのインターフェースの提供￭ KMSからどのタイミングで通信が来るのかがわからない簡単な構成と役割: KMSクライアントライブラリゲームクライアント KMS ゲームクライアント KMS ・新しい発言をしたい！・チャンネルに参加したい！・他ユーザーの新しい発言があるよ！・他ユーザーからチャンネルに招待されたよ！

75. © KLab Inc. 2022 76 KMSからどのタイミングで通信が来るのか分からない ● 通信を受けたらすぐ処理を行わず以下のような考慮が必要￭他の何らかの処理を実行中ではないか￭実行中の場合、KMSから受け取ったときの処理を並行で実行してよいものか￭ダメならKMSの処理を一旦保留しておいて準備が出来たら実行する ● 例えばブロックの処理中に新たなメッセージが届いた場合￭ブロック処理が完了するまで届いたメッセージの表示は保留簡単な構成と役割: KMSクライアントライブラリ

76. © KLab Inc. 2022 77 ● チャットの表示(UI)部分を担当 ● ネットワーク上のウェブページではなく、アプリに同梱するローカルのHTMLファイルを参照簡単な構成と役割: WebView クライアント(Unity) WebView チャットScene 取得した情報の表示 KMS クライアントライブラリ KMSに関する情報の取得や更新これ

77. © KLab Inc. 2022 78 WebViewを採用した経緯 ● 要件で「絵文字(Unicode絵文字)👍」を利用したかった ● Unity標準のコンポーネントでは絵文字は使用不可 ● 要件を満たしたサードパーティのアセットもなかった ● WebViewであれば絵文字を表示できることが判明簡単な構成と役割: WebView

78. © KLab Inc. 2022 79 ● メリット￭ Unicode絵文字が利用できる😄 ● デメリット￭ UIの構築にWebView(HTML/CSS/JavaScript)が必要 ○ Web系のスキルが必要￭ WebView⇔Unity間でデータのやり取りが必要 ○ 間にネイティブ(javaやswift等)を介した実装が必要￭ WebView独自の挙動が発生する ○ OS/バージョン依存がある簡単な構成と役割: WebView

79. © KLab Inc. 2022 80 UnityのチャットScene実装 ● チャットのScene表示 ● ゲームサーバーとの通信 ● KMSクライアントライブラリを通してチャットに関する情報を取得 ● 取得した情報をWebViewに渡す簡単な構成と役割: チャットScene クライアント(Unity) WebView チャットScene 取得した情報の表示 KMS クライアントライブラリ KMSに関する情報の取得や更新これ

80. © KLab Inc. 2022 81 簡単な構成と役割: まとめクライアント(Unity) WebView チャットScene KMS ゲームサーバー各種情報の取得や更新取得した情報の表示 KMS クライアントライブラリ各種情報の取得や更新 KMSに関する情報の取得や更新

81. 処理の流れ紹介

82. © KLab Inc. 2022 83 処理の流れ紹介 WebView KMS (CL API) 発言内容を入力して送信ボタンを押下 KMSクライアントライブラリへデータを渡す KMSから発言成功のレスポンスを受け取る発言内容をWebView に送信して表示チャットScene KMS クライアントライブラリ発言内容をKMSへ送信発言成功のレスポンスを渡す

83. © KLab Inc. 2022 84 処理の流れ紹介 WebView KMS (CL API) 発言内容を入力して送信ボタンを押下 KMSから発言成功のレスポンスを受け取る発言内容をWebView に送信して表示チャットScene KMS クライアントライブラリ発言内容をKMSへ送信発言成功のレスポンスを渡す KMSクライアントライブラリへデータを渡す

84. © KLab Inc. 2022 85 発言内容を入力して送信ボタンを押下 & KMSクライアントライブラリへデータを渡す ● WebView上に入力エリアを表示￭入力のプレビュー段階でも絵文字を表示したいため ● WebViewからチャットSceneへ送る ● チャットSceneからKMSクライアントライブラリへ渡す￭ライブラリで定められたインターフェースに従う処理の流れ紹介

86. © KLab Inc. 2022 87 発言内容を入力して送信ボタンを押下 & KMSから発言成功のレスポンスを受け取る ● KMSクライアントライブラリからKMSの発言用の APIをコール ● KMSからレスポンスを受け取る￭ KMSからライブラリへレスポンスが返る処理の流れ紹介

88. © KLab Inc. 2022 89 発言成功のレスポンスを渡す & 発言内容をWebViewに送信して表示 ● KMSクライアントライブラリ、チャットScene、WebViewの順にレスポンスを渡す ● WebViewで表示￭新規発言のJavaScriptを実行処理の流れ紹介

89. © KLab Inc. 2022 90 処理の流れ紹介: まとめ WebView KMS (CL API) 発言内容を入力して送信ボタンを押下 KMSクライアントライブラリへデータを渡す KMSから発言成功のレスポンスを受け取る発言内容をWebView に送信して表示チャットScene KMS クライアントライブラリ発言内容をKMSへ送信発言成功のレスポンスを渡す

90. WebViewで発生した問題

91. © KLab Inc. 2022 92 1. スクロールバーのデザインを変更できない 2. 画像を長押しするとドラッグアンドドロップできる WebViewで発生した問題

92. © KLab Inc. 2022 93 デザインをCSSで変更していたが… ● スクロールバーの見た目がおかしい！と報告が来る￭端末標準のスクロールバーが表示されていた￭手元の端末ではカスタムしたデザインで表示されている🤔 ● 調査してみるとiOS13以上ではスクロールバーのデザインを変更できないケースがあるとのことスクロールバーのデザインを変更できない

93. © KLab Inc. 2022 94 どうしたか ● UIのデザインはアプリ全体で揃えたい ● ただOS上の制限なので対応が難しいスクロールバーのデザインを変更できない

94. © KLab Inc. 2022 95 選択肢 ● OSでスクロールバーのデザインが変わることを許容 ● チャットに関してはデザインのカスタマイズを廃止する ● HTMLのスクロールバーを使用せずスクロールバーを独自実装するスクロールバーのデザインを変更できない

95. © KLab Inc. 2022 96 選択肢 ● OSでスクロールバーのデザインが変わることを許容 ● チャットに関してはデザインのカスタマイズを廃止する ● HTMLのスクロールバーを使用せずスクロールバーを独自実装するスクロールバーのデザインを変更できない

96. © KLab Inc. 2022 97 ユーザーのアイコン画像を表示していたが… ● 画像を長押しすると画像をドラッグしている間動かせる￭なにそれ…🤯 ● iOS15(iPadOSは11)以上だと長押しでドラッグアンドドロップできる機能が追加されている￭例えばiPhone標準の写真アプリでも確認できる画像を長押しするとドラッグアンドドロップできる

97. © KLab Inc. 2022 98 どうしたか ● iOSのこの機能は明示的に利用しない限り有効とならない￭ただWebViewは勝手に有効となる事が判明 ● 機能的に害はないが防ぐ対応を入れてもらった￭基盤系ライブラリチームに感謝🙏 ● 余談。私がプレイしている他社のアプリでも同じ挙動を見たことがあります画像を長押しするとドラッグアンドドロップできる

98. © KLab Inc. 2022 99 ● 苦労したがWebViewで実現できました ● マイクロサービスでシステムとして切り分けされているメリットを享受できた￭ UIの構築に制限がなく、WebViewを採用する選択肢が取れたまとめ

99. Push通知でチャットサーバの負荷対策〜常時接続やめました🔌〜

100. © KLab Inc. 2022 101 簡単な構成紹介クライアント(Unity) チャットScene KMS ゲームサーバ各種情報の取得や更新 KMS クライアントライブラリ KMSに関する取得や更新 KMSに関する情報の取得や更新その他のScene FCM Push通知の送信各種情報の取得や更新 Push 通知

101. © KLab Inc. 2022 102 FCM クライアント(Unity) チャットScene KMS ゲームサーバ各種情報の取得や更新 KMS クライアントライブラリ KMSに関する取得や更新 KMSに関する情報の取得や更新その他のScene FCM Push通知の送信各種情報の取得や更新 Push 通知 Push通知を送る Firebase Cloud Messaging

102. © KLab Inc. 2022 103 FCM Firebase Cloud Messaging（FCM）は、無料で確実にメッセージを送信できるクロスプラットフォームのメッセージングソリューションです。 ※公式ドキュメントより引用 iOSとAndorid双方にPush通知を送るサービス

103. © KLab Inc. 2022 104 本日話すところクライアント(Unity) チャットScene KMS ゲームサーバ各種情報の取得や更新 KMS クライアントライブラリ各種情報の取得や更新 KMSに関する取得や更新 KMSに関する情報の取得や更新その他のScene FCM Push通知の送信 Push 通知この部分について話します

104. © KLab Inc. 2022 105 WebSocketとPush通知クライアント(Unity) チャットScene KMS ゲームサーバ各種情報の取得や更新 KMS クライアントライブラリ各種情報の取得や更新 KMSに関する取得や更新 KMSに関する情報の取得や更新その他のScene FCM Push通知の送信 Web Socket チャット画面のみ Push通知でリアルタイム性をカバー Push 通知

105. © KLab Inc. 2022 106 常時接続のメリット ● サーバ側からリアルタイムでクライアントに情報送信常時接続のデメリット ● サーバに負荷がかかる￭特に今回は規模が大きいゲーム Push通知を使って常時接続やめる

106. © KLab Inc. 2022 107 常時接続のメリット ● サーバ側からリアルタイムでクライアントに情報送信常時接続のデメリット ● サーバに負荷がかかる￭特に今回は規模が大きいゲーム Push通知を使って常時接続やめる Push通知を使ってカバー

107. © KLab Inc. 2022 108 本日のアジェンダ ● ゲームの機能と仕様の紹介 ● ゲームサーバでやること ● クライアントでやること ● 苦労したこと

108. © KLab Inc. 2022 109 ゲームの機能と仕様の紹介 ● ゲームの機能と仕様の紹介 ● ゲームサーバでやること ● クライアントでやること ● 苦労したこと

109. © KLab Inc. 2022 110 ● チャット画面でのユーザー間のメッセージの通知 ● リアルタイム対戦の招待 ● チャットのテキストをアプリ内の別画面で通知する ※未ローンチのためスクショなどがお見せできませんゲームの機能と仕様の紹介

110. © KLab Inc. 2022 111 凡例 Push通知 Web API WebSocket 画面遷移 Push Web Socket 画面 ○○画面 ○○画面送信側の画面受信側の画面

111. © KLab Inc. 2022 112 ユーザー間のメッセージの通知一般的なチャットとプッシュ通知の関係と同じアプリを起動していなくてもほぼリアルタイムに通知が届くおはようチャット画面山田

112. © KLab Inc. 2022 113 ユーザー間のメッセージの通知おはよう山田おはようチャット画面おはようチャット画面画面通知から起動チャットに送信 Push通知送信 Push 一般的なチャットとプッシュ通知の関係と同じアプリを起動していなくてもほぼリアルタイムに通知が届く山田山田

113. © KLab Inc. 2022 114 リアルタイム対戦の招待対戦の招待でも同じようなことをしたい届いたメッセージからすぐに対戦したいユーザーA 対戦するユーザーB 対戦するユーザーC 対戦するユーザーD 対戦するチャット画面チャットに投稿対戦招待対戦しよう山田 Web

114. © KLab Inc. 2022 115 リアルタイム対戦の招待ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦するユーザーD 対戦する Game Start 山田 D マッチング成立状態チャット画面チャットに投稿画面対戦画面に遷移対戦の招待でも同じようなことをしたい届いたメッセージからすぐに対戦したい対戦招待対戦しよう山田 Web

115. © KLab Inc. 2022 116 リアルタイム対戦の招待ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦するユーザーD 対戦する山田対戦招待 Game Start 山田 D マッチング成立状態 Push 画面対戦画面に遷移チャット画面 Push通知チャットに投稿対戦画面に遷移画面対戦の招待でも同じようなことをしたい届いたメッセージからすぐに対戦したい対戦招待対戦しよう山田 Web

116. © KLab Inc. 2022 117 チャットのテキストをアプリ内の別画面で通知するアプリ起動中にもユーザー間のメッセージと招待メッセージがリアルタイムで通知され、通知からチャット画面や対戦画面に遷移できるようにするおはようチャット画面 Push

117. © KLab Inc. 2022 118 チャットのテキストをアプリ内の別画面で通知するアプリ起動中にもユーザー間のメッセージと招待メッセージがリアルタイムで通知され、通知からチャット画面や対戦画面に遷移できるようにする山田：おはようホーム画面などおはようチャット画面ゲーム内でリアルタイム通知 Push

118. © KLab Inc. 2022 119 チャットのテキストをアプリ内の別画面で通知するアプリ起動中にもユーザー間のメッセージと招待メッセージがリアルタイムで通知され、通知からチャット画面や対戦画面に遷移できるようにする山田：おはようチャット画面ホーム画面などおはようチャット画面ゲーム内でリアルタイム通知 Push おはよう山田画面

119. © KLab Inc. 2022 120 チャットのテキストをアプリ内の別画面で通知するアプリ起動中にもユーザー間のメッセージと招待メッセージがリアルタイムで通知され、通知からチャット画面や対戦画面に遷移できるようにする山田：おはよう Game Start 山田 D 対戦画面チャット画面ホーム画面など山田：対戦招待ホーム画面など画面ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦する対戦招待おはようチャット画面ゲーム内でリアルタイム通知ゲーム内でリアルタイム通知 Push Push おはよう山田画面

121. © KLab Inc. 2022 122 サーバでやることクライアント(Unity) チャットScene KMS ゲームサーバ各種情報の取得や更新 KMS クライアントライブラリ各種情報の取得や更新 KMSに関する取得や更新 KMSに関する情報の取得や更新その他のScene FCM Push通知の送信 Push 通知この部分について話します

130. © KLab Inc. 2022 131 どのように変換するか？おはようチャット画面山田山田おはようタイトル本文本文とタイトルに加えてメッセージの種別も追加で設定しておく Push通知の種類「チャット」 Push Push Push通知にも「イベント開始」などほかの種類がある

134. © KLab Inc. 2022 135 対戦招待のメッセージを中継するゲームサーバ KMS FCM iOS Andorid ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦する対戦招待対戦ボタンを押したらゲームサーバを経由して KMSに投稿 KMSはFCMにも送信 Web Web Push P u s h Web

135. © KLab Inc. 2022 136 対戦招待のメッセージを中継するゲームサーバ KMS FCM iOS Andorid ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦する対戦招待対戦招待の画面は KMSと常時接続していない (KMSの負荷を抑えるため) Web Web Push P u s h Web

136. © KLab Inc. 2022 137 対戦招待のメッセージを中継するゲームサーバ KMS FCM iOS Andorid ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦する対戦招待対戦に必要な情報を通知受信時に取得できるようにしておく Web Web Push P u s h Web

137. © KLab Inc. 2022 138 リアルタイム対戦の招待ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦するユーザーD 対戦する山田対戦招待 Game Start 山田 D マッチング成立状態 Push 画面対戦画面に遷移チャット画面 Push通知チャットに投稿画面対戦画面に遷移これでリアルタイム対戦の招待が完成対戦しよう山田 Web

139. © KLab Inc. 2022 140 クライアントでやることクライアント(Unity) チャットScene KMS ゲームサーバ各種情報の取得や更新 KMS クライアントライブラリ各種情報の取得や更新 KMSに関する取得や更新 KMSに関する情報の取得や更新その他のScene FCM Push通知の送信 Push 通知この部分について話します

142. © KLab Inc. 2022 143 チャットのテキストをアプリ内の別画面で通知する山田：おはよう Game Start 山田 D おはよう対戦画面チャット画面ホーム画面など山田：対戦招待ホーム画面など画面ユーザーA 対戦するユーザーB 対戦するユーザーC 対戦する画面対戦招待おはようチャット画面ゲーム内でリアルタイム通知ゲーム内でリアルタイム通知 ● Push通知をアプリ内通知に変換する ● アプリ内通知からの画面遷移 Push Push

144. © KLab Inc. 2022 145 OS通知画面からの起動山田おはようチャット画面画面チャット画面に遷移山田対戦招待 Game Start 山田 D 画面対戦画面に遷移通知に設定されたメッセージ種別からどこ画面に遷移するか判別可能おはよう山田

150. 本日のセッションの振り返り

151. © KLab Inc. 2022 152 本日のセッションの振り返り勝見祐己 6つのゲームで採用されたチャットサービスの作り方〜マイクロサービスは使い回しがきく♪〜𠮷富愛梨沙 Kubernetesで作るマイクロサービス〜複数プロジェクト×複数環境でも大丈夫🥤〜山内敏彰ゲーム内チャットのUIをWebViewで実装してみた話～Unityと絵文字🤗🐩～山田雅人 Push通知でチャットサーバの負荷対策〜常時接続やめました🔌〜

表も裏もすべて見せます！ KLab謹製大規模オンラインゲームのリアルタイムチャットマイクロサービス

Esté a ler uma amostra.

Confira estes a seguir

表も裏もすべて見せます！ KLab謹製大規模オンラインゲームのリアルタイムチャットマイクロサービス

Mais Conteúdo rRelacionado

Semelhante a 表も裏もすべて見せます！ KLab謹製大規模オンラインゲームのリアルタイムチャットマイクロサービス (20)

Mais de KLab Inc. / Tech (20)

Mais recentes (20)