Q&A
>.yh1224さん
ご回答くださいましてありがとうございます。自分もそう思いましてJSのバージョンやリンク先を変更するなどして試していますが、同じエラーを吐き出してしまいます。。もう少し調べてみたいと思います。
前提・実現したいこと
ラズパイをアクセスポイント化し、ローカールPCからWiFi経由でラズパイのIPアドレス:ポート番号にアクセスすると所定のページを表示できるようにしたいのですが、テキスト入力画面が表示されて送信する際にエラーになってしまいます。接続先をlocalhostにしてラズパイのブラウザからアクセスした際は問題なく動いています。アドバイスいただけましたらありがたいです。よろしくお願いします。
発生している問題・エラーメッセージ
【コンソール画面（最初ページが開いた際）】
【コンソール画面（送信ボタンをクリックした際(POST送信)）】
該当のソースコード(app.py)
python
1import os 2import json 3import datetime 4import random 5import time 6from gevent import pywsgi 7from geventwebsocket.handler import WebSocketHandler 8from flask import Flask, request, render_template 9import spidev 10import csv 11import threading 12import smbus 13import statistics 14import math 15import numpy as np 16from statistics import mean, median 17import re 18import cv2 19import numpy as np 20from matplotlib import pyplot as plt 21import glob 22#%matplotlib inline 23import math 24import os 25import subprocess 26 27app = Flask(__name__) 28 29@app.route('/') 30def index(): 31 return render_template('index.html') 32 33@app.route('/publish') 34def publish(): 35 36 if request.environ.get('wsgi.websocket'): 37 ws = request.environ['wsgi.websocket'] 38 #message = "" 39 for t in range(0,2): #ブラウザでテキスト入力 40 data11[t] = ws.receive() 41 a11.append(data11[t]) 42 43 print(a11[0]) 44 print(a11[1]) 45 46 #計算過程は省略(計算結果であるb1,b2はarray) 47 48 datas={"result1": b1.tolist(), "result2": b2.tolist()} 49 print(datas) 50 ws.send(json.dumps(datas)) 51 52 return "200 ok" 53 54if __name__ == '__main__': 55 app.debug = True 56 server = pywsgi.WSGIServer(('ラズパイのIPアドレス', 5050), app, handler_class=WebSocketHandler) 57 server.serve_forever()
該当のソースコード(index.html)
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>graph test</title> 6 7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 8 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/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://ラズパイのＩＰアドレス:5050/publish"); 31// 初期データ 32var data = [[], []]; 33var result_graph = []; 34 35//websocket経由で受け取ったデータをparseしてChart.jsのデータに渡す 36ws.onmessage = function (msg) { 37 38 var obj = JSON.parse(msg.data); 39 console.log(obj.result1, obj.result2); 40 41 result_graph.push({x:obj.resulet1, y:obj.result2}); 42 43 var ctx = document.getElementById('tension-chart').getContext('2d'); 44 //グラフ描画のプログラム（省略） 45 46 var table = document.getElementById("dataTable"); 47 var row = table.insertRow(1); //Add after headings 48 var cell1 = row.insertCell(0); 49 var cell2 = row.insertCell(1); 50 51 cell1.innerHTML = obj.result1; 52 cell2.innerHTML = obj.result2; 53 54}; 55 56</script> 57 58<body> 59 <form method='POST' action='#'> 60 <fieldset class="chart-container" > 61 <legend>入力フォーム</legend> 62 63 <div class="inline-text"><label for="input-sample">テキスト１: </label><input type="text" name='data2' id="Text2" class="textBox" size="7"><font size="-1"> m</font></div> 64 65 <div class="inline-text"><label for="input-sample">テキスト２: </label><input type="text" name='data5' id="Text5" class="textBox" size="7"><font size="-1"> m</font></div> 66 67 68 <div><input type='submit'></div> 69 </fieldset> 70 </form> 71 72 73 <div> 74 <div class="chart-container" position:relative; height:300px; width:100%;><canvas id="result-chart" width="300" height="300"></canvas></div> 75 </div> 76 77 </body> 78<table id="dataTable"> 79 #省略 80 </table> 81 </html>
試したこと
1)接続先をlocalhostにしてラズパイのブラウザからアクセスした際は問題なく動いています。
python
1server = pywsgi.WSGIServer(('localhost', 5050), app, handler_class=WebSocketHandler) 2
HTML
1 2var ws = new WebSocket("ws://localhost:5050/publish");
2)JSファイルの読み込みがうまくいっていないのかと思ったので、CDNを利用するのではなく、ファイルをダウンロードしてhtmlファイルと同じ階層にJSファイルを配置して実行してみましたが、うまく読み込めずエラーとなってしまいました。(Chart.bundle.js, jquery-3.6.0.min.js)
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答3件
0
自己解決
URLに接続できない環境なため（ラズパイとローカルPCとのあいだだけの閉じられたネットワーク）、URLからJSファイルを読み込むのではなく、ラズパイのローカルフォルダにJSファイルを設置することでブラウザに所望の画面を表示させることができました。
前回もこの方法は試してはいたのですが、下記のとおりstaticフォルダにJSファイルを入れる必要があることと、srcの後の書き方が間違っていました。
<script src="{{url_for('static', filename='使いたいファイル名.js')}}"></script>投稿2021/06/30 10:50
総合スコア28
0
コンソールのエラーメッセージを見るに、PC から以下の URL にアクセスできていない気がしますが、どうでしょうか。
- http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
- https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js
jQuery が読み込めずに submit 時の処理が正常に動作していないのではと思います。
投稿2021/06/28 12:46
総合スコア653
上記 URL は直接 PC 上のブラウザで開けますか？
ご返信ありがとうございます。PCで直接URLにアクセスしようとすると「DNSアドレスが見つかりませんでした。」となり開けませんでした。ということはラズパイのDNSの設定がおかしいということでしょうか？
ネットワークの構成がどうなっているかによりますが、以下のような原因が考えられます。
- PC に DNS サーバーが正しく設定できていない(PC の設定)、または取得できていない(DHCP サーバーの設定)。
- PC から DNS サーバーへ正しく通信できていない(経路の設定)。
まずはネットワークまわりの構成を見直して、PC から直接インターネットのサイトが閲覧できるようにする必要があります。
ご回答くださいましてありがとうございます。ラズパイをアクセスポイント化してPCとの間だけでWiFi通信することを想定していたため、インターネット環境にはなっていません。なので、JSのURLに接続できなかったということだったのですが、ラズパイをlocalhostにしてラズパイ上でブラウザを開いた場合に画面が表示できていたため、同じことがローカルPCでもできないのはおかしいと思いこんでいました。そもそもラズパイをlocalhostにして画面が表示できていたのは、ラズパイがまだインターネットに接続できていたとき（いまは設定の問題でインターネット接続できていません）にlocalhost接続で表示ができていた画面がキャッシュとして残っていて、その後インターネット未接続の状態になってもキャッシュを読み込んでいたのではないかと、、 なので、URLにアクセスする方法ではなく、サーバー側（ラズパイ）のローカルフォルダにJSファイルを設置する方法を再度見直した結果、画面が表示できるようになりました。初歩的なことを見落としており、申し訳ありませんでした。ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。