基于Express与Polymer实现传感器数据实时展示方案咨询

Absolutely, let's break this down properly—your Browserify approach failed because modules like pi-spi are Node.js-specific hardware interfaces that can't run in the browser. Instead, we'll split the work: the backend handles sensor reading and pushes updates to the frontend in real-time, while your Polymer UI listens for those updates and refreshes automatically.

Core Architecture #

We'll use an Express server with Socket.io (a WebSocket abstraction) to create a persistent, low-latency connection between the backend (sensor reader) and frontend (Polymer UI). This mimics an onChange-style update mechanism by pushing sensor data to the UI as soon as it's read.

Step 1: Build the Express + Socket.io Backend #

This server will read data from your MCP3008 sensor and broadcast updates to connected Polymer clients.

1. First, install required dependencies:

   npm install express socket.io mcp3008 pi-spi
   

2. Create your server file (server.js):

   const express = require('express');
   const http = require('http');
   const socketIo = require('socket.io');
   const mcp3008 = require('./mcp3008'); // Path to your sensor module
   
   const app = express();
   const server = http.createServer(app);
   // Configure CORS for development (restrict to your frontend URL in production)
   const io = socketIo(server, { cors: { origin: "*" } });
   
   // Initialize MCP3008 (adjust SPI device path if needed)
   const adc = new mcp3008({ spiDevice: '/dev/spidev0.0' });
   
   // Poll sensor at a configurable interval (e.g., 100ms for near-real-time)
   const readInterval = setInterval(async () => {
     try {
       // Read from channel 0 (adjust to your sensor's connected channel)
       const sensorValue = await adc.readChannel(0);
       // Broadcast data to all connected clients
       io.emit('sensor-update', {
         value: sensorValue,
         timestamp: Date.now()
       });
     } catch (err) {
       console.error('Sensor read failed:', err);
       io.emit('sensor-error', { message: err.message });
     }
   }, 100);
   
   // Serve your Polymer frontend files (place them in a "public" folder)
   app.use(express.static('public'));
   
   // Start the server
   const PORT = 3000;
   server.listen(PORT, () => {
     console.log(`Server running at http://localhost:${PORT}`);
   });
   
   // Cleanup on shutdown
   process.on('SIGINT', () => {
     clearInterval(readInterval);
     server.close(() => process.exit(0));
   });
   

Step 2: Create the Polymer UI Element #

This element will connect to the Socket.io server, listen for sensor updates, and render the data in real-time.

1. Install Socket.io client for your Polymer project:

   npm install socket.io-client --save
   

2. Create your Polymer element (sensor-display.js):

   import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
   import io from 'socket.io-client';
   
   class SensorDisplay extends PolymerElement {
     static get properties() {
       return {
         sensorValue: {
           type: Number,
           value: 0,
           notify: true
         },
         serverUrl: {
           type: String,
           value: 'http://localhost:3000'
         }
       };
     }
   
     connectedCallback() {
       super.connectedCallback();
       // Establish Socket.io connection
       this.socket = io(this.serverUrl);
   
       // Listen for sensor updates
       this.socket.on('sensor-update', (data) => {
         this.sensorValue = data.value;
       });
   
       // Handle errors
       this.socket.on('sensor-error', (error) => {
         console.error('Sensor error:', error.message);
       });
   
       // Handle reconnection
       this.socket.on('disconnect', () => {
         console.log('Lost connection to server—reconnecting...');
       });
     }
   
     disconnectedCallback() {
       super.disconnectedCallback();
       // Clean up connection when element is removed
       if (this.socket) this.socket.disconnect();
     }
   
     static get template() {
       return html`
         <style>
           .sensor-card {
             padding: 1.5rem;
             max-width: 300px;
             margin: 2rem auto;
             background: #f8f9fa;
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
           }
           .value {
             font-size: 2.5rem;
             font-weight: bold;
             color: #2563eb;
             text-align: center;
           }
           .label {
             text-align: center;
             color: #6b7280;
             margin-top: 0.5rem;
           }
         </style>
         <div class="sensor-card">
           <div class="value">[[sensorValue]]</div>
           <div class="label">Real-Time Sensor Reading</div>
         </div>
       `;
     }
   }
   
   customElements.define('sensor-display', SensorDisplay);
   

3. Use the element in your main Polymer app:

   <!DOCTYPE html>
   <html>
     <head>
       <script type="module" src="./sensor-display.js"></script>
     </head>
     <body>
       <sensor-display></sensor-display>
     </body>
   </html>
   

Optional Optimizations #

• Adjust Polling Interval: Tweak the setInterval time in the backend based on your sensor's update needs (e.g., 500ms for less frequent updates).
• Threshold Filtering: Only broadcast updates if the sensor value changes beyond a certain threshold to reduce unnecessary UI refreshes.
• Production CORS: Replace the wildcard * in Socket.io's CORS config with your frontend's actual domain for security.
• Native WebSockets: If you prefer not to use Socket.io, you can implement native WebSockets in both the backend and frontend—Socket.io just simplifies reconnection and fallback logic.

内容的提问来源于stack exchange，提问作者NeitoFR