Nodejs Plotlyjs 单独工作但不能一起工作

Question

看起来问题有 2 个部分。第 1 部分已解决，但留给以后的人使用

part1

所以我正在尝试将数据从我的微控制器流式传输到具有实时图表的网站。

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

然后我创建了一个 index.js 文件并继续并启动代码以将数据流式传输，我使用了 nodejs express socketio 并且我设法让数据在本地主机上实时显示在控制台上3000.

所以我 link 将我的 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 element 进入控制台，我可以在那里看到我的所有结果，但它显示错误：

    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 link 查看图表，但我看到的都是 0。

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

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

看起来只有 returns 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 单独工作但不能一起工作

Nodejs Plotlyjs works individually but not together

javascript

node.js

express

socket.io

plotly.js