Question

问题似乎有2个部分。.第1部分已解决，但请留给以后的人

part1

因此，我正在尝试将数据从微控制器流式传输到具有实时图形的网站。

我从一个简单的带有plotlyjs的index.html页面开始，使用随机数创建实时图形-可以。

因此，我然后创建了index.js文件，并继续执行代码以流式传输数据，我使用了nodejs express socketio，并设法在本地主机3000上实时在控制台上显示了数据。

所以我现在将我的nodejs index.js页面链接到index.html页面，我可以看到标题了，但是我再也看不到图形了。

如果我不带index.js即可直接查看html页面，则可以看到带有随机数的图形，但如果使用真正的流数据index.js文件查看，则只能看到标题。

我不确定为什么会这样。

index.html文件代码

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="plotly.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <meta charset="utf-8" />
    <title>My Plot Page</title>
  </head>
 <body>
  <p>Plotly plot:</p>
  <div id="chart1"></div>
    <script>
      const socket = io();
      var counter = 0;
      function getX() {
          counter++;
          return counter;
       }

      function getY() {
           socket.on('msp432 : data', function (data) {
              return data.value;
           })
           return 0;
        }        

       Plotly.plot('chart1', [{
           x: [],
           y: [],
           type: 'line'
       }]);
       setInterval(function () {
           Plotly.extendTraces('chart1', { x: [[getX()]] , y: [[getY()]] }, [0])
    }, 500);


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

现在，我使用inspect元素转到控制台，在那里可以看到我的所有结果，但是显示错误：

    Script from http://localhost:3000/plotly.min.js was blocked due to mime type mismatch

    HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). GET - http://localhost:3000/plotly.min.js

    0: 'Plotly' is not defined

我该如何解决？

我也可以根据要求显示index.js文件，我不希望这个问题太长

第2部分

所以现在我可以通过使用index.js在页面上使用cdn plotly链接看到图形，但是我看到的只是0。

我认为是因为这部分代码：

      function getY() {
           socket.on('msp432 : data', function (data) {
              return data.value;
           })
           return 0;
        }

看起来它仅返回0，而不返回data.value。如果我执行console.log（data.toString（）），它将在控制台上显示正确的数字，但现在无法正常工作

我的index.js代码：

 const express = require('express');
 const socketIO = require('socket.io');
 const http = require('http');

 const app = express();
 const server = http.createServer(app);
 const io = socketIO.listen(server);

 io.on('connection', function (socket) {
    console.log('a new socket connection');
 });


 app.get('/', (req, res, next) => {
   res.sendFile(__dirname + '/index.html');
 });

 const SerialPort = require('serialport');
 const myPort = new SerialPort('COM5', {
   baudRate: 9600
 })

 myPort.on('open', function () {
   console.log("opened the port")
 })

 myPort.on('data', function (data) {
   console.log('Data:', data.toString());
   io.emit('msp432 : data', {
      value: data.toString()
    });
  });

  server.listen(3000, () => {
    console.log("server on port ", 3000);
  })

Answer 1

尝试从其CDN加载它：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

第2部分：

将套接字事件处理程序移到同步getY函数之外：

    let yVal = 0;
    socket.on('msp432 : data', function (data) {
        yVal = data.value;
    })
    function getY() {
        return yVal;
    }

Nodejs Plotlyjs可以单独工作，但不能一起工作

1 个答案: