个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 19:25:08 24 4
gpt4 key购买 nike

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

第 1 部分

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

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

然后我创建了一个 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 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 链接来查看图表，但我看到的都是 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);
  })

最佳答案

尝试从他们的 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;
    }

关于javascript - Nodejs Plotlyjs 单独工作但不能一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56989187/

24 4 0
文章推荐： c# - CreateWindowEx 和 RegisterClass C#
文章推荐： c - 将数组中的元素更改为0-C编程
文章推荐： C# IEnumerable 和 string[]
文章推荐： c - 如何通过从函数中获取值来声明全局变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com