とあるプログラマーの技術ブログ

Flask

Reactサンプルアプリ開発 プラニングポーカー まとめ

いったんサンプルアプリとしての機能は完成したので、まとめ。 React Hooksの勉強のため、プラニングポーカーを題材にしたサンプルアプリを開発した。ソースコードはGitHubにアップしてある。また、サンプルアプリはHerokuにデプロイしてある（無料枠だが）https://pp-a-pp.herokuapp.com/ テクノロジースタックは以下。 フロントエンド言語TypeScriptツールBabelWebpackcreate-react-appUIライブラリReactReact HooksReact Transition Group (CSSトランジッション)react-i18next …
Poker

Reactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行う

プラニングポーカーアプリでは、プレイヤーの参加、入札、オープンといった各種イベントをWebSocketによる双方向通信で行い、リアルタイム性を実現している。ライブラリとしては、クライアント側(JavaScript)はsocket.io-clientを、サーバー(Flask-SocketIO)を利用している。 実はこれまでの実装には致命的な欠陥があった。1つの場を利用しているときはよいのだが、別のユーザーが別の場を開いた場合にそれぞれの場同士が干渉し合ってしまうのだ。これでは使いものにならない。 チャットアプリにおけるチャットルームのような、複数のクライアントのグルーピングを行って、WebSoc…
1
2020-05-16
Poker

Reactサンプルアプリ開発 プラニングポーカー (10) Bidの通知

まず初めに前回の投稿で書いた以下の設定はNGだったので修正する。具体的には、WebSocket通信が一定数で404 Bad requestになってしまう現象が起こった。どうやらgunicornのロードバランシング機能がスティッキーセッションをサポートしていないのが原因らしい。 web: gunicorn app:app --workers 2 --thread 4 --log-file - 代わりにeventletやらをインストールして非同期モードで動作させればよいらしい。 (venv) $ pip install eventlet (venv) $ pip freeze > requi…
1
2020-05-09
Poker

Reactサンプルアプリ開発 プラニングポーカー (9) Redisを使う

プラニングポーカーの場の情報（場名や参加プレイヤー名）をFlaskアプリケーションのトップレベルの変数に格納していたが、これだとHerokuにデプロイしたときにちゃんと動作しないので、Redisに永続化することにする。 ローカル環境ではDockerでRedisサーバを起動しよう。 version: '2' services: redis: image: redis:latest ports: - "6379:6379" command: redis-server --appendonly yes volumes: - ./data/redis:/data 上…
1
2020-05-06

Reactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知する

親プレイヤーが開いた場に子プレイヤーが参加した際に、参加中にプレイヤーに対して通知を行って画面更新を行わたい。それにはWebSocketによる双方向通信が必要だ。 サーバー側（Flaskアプリケーション）は、Flask-SocketIOを用いる。まずはインストール。 (venv) $pip install flask-socketio インポート（1行目）とインスタンス生成（6行目）。 from flask_socketio import SocketIO, emit import uuid app = Flask(__name__, static_folder="public&qu…
2020-05-05
Poker

Reactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにする

前回は、親が場を開くと場の画面へ遷移し、Ajaxで取得したプレイヤーリストを表示するところを実装した。 今回は、この場に対して他のプレイヤーが参加できるようにする。開いた場のURLは親が何らかの手段で伝達済みであるとし、そのURLにアクセスすると以下の画面が開く。 ニックネームを入れて「参加する」をクリックすると場の画面へ遷移する。 まず、参加しているユーザーの状態はセッションで管理することにする。 from flask import Flask, render_template, request, redirect, jsonify, session import uuid app = Fl…
2020-05-03
Poker

Reactサンプルアプリ開発 プラニングポーカー (6) Ajaxでプレイヤーリストをフェッチ

トップページから場を開いたあとに表示されるプレイヤーはダミーデータを用いていたが、実際のデータを取得して表示するように修正したい。トップページで以下のように入力すると トップページ 遷移後のページで以下のように表示されるようにする。（親プレイヤーのみが表示される） 場のページ まずはサーバー(Flask)側。場を開いたタイミングで、プレイヤーの配列に親を入れてグローバル変数に保存しておく。 @app.route("/table/open", methods=) def open(): table_name = request.form parent_name = reque…
2020-04-29
Poker

Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移

今回は、トップ画面からポーカーを行う「場」の画面への遷移を実装する。トップ画面は以下。 トップ画面 場名とニックネームを入力し「場を開く」をクリックすると、以下の画面に遷移するようにしたい。 場の画面 Flaskど素人なので、基本的なところから調べつつ実装。まずトップ画面のフォームはTopPageコンポーネントに配置しているので、そこを修正。 export const TopPage: FunctionComponent = () => { return ( <> <header className="header"> <h1 class…
2020-04-23