javascript - 使用JavaScript绘制d3.js图表??时的Socket.IO连接问题(Socket.IO connection issue when plotting d3.js chart with JavaScript)

Question

I am working on a project which main goal is to send and plot floats from an Arduino board to a d3.js chart with JavaScript.

(我正在一个项目中，该项目的主要目标是使用JavaScript从Arduino开发板发送并绘制浮点图到d3.js图表??。)

I am using Socket.IO for the client-server connection and everything works fine with the firsts values recieved until a random moment when it stops plotting and the following errors are received on the browser console:

(我正在使用Socket.IO进行客户端-服务器连接，并且一切正常，接收到的firsts值可以正常工作，直到随机停止绘图并在浏览器控制台上收到以下错误为止：)

 > WebSocket connection to 'ws://localhost:8080/socket.io/?EIO=3&transport=websocket&sid=9pXgEjLWag4PB_3-AAtJ' failed: WebSocket is closed before the connection is established. > index.js:83 POST http://localhost:8080/socket.io/?EIO=3&transport=polling&t=MwowjHu&sid=9pXgEjLWag4PB_3-AAtJ 400 (Bad Request) 

I guess the problem is due to something wrong with the Socket.IO connection but I have no clue how to fix it.

(我想问题是由于Socket.IO连接出了点问题，但我不知道如何解决。)

Any help please?

(有什么帮助吗？)

The Socket.IO code for the Server is:

(服务器的Socket.IO代码为：)

 var socket = require('socket.io'); var express = require('express'); var app = express(); var server = require('http').Server(app); var io = socket(server); sender.on('message', function(EEG) { io.once('connection', function(socket) { //io.on is not working properly... let newv = (Math.random()); socket.emit('messages', messages); }); }); sender.bind(UDPport, '192.168.0.102'); server.listen(8080, function() { console.log("Server running on http://localhost:8080"); }); 

and the Client side is:

(客户端是：)

 $(document).ready(function() { receivedata();//receive called in button.onclick (check full code) function recievedata() { var socket = 0; setInterval(function() { socket = io.connect('http://localhost:8080'); socket.on('messages', function(EEG) { document.getElementById('messages').innerHTML = (socket.id); updateChart(EEG); }) }, 100); }; 

Server.js Full Code:

(Server.js完整代码：)

 var socket = require('socket.io'); var express = require('express'); var app = express(); var server = require('http').Server(app); var io = socket(server);** app.use(express.static('public')); // index.html y el cliente.js folder //-----------DATA-RECEIVER--------------------------------------------- var dgram = require("dgram"); var sender = dgram.createSocket('udp4'); //Sender = Arduino ESP32 Board var UDPport = 10101; var buf = new ArrayBuffer(4); const ui8 = new Uint8Array(buf); const f32 = new Float32Array(buf); sender.on('listening', function() { console.log('UDP server listening on ' + sender.address().address); }); sender.on('message', function(EEG) { //---------BYTE-TO-FLOAT---------------------------------------------- EEG.forEach(function(b, i) { ui8[i] = b; }); //---------SEND-DATA-TO-CLIENT-**SOCKET**--------------------------------------- var messages = f32[0]; console.log(messages); **io.once('connection', function(socket) { socket.emit('messages', messages);** }); }); sender.bind(UDPport, '192.168.0.102'); server.listen(8080, function() { console.log("Server running on http://localhost:8080"); }); 

Client.js Full code:

(Client.js完整代码：)

 $(document).ready(function() { var button = document.getElementById("startbutton"); var button2 = document.getElementById("stopbutton"); new Boolean(stop); button.onclick = function() { console.log(this.id + " START!"); stop = false; receivedata(); }; button2.onclick = function() { console.log(this.id + " STOP!"); stop = true; }; function receivedata() { var socket = 0; //-------------------------------------------------------------------------------------------**SOCKETS**----------------------- setInterval(function() { **socket = io.connect('http://localhost:8080'); socket.on('messages', function(EEG) {** document.getElementById('messages').innerHTML = (socket.id); if (stop) { updateChart(0); } else { updateChart(EEG); } **})** }, 100); }; //-----------------------------------------------------------------------------------------DIMENSIONS-------------------- // set the dimensions and margins of the graph // Create the Scalable Vector Graphics container and set the origin. var svg = d3.select("#chart"), margin = { top: 30, right: 10, bottom: 50, left: 50 }, width = Math.floor(svg.attr("width") - margin.left - margin.right), height = Math.floor(svg.attr("height") - margin.top - margin.bottom); var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //-------------------------------------------------------------------------------------------DATA---------------------- let data = [{ values: [] }]; //Dadas input que se muestra del graph //------------------------------------------------------------------------------------------ATRIBUTOS------------------- g.append("defs").append("clipPath") .attr("id", "clip2") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); //----------------------------------------------------------------------------------------DOMAINS----------------------- // set the ranges and Y domain var x = d3.scaleTime().range([0, width]), y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10); y.domain([-1.5, 1.5]); //-----------------------------------------------------------------------------------------LINE------------------------- //Define the line var line = d3.line() .curve(d3.curveBasis) //definimos tipo de curva .x(function(d) { return x(d.time); }) //para el eje x definimos el tiempo .y(function(d) { return y(d.eeg); }); //para el eje y definimos los datos EEG //-----------------------------------------------------------------------------------------AXIS------------------------- //Definimos el eje x var x_axis = d3.axisBottom() .scale(x); var x_axis_svg = g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")"); // Add the Y Axis g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") //-------------------------------------------------------------------------------------NI-ZORRA------------------------- let pathsG = g.append("g").attr("id", "paths").attr("class", "paths") .attr("clip-path", "url(#clip2)"); // parse the date / time //var parseTime = d3.timeParse("%H:%M:%S.%L"); //-----------------------------------------------------------------------------------------UPDATE-DATA---------------------- let duration = 200; //how quickly to move (will look jerky if less that data input rate) let limit = 100; // how many datapoints, total points = (duration * limit) function updateChart(EEG) { let now = new Date(); //Calcula fecha actual console.log(now); data.forEach((e) => { let last = e.values.length ? e.values[e.values.length - 1].speed : 10; let newv = Math.round(Math.min(100, Math.max(2, last + (Math.random() * 6) - 3))); // EEG = 0; e.values.push({ time: now, eeg: EEG, }); console.log(data[0].values.length, "=", EEG, '\n', '-------------------------------------------'); }); //-----------------------------------------------------------------------------------------SLIDE-AXIS----------------- // Cambio de dominio para el eje x x.domain([now - ((limit - 2) * duration), now - duration]) // Transición del eje x por la izquierda x_axis_svg.transition().duration(duration).ease(d3.easeLinear, 2).call(x_axis); //-----------------------------------------------------------------------------------------UPDATE-AXIS--------------------- //Join var minerG = pathsG.selectAll(".minerLine").data(data); var minerGEnter = minerG.enter() //Enter .append("g") .attr("class", "minerLine") .merge(minerG); //Join var minerSVG = minerGEnter.selectAll("path").data(function(d) { return [d]; }); var minerSVGenter = minerSVG.enter() //Enter .append("path").attr("class", "line") .style("stroke", function(d) { return z(d.id); }) .merge(minerSVG) //Update .transition() .duration(duration) .ease(d3.easeLinear, 10) .attr("d", function(d) { return line(d.values) }) .attr("transform", null) } }); 

  ask by VPR translate from so

Answer 1

等待大神答复