Похоже, что есть 2 части вопроса .. часть 1 была решена, но я оставлю это для будущих людей
часть1
Итак, я пытаюсь передать данные с моего микроконтроллера на веб-сайт с графиком в реальном времени.
Я начал с простой страницы index.html с plotlyjs для создания графика в реальном времени с использованием случайных чисел - это сработало.
Итак, я создал файл index.js, пошел дальше и запустил код для потоковой передачи данных, я использовал команду socketio nodejs express и мне удалось отобразить данные на консоли в реальном времени на localhost 3000.
Так что я связал свою страницу nodejs index.js со своей страницей index.html, теперь я могу видеть заголовок, но больше не могу видеть график.
если я просматриваю свою html-страницу напрямую без index.js, я могу видеть график со случайными числами, но если я просматриваю его, используя мой файл 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
, поэтому теперь я могу видеть график, используя сюжетную ссылку cdn на странице, используя index.js, но все, что я вижу, это 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);
})