如何从JavaScript读取串口数据

时间:2023-02-10 15:10:03

I connected an Arduino to my laptop using USB, and I can read the serial data using Processing.

我用USB把Arduino连接到我的笔记本电脑上,我可以用Processing读取串行数据。

Is there any way to get this data in real time into a local webbrowser? For example, a text field that shows the value from the serial port? It does not have to be connected to the internet.

是否有办法将这些数据实时传输到本地网络浏览器中?例如,显示串行端口的值的文本字段?它不需要连接到互联网。

The JavaScript version of Processing does not support the following code, which would have been the ideal solution.

JavaScript版本的处理不支持以下代码,这是理想的解决方案。

The Processing code is:

处理代码是:

myPort = new Serial(this, Serial.list()[0], 9600);
// read a byte from the serial port
int inByte = myPort.read();
// print it
println(inByte);
// now send this value somewhere...?
// ehm...

2 个解决方案

#1


10  

There is no way to directly access the local machine from the web browser. For security reasons browsers have very limited access to the machines resources.

无法从web浏览器直接访问本地机器。出于安全原因,浏览器对机器资源的访问非常有限。

To do this one option would be to write an extension for the browser of your choosing. Even though extensions also have a variety of limitations.

要做到这一点,一个选项是为您选择的浏览器编写一个扩展。尽管扩展也有各种限制。

Option two would be to use local server to provide the functionality you need. Personally I recommend using node.js (it's light weight, fast and easy to implement). You can read/write serial data using https://github.com/rwaldron/johnny-five (as @kmas suggested) or https://github.com/voodootikigod/node-serialport and than you can use http://socket.io/ to create a simple service and connect to it though the browser. Socket.io uses WebSockets in modern browsers and works excepionally well for real-time connections.

选项二是使用本地服务器提供所需的功能。我个人推荐使用node。js(重量轻、速度快、易于实现)。您可以使用https://github.com/rwaldron/johnny- 5(如@kmas建议的)或https://github.com/voodootikigod/nodeserialport来读/写串行数据,您可以使用http://socket。io/通过浏览器创建一个简单的服务并连接到它。套接字。io在现代浏览器中使用了WebSockets,在实时连接上表现非常出色。

#2


1  

I had a similar problem to solve. My Data acquisition system (DAQ) (like your arduino) relays data in HTTP, TCP, FTP, as well as serial. I had to capture it on the server and then send it to my webpage in real-time.

我有一个类似的问题需要解决。我的数据采集系统(DAQ)(像您的arduino)以HTTP、TCP、FTP和串行方式传送数据。我必须在服务器上捕获它,然后将它实时发送到我的网页。

The hack I wrote uses nodejs at the server, and connects DAQ to the server using TCP sockets using the "net" module of nodejs and connects the server to the HTML page using socket.io.

我编写的hack使用服务器上的nodejs,并使用nodejs的“net”模块将DAQ连接到服务器,并使用socket.io将服务器连接到HTML页面。

The code and context can be found in "How to get sensor data over TCP/IP in nodejs?".

代码和上下文可以在“如何在node . js中通过TCP/IP获取传感器数据?”

I use TCP as I wanted to transmit data over a long distance. You need to modify the socket protocol to serial.

我使用TCP是因为我想要远距离传输数据。您需要将套接字协议修改为串行。

For serial-to-TCP redirection, you may use bloom from sensorMonkey for Windows or their processing sketch for *nix/Mac OS.

对于串行到tcp的重定向,您可以使用从sensorMonkey到Windows的bloom,或者为*nix/Mac OS的处理草图。

#1


10  

There is no way to directly access the local machine from the web browser. For security reasons browsers have very limited access to the machines resources.

无法从web浏览器直接访问本地机器。出于安全原因,浏览器对机器资源的访问非常有限。

To do this one option would be to write an extension for the browser of your choosing. Even though extensions also have a variety of limitations.

要做到这一点,一个选项是为您选择的浏览器编写一个扩展。尽管扩展也有各种限制。

Option two would be to use local server to provide the functionality you need. Personally I recommend using node.js (it's light weight, fast and easy to implement). You can read/write serial data using https://github.com/rwaldron/johnny-five (as @kmas suggested) or https://github.com/voodootikigod/node-serialport and than you can use http://socket.io/ to create a simple service and connect to it though the browser. Socket.io uses WebSockets in modern browsers and works excepionally well for real-time connections.

选项二是使用本地服务器提供所需的功能。我个人推荐使用node。js(重量轻、速度快、易于实现)。您可以使用https://github.com/rwaldron/johnny- 5(如@kmas建议的)或https://github.com/voodootikigod/nodeserialport来读/写串行数据,您可以使用http://socket。io/通过浏览器创建一个简单的服务并连接到它。套接字。io在现代浏览器中使用了WebSockets,在实时连接上表现非常出色。

#2


1  

I had a similar problem to solve. My Data acquisition system (DAQ) (like your arduino) relays data in HTTP, TCP, FTP, as well as serial. I had to capture it on the server and then send it to my webpage in real-time.

我有一个类似的问题需要解决。我的数据采集系统(DAQ)(像您的arduino)以HTTP、TCP、FTP和串行方式传送数据。我必须在服务器上捕获它,然后将它实时发送到我的网页。

The hack I wrote uses nodejs at the server, and connects DAQ to the server using TCP sockets using the "net" module of nodejs and connects the server to the HTML page using socket.io.

我编写的hack使用服务器上的nodejs,并使用nodejs的“net”模块将DAQ连接到服务器,并使用socket.io将服务器连接到HTML页面。

The code and context can be found in "How to get sensor data over TCP/IP in nodejs?".

代码和上下文可以在“如何在node . js中通过TCP/IP获取传感器数据?”

I use TCP as I wanted to transmit data over a long distance. You need to modify the socket protocol to serial.

我使用TCP是因为我想要远距离传输数据。您需要将套接字协议修改为串行。

For serial-to-TCP redirection, you may use bloom from sensorMonkey for Windows or their processing sketch for *nix/Mac OS.

对于串行到tcp的重定向,您可以使用从sensorMonkey到Windows的bloom,或者为*nix/Mac OS的处理草图。