WebSocketとCanvasでオンライン対戦オセロを作ろう 第2回 全体の設計

WebSocketとCanvasでオンライン対戦オセロを作ろう企画第2回を社内の勉強会で発表しました。その時に使用したスライドを公開します。

スライド

WebSocketとCanvasでオンライン対戦オセロを作ろう 第2回 全体の設計

View more presentations from Matsuoka Toru

補足

勉強会のときにオンラインゲームのアーキテクチャについてホワイトボードで補足したのでそれについて書いておきます。

今回のようなクライアント/サーバ型のアプリケーションでは、サーバに持たせる機能によって「ピュアサーバ型」と「リフレクト型」2種類のアーキテクチャがあります。それぞれ以下の特徴があり、今回は「リフレクト型」を採用しました。

ピュアサーバ型

ピュアサーバ型は、クライアントからの入力に対してサーバ側で演算を行い、結果をクライアントに返すというアーキテクチャです。
オセロの場合、プレイヤーが石をおいた場所の情報を受け取り、石を何個返すことが出来たかや、石をおいた後の盤面の状態を両方のプレイヤーに返すような実装になります。
そうすることで、クライアント側のプログラムは盤面の状態を描画する処理に専念することが出来、また対戦相手との状態の不整合が起きなくなります。一方、サーバ側の処理が多くなるため、クライアント数が多くなると処理が厳しくなってきます。

リフレクト型

リフレクト型は、クライアントからの入力に対してとくに演算を行わず、接続されているもう片方のクライアントにそのまま転送するというアーキテクチャです。サーバを介しておきながらほとんどP2Pのような感覚で通信します。
オセロの場合、プレイヤーが石をおいた場所の情報を受け取り、そのまま対戦相手に送信するという実装になります。
サーバは誰と誰が対戦中なのかを管理すればいいだけなので、クライアント数が増えてもそこまで処理が厳しくなることはありません。ただ、クライアント側で相手の入力が不正じゃないかをチェックする必要があり、クライアント側の処理はやや複雑になります。

今回リフレクト型を採用した理由は、一旦オフラインで遊べるオセロを実装し、対戦相手の入力をネットワーク経由で受けられるようにすればいいだけだと考えたためです。

参考書籍

ピュアサーバ型・リフレクト型についての説明は、以下の本を参考にしました。

オンラインゲームを支える技術 --壮大なプレイ空間の舞台裏 (WEB+DB PRESS plus) 単行本（ソフトカバー）