ラズベリーパイから送信されたリアルタイムの値をWebページに表示する方法

私は、ハートビート温度とECGセンサーを使用して患者データを取得し、ラズベリーパイをコントローラーとして使用しているプロジェクトに取り組んでいます。私はリアルタイムでWebページに表示されるセンサーからの値を表示したい、値は数値形式とECGグラフになります。この点で役立つチュートリアルや方法を提案してください。ラズベリーパイから送信されたリアルタイムの値をWebページに表示する方法

出典

2017-03-15 Arslan

Django Channels（別名Daphne）をご覧ください。

これは、DaphneをWebソケットサーバとして使用して、WebSocketリクエストを処理しますが、Django Python API内で処理します。 Djangoがもたらすすべてのメリット、データベース、テンプレート、Pythonでの簡単なWebSocket実装を手に入れました。数行のJavascriptとHTMLテンプレートがクライアント上でジョブを終了します。 Daphneは、ウェブサーバーとしても動作できます。 Nginx。注：これはプロキシwebsocket接続できるようにNginxをお勧めします。 ApacheやNginxはWebソケット接続自体を扱うことができません（したがってDaphne）。

実際には、JavaScriptを使用してDaphneに接続する簡単なWebページを作成し、最小の遅延でブラウザを更新する必要がなく、一部のソースとの間でデータをクライアントのWebページに転送します。これは、多くのクライアントからの複数の接続と、複数のクライアントへのメッセージの配信をサポートします。

あなたのワーカープロセス（Daphne内で実行中）は、Raspberry Piハードウェア、外部API、またはシェル機能との通信を処理します。

クライアントでは、PhaserなどのJavascriptゲームエンジンを使用して、websocketのデータに応じてグラフィックスを描画することも、HTML5キャンバスオブジェクトを使用して手動で行うこともできます。また、d3.jsのようなグラフエンジンを使用することもできます。

mkdir django 
cd django 
django-admin startproject wsproj 
cd wsproj 
django-admin startapp wsapp

wsproj/wsproj/asgi.py

import os 
import re 
from channels.asgi import get_channel_layer 

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "wsproj.settings") 

channel_layer = get_channel_layer() 

channel_capacity={ 
    "http.request": 200, 
    "http.response!*": 10, 
    re.compile(r"^websocket.send\!.+"): 20, 
}

wsproj/wsproj /ルーティング：

は（未テスト）Django Channels

最小加工された例を参照してください。 py

from channels.routing import route 
from pgwss.consumers import websocket_receive, websocket_connect, websocket_disconnect 

channel_routing = [ 
    route("websocket.receive", websocket_receive, path=r"^/ws"), 
    route("websocket.connect", websocket_connect, path=r"^/ws"), 
    route("websocket.disconnect", websocket_disconnect, path=r"^/ws"), 
]

wsproj/wsproj/setting.py

INSTALLED_APPS = [ 
    'django.contrib.admin', 
    'django.contrib.auth', 
    'django.contrib.contenttypes', 
    'django.contrib.sessions', 
    'django.contrib.messages', 
    'wsapp', 
    'django.contrib.staticfiles', 
    'channels', 
] 

CHANNEL_LAYERS = { 
    "default": { 
     "BACKEND": "asgi_ipc.IPCChannelLayer", 
     "ROUTING": "pgserver.routing.channel_routing", 
    }, 
}

wsproj/WSAPP/consumers.py

from channels import Group 

def websocket_receive(message): 
    text = message.content.get('text') 
    print "Client sent %s" % text 
    temperature = getTemperature() 

    message.reply_channel.send({"data": "%f" % temperature}) 

def websocket_disconnect(message): 
    Group("ws").discard(message.reply_channel) 

def websocket_connect(message): 
    message.reply_channel.send({"accept": True}) 
    Group("ws").add(message.reply_channel) 

    #Rather than responding to polls from the client in the 
    #Receive function (pull). You might create a thread 
    #here to handle messages to the client (push)

wsproj/WSAPP/views.py

from django.template.loader import render_to_string 
from django.http import HttpResponse 

def counterview(request): 
    html = render_to_string('ws.html') 

    response = HttpResponse(html) 
    return response

wsproj/WSAPP /テンプレート/ WS。html

<!DOCTYPE html> 
{% load static %} 
<html> 
    <body> 
     <div> 
      <span id="temperature"></span> 
     </div> 
     <script type="text/javascript"> 
      csocket = new WebSocket("ws://127.0.0.1/ws"); 
      csocket.onmessage = function(e) 
      { 
       var myjson = JSON.parse(e.data); 
       var temperature = myjson.temperature; 
       document.getElementById('temperature').innerHTML = temperature; 

      } 

      var i = 0; 
      function msg() { 
       //Keep sending a poll 
       csocket.send(i++); 
       timer = setTimeout(msg, 100); 
      } 

      csocket.onopen = function() { 
       msg(); 
      } 

     </script> 
    </body> 
</html>

出典

2017-03-15 18:15:09

ラズベリーパイから送信されたリアルタイムの値をWebページに表示する方法

答えて

関連する問題