Log

いろいろ

WebSocketを調べて利用した際のメモ書き

「手札からカードを場に出してバトルする」形式の対戦ゲームを作りました。

その際にWebSocketを利用したのでメモ書き。主に資料用の画像置き場です。

とても簡単なシステム構成

f:id:mtzml:20210320163220p:plain

対戦ゲームにおける純粋なHTTP通信の問題点

HTTP通信はHTTPリクエストとHTTPレスポンスからなる。

f:id:mtzml:20210320163656p:plain

サーバー側を起点に通信を行うことが出来ない。そのため

  • ルームへのログインを他のユーザーにどうやって通知するか
  • ゲームの開始をどうやって通知するか

などの問題が存在する。

双方向通信を実現する技術

ポーリング

f:id:mtzml:20210320164003p:plain

定期的にクライアントからHTTPリクエストを投げる。

ロングポーリング

f:id:mtzml:20210320164234p:plain

HTTPレスポンスをイベント時またはタイムアウトになるまで保留する。

WebSocket

f:id:mtzml:20210320164310p:plain

一度コネクションを確立した後はそのコネクション上で通信を行う。

WebSocketでは

  • 通信の度にコネクションを確立する必要が無く
  • HTTPより軽量なプロトコルである

ことからリアルタイム性に優れる。

Socket.IOは良い感じにリアルタイムWebを実現する

f:id:mtzml:20210320164531p:plain

Socket.IOはJavaScriptのライブラリ(クライアント/サーバー)であり、WebSocketの実装を隠ぺいする。

また、WebSocketが使えなければロングポーリングを使用する。

リアルタイムWebによる対戦ゲームの実現

f:id:mtzml:20210320164902p:plain

f:id:mtzml:20210320164747p:plain

f:id:mtzml:20210320164831p:plain