如何使网页显示从树莓派发送的实时值

我正在使用心跳温度和心电图传感器来获取患者数据和使用树莓派作为控制器的项目工作;我想要显示传感器的值，以实时显示在网页上，数值将以数字形式显示，并显示ECG图。请建议一个在这方面可以提供帮助的教程或方法。如何使网页显示从树莓派发送的实时值

2017-03-15 Arslan

看看Django频道（又名Daphne）。

这使用达芙妮作为网络套接字服务器来处理WebSocket请求，但在Django Python API中。您将获得Django带来的所有优势，数据库和模板，以及Python中的简单WebSocket实现。几行Javascript和一个HTML模板完成了客户端的工作。达芙妮也可以作为一个网络服务器，而不是使用，例如Nginx的。注意：建议使用Nginx，因为它可以代理websocket连接。 Apache或Nginx都不能自己处理websocket连接（因此，达芙妮）。

实际上，您编写了一个简单的网页，该网页使用Javascript连接到Daphne，并将数据从某些源传输到客户端的网页并延迟时间最短，无需刷新浏览器。它支持来自多个客户端的多个连接并将消息分发给多个客户端。

您的工作进程（在达芙妮内部运行）处理与Raspberry Pi硬件，外部API或外壳函数的通信。

在客户端上，您可以使用Javascript游戏引擎（如Phaser）绘制图形以响应WebSocket中的数据，也可以使用HTML5画布对象手动执行相同操作。您还可以使用图形引擎，如d3.js。

参见Django Channels

最小工作实例（未测试）：

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 /路由。 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

如何使网页显示从树莓派发送的实时值

回答

相关问题