雑記。書き足す予定です。
概要
Ajaxを使って、Pythonで算出されて出力した値をリアルタイムでWebサイトに表示したい。Pythonでロボットを制御して、かつWebアプリケーションとしてブラウザから制御や監視ができるようにすることでロボコンに活用したい。
時計は動作が一番わかりやすく、かつ自動で定期的にロードされる点がとても勉強になると考えて書いた。JavaScriptではなくPythonのdatetimeで現在時刻を取得している、すなわちサーバーサイドで取得している。
環境
- Windows 11
- Python 3.12.2
- VSCode
環境構築
bottleをpipでインストールします。
Powershell
pip install bottle
プログラムを書く
Python
bottle_test.py
from bottle import route, run, template
import datetime, json
@route('/')
def hello():
return "<h3>Hello!</h3><p>こんにちは！</p>"
@route('/ajax')
def ajax():
return template('ajax')
#return "hello"
@route('/ajax/update')
def ajax_update():
dt = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')
dict = {'dt': dt}
return json.dumps(dict)
# 最後に書く（これより下に書いても反映されない）
if __name__ == '__main__':
run(host = 'localhost', port = 5555, debug = True, reloader = True)
テンプレートファイル（フロントエンド的な）
今回はhtmlとしたが、tplを使うとPythonをテンプレートファイル内で実行できる（%を最初に入れるとPythonのコードと認識される）。
views/ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>World Clock</title>
</head>
<body>
<h1>Hello!</h1>
<div id = "time"></div>
<script type="text/javascript">
function reloadClock() {
$.ajax("/ajax/update", {
type: "get"
}).done(function(received_data) { // 戻ってきたのはJSON（文字列）
var dict = JSON.parse(received_data); // JSONを連想配列にする
// 以下、Javascriptで料理する
var dt = dict["dt"];
$("#time").html(dt); // html要素を書き換える
}).fail(function() {
console.log("失敗");
});
};
reloadClock();
setInterval(reloadClock, 10);
</script>
</body>
</html>
起動
Powershell
python bottle_test.py
動作の内容
BottleはGETが行われたときのみしか通信が行われないため、Ajaxで通信を行って書き換える。簡潔に言えば定期的にGETを行って別ページで情報を出力させ、Ajaxを使って書き換え・表示反映を行ったというだけである。
動作はlocalhost:5555/ajaxで確認できる。JavaScriptでdiv#timeの中のテキストを書き換える。この時reloadClock関数を定期的に実行することで、jQueryを利用してAjax通信する。/ajax/updateに接続して、Python上でdatetimeを動かし時刻を取得（ブラウザではなくサーバー、今回はBottleで時刻を取得している点が重要）、JSON形式で時刻を出力させる（実際、/ajax/updateに接続するとJSON形式で表示される）。得られた値をもとにテキストを書き換えている。
参考
- Ajaxについて（Flaskを使った事例）：https://qiita.com/mo256man/items/d3f1761e8454d1bd8305
- Bottleについて：https://www.mgo-tec.com/blog-entry-raspi4-python-bottle1.html#title02-01