質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

解決済

ローカルPCからラズパイのサーバーにアクセスする際にエラーになる

Uka
Uka

総合スコア25

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

3回答

0評価

0クリップ

903閲覧

投稿2021/06/27 08:15

編集2021/06/30 10:44

前提・実現したいこと

ラズパイをアクセスポイント化し、ローカールPCからWiFi経由でラズパイのIPアドレス:ポート番号にアクセスすると所定のページを表示できるようにしたいのですが、テキスト入力画面が表示されて送信する際にエラーになってしまいます。接続先をlocalhostにしてラズパイのブラウザからアクセスした際は問題なく動いています。アドバイスいただけましたらありがたいです。よろしくお願いします。

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

【コンソール画面(最初ページが開いた際)】
イメージ説明

【コンソール画面(送信ボタンをクリックした際(POST送信))】
イメージ説明

該当のソースコード(app.py)

python

import os import json import datetime import random import time from gevent import pywsgi from geventwebsocket.handler import WebSocketHandler from flask import Flask, request, render_template import spidev import csv import threading import smbus import statistics import math import numpy as np from statistics import mean, median import re import cv2 import numpy as np from matplotlib import pyplot as plt import glob #%matplotlib inline import math import os import subprocess app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/publish') def publish(): if request.environ.get('wsgi.websocket'): ws = request.environ['wsgi.websocket'] #message = "" for t in range(0,2): #ブラウザでテキスト入力 data11[t] = ws.receive() a11.append(data11[t]) print(a11[0]) print(a11[1]) #計算過程は省略(計算結果であるb1,b2はarray) datas={"result1": b1.tolist(), "result2": b2.tolist()} print(datas) ws.send(json.dumps(datas)) return "200 ok" if __name__ == '__main__': app.debug = True server = pywsgi.WSGIServer(('ラズパイのIPアドレス', 5050), app, handler_class=WebSocketHandler) server.serve_forever()

該当のソースコード(index.html)

html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>graph test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> </head> <style> --省略-- </style> <script type="text/javascript"> $(document).ready(function(){ $('form').submit(function(event){ var inputText=$(".textBox").map(function(index,el){ ws.send($(this).val()) console.log($(this).val()) return false; }); return false; }); }); var ws = new WebSocket("ws://ラズパイのIPアドレス:5050/publish"); // 初期データ var data = [[], []]; var result_graph = []; //websocket経由で受け取ったデータをparseしてChart.jsのデータに渡す ws.onmessage = function (msg) { var obj = JSON.parse(msg.data); console.log(obj.result1, obj.result2); result_graph.push({x:obj.resulet1, y:obj.result2}); var ctx = document.getElementById('tension-chart').getContext('2d'); //グラフ描画のプログラム(省略) var table = document.getElementById("dataTable"); var row = table.insertRow(1); //Add after headings var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = obj.result1; cell2.innerHTML = obj.result2; }; </script> <body> <form method='POST' action='#'> <fieldset class="chart-container" > <legend>入力フォーム</legend> <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> <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> <div><input type='submit'></div> </fieldset> </form> <div> <div class="chart-container" position:relative; height:300px; width:100%;><canvas id="result-chart" width="300" height="300"></canvas></div> </div> </body> <table id="dataTable"> #省略 </table> </html>

試したこと

1)接続先をlocalhostにしてラズパイのブラウザからアクセスした際は問題なく動いています。

python

server = pywsgi.WSGIServer(('localhost', 5050), app, handler_class=WebSocketHandler)

HTML

var ws = new WebSocket("ws://localhost:5050/publish");

2)JSファイルの読み込みがうまくいっていないのかと思ったので、CDNを利用するのではなく、ファイルをダウンロードしてhtmlファイルと同じ階層にJSファイルを配置して実行してみましたが、うまく読み込めずエラーとなってしまいました。(Chart.bundle.js, jquery-3.6.0.min.js)

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。