Bottleを使用したWebアプリで非同期通信したい

bottleとgeventを使用した非同期通信という記事があったため、
これを応用してjinja2_templateで非同期で値を渡したいと考えています。

参考にした記事：
bottleとgeventを使用した非同期通信
 「bottle」+「jinja2」を使ってサイト構築

pythonのサーバサイドでは、templateを1回目name、2回目resultに分けて渡したいです。
しかし、これで2回templateを返してしまうとHTMLは2重になってしまいます。

2回目に送信するときに、1回目のHTMLを削除する方法はありますでしょうか。

python
1def body_iter():
2    yield template('top', name="hoge", result='null')　#　1回目
3    time.sleep(1)
4    yield template('top', name="null", result='data')　#　2回目
5    raise StopIteration

表示される画面のHTMLソース

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <title>テストページ</title>
6    <script type="text/javascript" src="/js/jquery.min.js"></script>
7    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
8
9    <link rel="stylesheet" href="/css/bootstrap.min.css" />
10    <link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
11</head>
12<body>
13<!--変数を使う場合は、｛｛｝｝の中に変数名を記述-->
14
15こんにちは、 hoge
16
17
18
19
20</body>
21</html><!DOCTYPE html>
22<html>
23<head>
24    <meta charset="utf-8" />
25    <title>テストページ</title>
26    <script type="text/javascript" src="/js/jquery.min.js"></script>
27    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
28 
29    <link rel="stylesheet" href="/css/bootstrap.min.css" />
30    <link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
31</head>
32<body>
33<!--変数を使う場合は、｛｛｝｝の中に変数名を記述-->
34
35
36
37<h1>今日のfizzbuzz</h1>
38<!--
39配列fizzbuzzから１つずつ順番にデータを取り出し、fzbzに代入。
40fzbzは単なる変数のため、｛｛｝｝で表示
41-->
42<table class="table table-striped">
43    <thead>
44        <tr>
45            <th>header</th>
46        </tr>
47    </thead>
48    <tbody>
49        <tr>
50            <td>data1</td>
51        </tr>
52        <tr>
53            <td>data2</td>
54        </tr>
55        <tr>
56            <td>data3</td>
57        </tr>
58        <tr>
59            <td>data4</td>
60        </tr>
61 
62    </tbody>
63</table>
64
65
66</body>
67</html>

python
1# -*- coding: utf-8 -*-
2
3from gevent import monkey
4monkey.patch_all()
5import os
6import time
7from bottle import route, run, TEMPLATE_PATH, static_file, jinja2_template as template
8
9# index.pyが設置されているディレクトリの絶対パスを取得
10BASE_DIR = os.path.dirname(os.path.abspath(__file__))
11# テンプレートファイルを設置するディレクトリのパスを指定
12TEMPLATE_PATH.append(BASE_DIR + "/views")
13
14@route('/css/<filename>')
15def css_dir(filename):
16    """ set css dir """
17    return static_file(filename, root=BASE_DIR+"/static/css")
18
19@route('/js/<filename>')
20def js_dir(filename):
21    """ set js dir """
22    return static_file(filename, root=BASE_DIR+"/static/js")
23
24@route('/img/<filename>')
25def img_dir(filename):
26    """ set img file """
27    return static_file(filename, root=BASE_DIR+"/static/img")
28
29@route('/font/<filename>')
30def font_dir(filename):
31    """ set font file """
32    return static_file(filename, root=BASE_DIR+"/static/fonts")
33
34def body_iter():
35    yield template('top', name="hoge", result='null')
36    time.sleep(1)
37    yield template('top', name="null", result='data')
38    raise StopIteration
39
40@route('/top')
41def top():
42    return body_iter()
43
44if __name__ == "__main__":
45    run(server="gevent", host="localhost", port=8080, debug=True, reloader=True)
46

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <title>テストページ</title>
6    <script type="text/javascript" src="/js/jquery.min.js"></script>
7    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
8
9    <link rel="stylesheet" href="/css/bootstrap.min.css" />
10    <link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
11</head>
12<body>
13<!--変数を使う場合は、｛｛｝｝の中に変数名を記述-->
14{% if name != 'null' %}
15こんにちは、 {{name}}
16{% endif %}
17
18{% if result != 'null' %}
19<h1>今日のfizzbuzz</h1>
20<!--
21配列fizzbuzzから１つずつ順番にデータを取り出し、fzbzに代入。
22fzbzは単なる変数のため、｛｛｝｝で表示
23-->
24<table class="table table-striped">
25    <thead>
26        <tr>
27            <th>header</th>
28        </tr>
29    </thead>
30    <tbody>
31        <tr>
32            <td>{{result}}1</td>
33        </tr>
34        <tr>
35            <td>{{result}}2</td>
36        </tr>
37        <tr>
38            <td>{{result}}3</td>
39        </tr>
40        <tr>
41            <td>{{result}}4</td>
42        </tr>
43 
44    </tbody>
45</table>
46{% endif %}
47
48</body>
49</html>

行動規範の内容に同意します

回答1件

2回目に送信するときに、1回目のHTMLを削除する方法はありますでしょうか。

単純に最初の yield 文を削除すればいいです。

yield template('top', name="hoge", result='null')

投稿2017/10/23 12:41

tell_k

総合スコア2120

badtz

2017/10/23 13:32

ご回答いただきましてありがとうございます。 yieldが2つあるのは、 ①1つ目でnameだけ先に送信して画面を表示 ②time.sleep()のところで時間がかかる処理を実行 ③実行結果をyieldしてnameとresultをそれぞれ表示をしたいためです。確かに①のyieldを削除すればHTMLが重複することはないのですが、重い処理を実行する前に画面を表示しておくことができなくなってしまいます。よろしくお願いいたします。

行動規範の内容に同意します