websocket通信でブラウザ画面に結果表示したのちもリクエストに応じて都度、表示結果を更新したい

前提・実現したいこと

WiFiアクセスポイント化したラズパイに、ローカルPCからアクセスしてブラウザ画面を立ち上げ、パラメータをサーバ側に送信、計算結果をブラウザに返す一連の処理を繰り返し行えるようにしたいです。
初回は問題なくブラウザにグラフ表示がされますが、二回目以降は、同一ページで別のパラメータ値を入力しなおして送信すると、サーバ側で正常に動作していません（コンソールで確認したところ、ブラウザ側では二回目に入力した値を送信していますが、サーバー側は初回と同じ値を受け取っているようです）
websocketは一度接続が確立されたら、リクエストに応じて繰り返し同じ処理を実行できるイメージでしたが、そういうものではないのでしょうか？それとも下記のプログラムに原因があるようでしたらアドバイスいただけますと大変ありがたいです。よろしくお願いいたします。

※追記
このpythonプログラムはラズパイ自動起動設定にしています(.serviceの設定)
なお、自動起動登録をオフにし、アドレスをラズパイのローカルホストに設定して確認してみましたが、同様の結果でした。

発生している問題・エラーメッセージ

エラーメッセージはとくに表示されません

エラーメッセージ

該当のソースコード

python
1import os
2from gevent import pywsgi
3from geventwebsocket.handler import WebSocketHandler
4from flask import Flask, request, render_template
5#その他のimportは省略
6
7script_path = os.path.dirname(os.path.abspath(__file__))
8
9#ブラウザ送受信用
10analog = []
11message = []
12a11 = []
13data11 = {}
14
15def save_all_frames(video_path, dir_path, basename, ext='jpg'):
16
17 #省略
18
19a1 = []
20
21a4 = []
22a5 = []
23
24def scanning(img):
25 #省略
26
27def scanning2(img, tension_h):
28 #省略  
29
30app = Flask(__name__)
31
32@app.route('/')
33def index():
34    return render_template('index.html')   
35
36@app.route('/publish')
37#@app.route('/publish', methods=['POST'])
38def publish():
39
40    if request.environ.get('wsgi.websocket'):
41        ws = request.environ['wsgi.websocket']
42        while True:
43        #message = ""
44            for t in range(0,2):  #ブラウザ画面からパラメータ入力したのを受け取る
45                data11[t] = ws.receive()
46
47                a11.append(data11[t])
48    　　　　　　　
49
50            path_sh = os.path.join(script_path, '/home/pi/final_program/trial/satsuei.sh') 
51　　　　　　 #動画撮影
52            subprocess.run(['sh', path_sh])
53            #動画ファイルを静止画に分割してフォルダに保存
54            save_all_frames('/home/pi/test11.h264', 'image', 'test')
55            DIR='/home/pi/image'
56            file_num=sum(os.path.isfile(os.path.join(DIR, name)) for name in os.listdir(DIR))
57
58            for f in range(0,file_num):
59                img_path = "/home/pi/image"
60                img_name = "test_"+str(f).zfill(16)+".jpg"
61                target_path = os.path.join(img_path, img_name)
62                img = cv2.imread(target_path)
63           　　 
64                #画像処理　
65                input1, input2 = scanning(img)
66                
67            ws.send(json.dumps(data_all))  #ブラウザにデータを送信して結果を表示させる
68            path_sh1 = os.path.join(script_path, '/home/pi/final_program/trial/folder_remove.sh') 
69　　　　　　 #フォルダの削除
70            subprocess.run(['sh', path_sh1])
71
72    return "200 ok"
73
74if __name__ == '__main__':
75    app.debug = True
76
77    #server = pywsgi.WSGIServer(('localhost', 5050), app, handler_class=WebSocketHandler)
78    server = pywsgi.WSGIServer(('192.168.123.9', 5050), app, handler_class=WebSocketHandler)
79    server.serve_forever()

html
1!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>graph test</title>
6
7  <script type="text/javascript" src="{{url_for('static', filename='jquery.min.js')}}"></script>
8  <script type="text/javascript" src="{{url_for('static', filename='Chart.bundle.js')}}"></script>
9</head>
10
11<style>
12#省略
13</style>
14
15<script type="text/javascript">
16#ブラウザからパラメータを送信
17$(document).ready(function(){
18  $('form').submit(function(event){
19    var inputText=$(".textBox").map(function(index,el){
20
21      ws.send($(this).val())
22      console.log($(this).val())
23      return false;
24    });
25    return false;
26  });
27});
28
29
30var ws = new WebSocket("ws://192.168.123.9:5050/publish");
31
32//websocket経由で受け取ったデータをparseしてChart.jsのデータに渡す
33ws.onmessage = function (msg) {
34  //const json_string = JSON.stringify(msg.data);
35  //var obj = JSON.parse(msg.json_string);
36  var obj = JSON.parse(msg.data);
37  console.log(obj);
38  var obj_result1 = obj.slice(0,63);
39  var obj_result2 = obj.slice(63,126);
40  var obj_result3 = obj.slice(126,189);
41
42 var html = "";
43  for (var i = 0; i < 63; i++) {
44    var firstBlockRecord = obj_result1[i];
45    var secondBlockRecord = obj_result2[i];
46    var thirdBlockRecord = obj_result3[i];
47
48    html += `
49      <tr>
50        <td>${firstBlockRecord.x}</td>
51        <td>${firstBlockRecord.y}</td>
52        <td>${secondBlockRecord.x}</td>
53        <td>${thirdBlockRecord.x}</td>
54        <td>${secondBlockRecord.y}</td>
55        <td>${thirdBlockRecord.z}</td>
56      <tr/>
57    `;
58  }
59
60  var tbody = document.createElement("tbody");
61  tbody.innerHTML = html;
62  document.querySelector("#dataTable").append(tbody);
63
64  #省略（グラフ表示）
65
66</script>
67
68<body>
69      <form method='POST' action='#'>
70      <fieldset class="chart-container" >
71        <legend>入力フォーム</legend>
72
73        <div class="inline-text"><label for="input-sample">入力1: </label><input type="text" name='data2' id="Text2" class="textBox" size="7"><font size="-1"> m</font></div>
74
75        <div class="inline-text"><label for="input-sample">入力2: </label><input type="text" name='data5' id="Text5" class="textBox" size="7"><font size="-1"> m</font></div>
76
77
78        <div><input type='submit'></div>
79      </fieldset>
80      </form>
81
82
83    <div>
84    <div class="chart-container" position:relative; height:300px; width:100%;><canvas id="chart1" width="300" height="300"></canvas></div>
85    <div class="chart-container" position:relative; height:300px; width:100%;><canvas id="chart2" width="300" height="300"></canvas></div>
86    <div class="chart-container" position:relative; height:300px; width:100%;><canvas id="chart3" width="300" height="300"></canvas></div>
87    </div>
88
89    <table id="dataTable">
90    #省略
91    </table>
92  </body>
93
94  </html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

自己解決

app.pythonプログラムのwebsocketに接続したあとの処理において、ブラウザから入力した値を受け取ったり、自作関数を呼び出して処理を行っていますが、いずれもappendを使っています。ws.sendでブラウザに計算結果を送信したあと、これらのappendしている変数の中身を削除してあげることにより、二回目以降ブラウザ入力した際にもサーバーにその値が送られ、サーバ側でも所定の動作が行われるようになりました。

投稿2021/08/12 16:05

Uka

総合スコア28