🙉 🖕🏻 👶 COMポートからWebにデータをリダイレクトします。完了 🐥 🧑🏼 🤽🏿

最近、「COMポートからWebへのデータのリダイレクト」という記事を公開しました。この記事では、コンピューターのシリアルポートからWebブラウザーに文字列を変換するプロトタイプシステムについて説明しました。その記事で、プロトタイプを生産段階に近づけるためにプロトタイプを完成させる必要がある方向を指摘しました。

-ウェブページのデザインなし

-常に1つのWebクライアントのみがデータを受信します

-アクセスできるブラウザの非常に限られたセット。たとえば、Internet Explorer 8またはAndroid 2.3.5のブラウザーでは機能しません。

-Pythonのインストールが必要

しばらくして、私はこのフォームをそのままにして変更しないことにしました。カットの下で、改訂の結果と、これらすべての欠点をどのように排除したかについての説明。

最終結果をすぐに表示します。

このビデオは、Arduinoがスマートフォンに接続されている同じコンピューター上のFirefoxとIE 8で、COMポートからの行が3つのブラウザーに同時に表示されることを示しています。

Arduino自体は「Temperature：XXXXXX」という行を渡し、日時と行番号を持つ行はバックエンドの一部の1つです。

次に、欠点を解消する方法について説明します。今回は、あまり退屈にならず、コードのすべての行を説明するのではなく、主要な点のみを表示するようにします。質問がある場合は、コメントで質問してください。

悪いWebページのデザイン。

前の記事で、Webフロントエンドの作成で「方法がない」という言葉を理解しているため、通常のWebページを作成することは私にとって最も難しいと書きました。幸いなことに、私はほとんどすぐにw3schools.comを発見し、そこでBootstrapを発見し、AjaxとjQueryの優れたチュートリアルを見つけました。経験豊富なフロントエンド開発者にとって、このサイトで紹介するチュートリアルはおそらく笑顔になるだけですが、私のような初心者にとってはまさにこれが必要なものです。

これらの教科書の最大の利点は、非常に小さくて非常に充実していることです。おplateをプレートに塗らないでください。原則として、何かを始めるには一晩勉強するだけで十分です。

Bootstrapを使用して、多少なりとも受け入れ可能なWebページのデザインを設計することはそれほど難しくないことが判明しました。もちろん、彼はArtemy Lebedevをあなたから追い出すことはありませんが、その上で非常に迅速にユーザーインターフェイスをプログラムできます。

私が理解できなかった唯一のことは、それを使用してページを2つの部分に分割する方法でした。しかし、その後、記事「CSSの垂直方向のセンタリング」が助けになりました。その結果、Webページではこのような空白になります。

<!-- Vertical aligment of text from "Vertical Centering in CSS" at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <style type="text/css"> html, body { height: 100%; margin: 0px; } </style> </head> <body> <div style="display: table; height: 90%; width: 100%; overflow: hidden;"> <div style=" display: table-cell; vertical-align: middle;"> <div style="text-align: center"> data place<br>    </div> </div> </div> <div style="display: table; height: 10%; width: 100%; overflow: hidden;"> <div style=" display: table-cell; vertical-align: middle;"> <div style="text-align: right;"> buttons </div> </div> </div> </body> </html>

残りのページコードのほとんどは、BootstrapおよびJavaScriptチュートリアル（JS HTML DOMセクション）を読んだ後のものです。例外はjQueryコードで、ページ上のデータを更新します。しかし、それについては後で。

サポートされるブラウザーの限られた範囲

以前のプロトタイプに対するブラウザーの弱いサポートは、情報の更新を配信するために選択されたテクノロジーであるサーバー送信イベントによるものでした。そこで今回は、古くから実績のあるAjaxテクノロジーを使用することにしました。 Ajaxを使用するとWebトラフィックが増加しますが、私の意見では、最大数のブラウザーで機能するはずです。

Ajaxのもう1つの欠点は、特別な措置を講じない場合、COMポート経由で送信される行をスキップできることです。つまり、行がシリアルポートに非常に早く到着し、Ajax要求があまり頻繁に届かない場合、リクエスト間のすべての行はクライアントに表示されません。しかし、たとえば現在の温度を表示するタスクの場合、これはまったく怖いことではありません。

おそらくWebSocketsテクノロジーを使用できますが、IEで理解しているように、IEでは10番目のバージョンからしかサポートされておらず、IE 8を持っているので、この方向を考え出すことすらしませんでした。

先日、HabrまたはGiktaymsの記事の1つで、WebSocketの不足を回避できるように思われるSockJSライブラリーについて言及しましたが、まず、特別なライブラリーが必要です。サポートはサーバー側で行われます。2番目に、この時点でAjaxは正常に機能していたため、気付かれないままでした。

それで、Ajax。むかしむかし、私はこの技術を学ぼうとしました。しかし、私に出会ったすべての紙の教科書はあまりにも退屈であり、私はすぐにこのビジネスを中退しました。しかし、すでに述べたw3schools.comでは、チュートリアルは非常に優れていることが判明しました。その結果、次のコードはすぐに判明しました。

  function get_data() { var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","/get_serial?r=" + Math.random(),true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("data").innerHTML=xmlhttp.responseText; get_data(); } } xmlhttp.send(); }

ページがロードされたときに呼び出されました：

 <body onload="get_data()">

このコードでは、おそらく2つの点に注意する必要があります。まず、ラインへ

  xmlhttp.open("GET","/get_serial?r=" + Math.random(),true);

その中で、COMポートから次の行でWebサーバーにアクセスします。補足

 r=" + Math.random()

Internet Explorerが応答をキャッシュしないようにするために必要です。それ以外の場合は、Ajax要求を1つだけ送信し、応答を受信して、サーバーにアクセスしなくなります。インターネットでは、サーバー側から特別なHTTPヘッダーを送信することで、キャッシュの問題の解決策を見ました

  response.headers['Last-Modified'] = datetime.now() response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0, max-age=0' response.headers['Pragma'] = 'no-cache' response.headers['Expires'] = '-1'

しかし、何らかの理由でそれは私にはうまくいきませんでした。

別の方法は、GETの代わりにPOSTを使用することです。 IEはそのようなリクエストをキャッシュしないと言っていますが、私はチェックしませんでした。

ところで、jQueryはキャッシュと戦うためにまったく同じ方法を使用します-また、URLにランダムな文字列を追加します。少し違って見えます。

2番目のポイントは一連の行です

  xmlhttp.open("GET","/get_serial?r=" + Math.random(),true);

そして

  xmlhttp.onreadystatechange=function() ...

当初、彼らは異なる順序で立っていました。また、Internet Explorerでは、これにより奇妙な問題が発生しました-彼は利用可能なメモリをすべて使い果たしていました。そしてその後、データを更新しました。彼は彼の仕事を終えた。

XmlHttpRequest.ruのサイトでのみ、XMLHttpRequestオブジェクトを再利用するときに、最初にopen（）メソッドを呼び出してから、onreadystatechangeプロパティを変更することをお勧めします。

IEで多くの問題が突然発生したため、このようなニュアンスが考慮される可能性が最も高いライブラリを使用することにしました。 jQueryはすでにBootstrapのページにロードされているため

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

このライブラリに組み込まれたAjaxサポートを使用することは注目に値しないと判断しました。したがって、データ更新コードは次のように変換されました。

  function on_load(responseTxt, statusTxt, xhr){ if( statusTxt == "success" ){ $("#data").load("/get_serial?r=" + Math.random(), on_load ) } else { $("#data").text( "Error: " + xhr.status + ": " + xhr.statusText ); } } $(document).ready(function(){ on_load("", "success", 3); });

一度に1人のクライアント

前の記事で、この問題を解決する可能な方法について既に書いています。バックエンドを2つの部分に分割し、ZMQを使用してそれらを通信し、2番目の部分としてマルチユーザーhttpサーバーを使用します。そのようなサーバーとしてFlaskを選択しました。私は代替案を比較しませんでした、彼は最初に私に着きました。 http-requestsの並列処理モードで起動できることが判明し、これで十分であることが判明しました。このモードを開始するには、パラメータを渡すだけです

threaded = True（ stackoverflow.com/questions/14672753/handling-multiple-requests-in-flaskを参照）：

  app.run(host='0.0.0.0', debug=False, threaded=True)

マルチスレッドに加えて、Flaskは非常に便利なルーティングメカニズムを提供します。特定のhttpリクエストへの個々の手順の対応。したがって、シンプルなWebアプリケーションを作成するために、Flaskは非常に便利です。

しかし、何よりもZMQライブラリについてお話ししたいと思います-その驚くべき機能を実証するために。

デモZMQサーバーのコードは次のとおりです。

 import zmq import time context = zmq.Context.instance() pub_sock = context.socket(zmq.PUB) pub_sock.bind( 'tcp://*:12345' ) count = 0 def get_full_line_from_serial(): global count count += 1 return time.strftime( '%Y.%m.%d %H:%M:%S' ) + ': string N %d' % count while True: line = get_full_line_from_serial() print line pub_sock.send( line ) time.sleep(1)

COMポートからの読み取りをシミュレートします。実際、彼は1秒ごとに新しい行を生成し、それを「公開」（つまり、サブスクライブされたすべてのクライアントに送信）し、デバッグ用に出力します。

水クライアントコード：

 import zmq context = zmq.Context.instance() zmq_sub_sock = context.socket(zmq.SUB) zmq_sub_sock.setsockopt(zmq.SUBSCRIBE, '') zmq_sub_sock.connect( 'tcp://localhost:12345' ) poller = zmq.Poller() poller.register( zmq_sub_sock, zmq.POLLIN ) while True: socks = dict(poller.poll(timeout=5000)) if zmq_sub_sock in socks: print zmq_sub_sock.recv() else: print 'No data within 5 sec'

ZMQソケットを開き、考えられるすべてのメッセージをサブスクライブし、サーバーに接続します。次に、無限ループで新しいデータを予期して表示します。

そして、ここに彼らのコラボレーションのデモがあります：

注目したいこと。まず、サーバーを起動する前にクライアントを起動できます。そして、これはパフォーマンスに影響しません。第二に、サーバーがクラッシュしてもクライアントはクラッシュしません。サーバーが再起動するとすぐに、クライアントはサーバーからメッセージを受信し始めます。素晴らしいですねそして、これには、クライアントとサーバーのソースコードに特別な指示がまったくありません。通常のTCP / IPソケットを使用する場合、このような機能を実装するために自分で記述する必要があるコードはどれくらいですか？

そして、これはZMQライブラリができることのほんの一部です。繰り返しになりますが、このライブラリをよく見ることを強くお勧めします。

スタンドアロンアプリ

私は、Pythonがスタンドアロンのアプリケーションを作成するのにあまり適応していないことをすでに述べたようです。これはインタプリタ言語であり、インタプリタプログラムが正常に機能する必要があります。彼にとって残念なことに、ネイティブバイナリコードを生成できるコンパイラはありません。スクリプトから一種の独立したアプリケーションを作成できる2つのプログラム、py2exeとpyInstallerを知っています。私自身は2番目のものをよく使用するため、このプロジェクトで使用することにしました。

pyInstallerはPythonスクリプトを取得し、依存するすべてのファイルを分析し（インポートされたすべてのモジュールとプラグインの動的ライブラリを決定します）、それらをすべて個別のフォルダーに収集するか、自己解凍アーカイブの類似物にパックします。インタープリター自体のコードと、起動時にランタイムを準備してターゲットスクリプトの解釈を開始する小さな開始部分が追加されます。

Pythonの作成者もライブラリの作成者も、Pythonのそのような使用の可能性について考えていなかったため、すべては「切り株デッキを介して」機能します。主な問題は、必要なすべてのライブラリとモジュールのリストを準備することです。多くのライブラリ作成者が暗黙的なインポートを使用しているため、どのモジュールがスクリプトまたは別のモジュールにインポートされるかを明示的に示すことはありません。したがって、多くの場合、pyInstallerによるスクリプトの自動分析の後、追加のモジュールの名前および/またはそれらを検索するパスを構成ファイル（拡張子.spec）に手動で追加する必要があります。 pyInstallerと一緒に、そのようなライブラリのための既製の関数の大規模なセットがありますが、人生はまだありません。特に、これはZMQの現在のバージョンで起こりました-pyZMQ（PythonへのZMQバインディング）の開発者は、補助ライブラリのインポートメカニズムを変更しました。その結果、pyInstallerによって構築されたアプリケーションは起動しません。人々はすでにこの問題に対処しており、pyInstallerに対応するパッチを準備しています。このパッチは機能していますが、公式リリースにはまだ含まれていないため、pyInstallerに自分の手でパッチを適用する必要がありました。 github.com/pyinstaller/pyinstaller/pull/110/filesにあるパッチコードを参照してください。

ただし、スタンドアロンアプリケーションがフォルダー全体ではなく1つの実行可能ファイルのみで構成される場合、このパッチでさえ十分ではありませんでした。 .exeファイルを解凍するときにZMQディストリビューションのlibsodium.pydライブラリが正しい場所に来るように、手動で.specファイルを修正する必要がありました。

2番目の問題は、マルチプロセッシングモジュールでした。バックエンドを2つの部分に分割しました。これらは並行して動作するはずです。バックエンドを実行するために2つの別個のプログラムを実行する必要がある場合、それは間違っているように思えました。また、マルチスレッドを使用することは、GIL（Global Interpretation Lock）の存在のために間違っているように思われました。起動時に単純に2つの新しいプロセスを生成する単純なスクリプトを作成する方が簡単に思えます。1つはCOMポートからデータを読み取るZMQサーバー用、もう1つはWebクライアントからのリクエストに応答するHTTPサーバー用です。実際、通常モードで作業するとき（つまり、インタープリターが「手動で」開始されるとき）、次のスクリプトは正常に機能します。

 # -*- coding: utf-8 -*- from multiprocessing import Process import serial_to_zmq import zmq2web_using_flask import time def main(): args = get_command_line_params() p1 = Process( target=serial_to_zmq.work, args=(args.serial_port_name, args.serial_port_speed, args.zmq_pub_addr) ) p1.start() p2 = Process(target=zmq2web_using_flask.work, args=(args.zmq_sub_addr,)) p2.start() print 'Press Ctrl+C to stop...', while True: time.sleep(10) def get_command_line_params(): ... if __name__ == '__main__': main()

しかし、pyInstallerで処理した後、結果の.exeは正常に機能しませんでした。いくつかのZMQサーバーとFlaskアプリケーションが、「ソケットがすでに使用されています」というメッセージとその他の奇妙なメッセージとともに起動されました。 Flaskアプリケーションを起動するときに、debug = Falseパラメーターを渡す必要があることが判明しました。

  app.run(host='0.0.0.0', debug=False, threaded=True)

また、マルチプロセッシングモジュールの場合、pyInstallerで作成されたスタンドアロンアプリケーションの場合にスクリプトが解釈されるときに作成される、そのモード（froozen）で必要な特殊関数freeze_support（）を呼び出す必要があります。

一般的に、この項目の結果は次のとおりです。Pythonスクリプトからスタンドアロンアプリケーションを作成できますが、簡単ではありません。

すべてのソースコードはgithubで取得できます： github.com/alguryanow/serial2web-2

PS Another Bootstrapチュートリアル： www.tutorialrepublic.com/twitter-bootstrap-2.3.2-tutorial

COMポートからWebにデータをリダイレクトします。 完了

悪いWebページのデザイン。

サポートされるブラウザーの限られた範囲

一度に1人のクライアント

スタンドアロンアプリ

More articles:

COMポートからWebにデータをリダイレクトします。完了