javascript - Nodejs Plotlyjs 单独工作，但不能一起工作

问题描述

看起来这个问题有 2 个部分.. 第 1 部分已解决，但会留给未来的人

第1部分

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

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

然后我创建了一个 index.js 文件并继续启动代码以将数据流式传输，我使用 nodejs express socketio 并设法在 localhost 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>

现在我使用检查元素进入控制台，我可以在那里看到我的所有结果，但它说一个错误：

    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);
  })

标签： javascriptnode.jsexpresssocket.ioplotly.js

javascript - Nodejs Plotlyjs 单独工作，但不能一起工作

问题描述

解决方案

推荐阅读