设为首页收藏本站

 找回密码
 立即注册
一板网电子技术论坛»论坛 › 开发工具 › Arduino专区 › 如何在Arduino开发板和Web浏览器之间建立通信连接 ...
返回列表 发新帖
查看: 118376|回复: 2

如何在Arduino开发板和Web浏览器之间建立通信连接

[复制链接]
风筝

864

主题

285

回帖

3695

积分

版主

积分
3695
QQ
发表于 2019-3-5 10:52:25 | 显示全部楼层 |阅读模式

使用开放式声音控制（OSC）协议建立Arduino和Web浏览器之间的通信。


本篇文章主要介绍了如何在Arduino开发板和Web浏览器之间建立双向的、开放式声音控制（OSC）的通信。我们将使用浏览器中的按钮将OSC消息发送到Processing。然后，Processing将消息转发给Arduino，Arduino控制LED并响应确认。


在本篇文章中使用Processing软件是非常必要的，因为只有一个Arduino无法从Web接收OSC消息。如果您不想使用Processing，那么可以使用以太网扩展板解决该问题。


OSC是允许计算机和其他多媒体设备之间通信的协议。这个简单但功能强大的工具提供了实时控制声音和其他媒体处理需求所需的一切 - 同时保持灵活且易于实施。它可以被认为是乐器数字接口（MIDI）的继承者。


所需的组件

●    Arduino开发板

●    Arduino IDE


先决条件

下载并安装node.js，然后通过将以下命令插入终端来安装socket.io库：npm install socket.io


浏览器说明

要通过浏览器接收OSC消息，我们需要使用'node.js'环境。它将通过WebSocket协议接收消息并将消息转发到浏览器，该协议充当两者之间的桥梁。


创建一个文件夹，在里面使用“.js”扩展名命名一个文件。在本篇文章中，我们使用'socketio.js'。然后，在文件中输入以下代码。

  1. var http = require('http'),
  2.     socketio = require('socket.io'),
  3.     fs = require('fs'),
  4.     osc = require('osc-min'),
  5.     dgram = require('dgram'),
  6.     remote_osc_ip;

  8. var http_server = http.createServer(function(req, res) {

  10.   fs.readFile(__dirname + '/socketio.html', function(err, data) {

  12.     if(err) {
  13.       res.writeHead(500);
  14.       return res.end('Error loading socket.io.html');
  15.     }

  17.     res.writeHead(200);
  18.     res.end(data);

  20.   });

  22. });

  24. var io = socketio(http_server);

  26. var udp_server = dgram.createSocket('udp4', function(msg, rinfo) {

  28.   var osc_message;
  29.   try {
  30.     osc_message = osc.fromBuffer(msg);
  31.   } catch(err) {
  32.     return console.log('Could not decode OSC message');
  33.   }

  35.   if(osc_message.address != '/socketio') {
  36.     return console.log('Invalid OSC address');
  37.   }

  39.   remote_osc_ip = rinfo.address;

  41.   io.emit('osc', {
  42.     x: parseInt(osc_message.args[0].value) || 0
  43.   });

  45. });

  47. io.on('connection', function(socket) {

  49.   socket.on('browser', function(data) {

  51.     if(! remote_osc_ip) {
  52.       return;
  53.     }

  55.     var osc_msg = osc.toBuffer({
  56.       oscType: 'message',
  57.       address: '/socketio',
  58.       args:[{
  59.         type: 'integer',
  60.         value: parseInt(data.x) || 0
  61.       },
  62.       {
  63.         type: 'integer',
  64.         value: parseInt(data.y) || 0
  65.       }]
  66.     });

  68.     udp_server.send(osc_msg, 0, osc_msg.length, 9999, remote_osc_ip);
  69.     console.log('Sent OSC message to %s:9999', remote_osc_ip);

  71.   });

  73. });

  75. http_server.listen(8080);
  76. console.log('Starting HTTP server on TCP port 8080');
  77. udp_server.bind(9998);
  78. console.log('Starting UDP server on UDP port 9998');
复制代码

现在，运行'socketio.js'文件，该文件将允许发送和接收消息。 导航到CMD中的目录并输入命令：node socketio.js

CMD window.png

CMD窗口显示'node socketio.js'代码输入。


接下来，在浏览器中打开一个网页。您将在节点脚本的输出部分中看到HTTP服务器设置为端口8080。此网页将发送OSC消息并在按下浏览器按钮后显示输出信息。


首先，将网页代码保存在HTML文件中，并将其命名为'socketio.html'。 然后，将其放在'socketio'文件夹中。

  1. <!DOCTYPE html>
  2. <html lang="en">


  5. <head>
  6.   <meta charset="utf-8">
  7.   <title>OSC Communication</title>
  8.   <script src="/socket.io/socket.io.js"></script>
  9. </head>


  12. <body>
  13.   <h2>OSC Communication between Arduino and Browser</h2>
  14.   Buttons to control LED
  15.   <button type="button" id="x" value="1" onclick="myFunction()" style="background-color:green;">ON</button>
  16.   <button type="button" id="y" value="2" onclick="myFunction1()" style="background-color:red;">OFF</button>
  17.   <h2>Output From Arduino:</h2>
  18.   <span id="output"></span>


  21.   <script>
  22.     var socket = io.connect();


  25.     socket.on('osc', function (data) {
  26.       if (data.x == 1) {
  27.         document.getElementById("output").innerHTML = "LED ON";
  28.       }
  29.       if (data.x == 2) {
  30.         document.getElementById("output").innerHTML = "LED OFF";
  31.       }
  32.     });


  35.     function myFunction() {
  36.       socket.emit('browser', {
  37.         x: 1 || 0
  38.       });
  39.     }


  42.     function myFunction1() {
  43.       socket.emit('browser', {
  44.         x: 2 || 0
  45.       });
  46.     }
  47.   </script>
  48. </body>


  51. </html>
复制代码

要打开网页，您需要Arduino的端口8080 IP地址。请遵循以下URL格式：http :: //x.x.x.x：8080。将“x.x.x.x”替换为您的系统IP地址。

webpage.png

显示Arduino和浏览器之间通信信息的网页。


Processing草图

此时，我们将安排从端口999的浏览器接收数据并将其转发到Arduino。下面的草图将允许Arduino中的数据传输到浏览器的端口9998。然后处理将与Arduino串口和COM端口通信。

请注意，双方的波特率是相同的。

  1. // Importing the library that will help us in sending and receiving the values from the Arduino
  2. // You always need to import the serial library in addition to the VSync library
  3. import vsync.*;
  4. import processing.serial.*;  

  6. // Below libraries will connect and send, receive OSC messages
  7. import oscP5.*;  
  8. import netP5.*;

  10. // Creating the instances to connect and send, receive OSC messages
  11. OscP5 oscP5;
  12. NetAddress dest;

  14. //  We create a new ValueReceiver to receive values from the arduino and a new
  15. // ValueSender to send values to arduino
  16. ValueSender sender;
  17. ValueReceiver receiver;

  19. // The below variables will be syncronized with the Arduino and they should be same on the both sides.
  20. public int output;
  21. public int input = 2;

  23. void setup()
  24. {
  25.   // Starting the serial communication, the baudrate and the com port should be same as on the Arduino side.
  26.   Serial serial = new Serial(this, "COM6", 9600);

  28.   //  Ininialize the ValueReceiver and ValueSender with this (to hook it to your sketch)
  29.   //  and the serial interface you want to use.
  30.   sender = new ValueSender(this, serial);
  31.   receiver = new ValueReceiver(this, serial);

  33.   // Synchronizing the variables as on the Arduino side. The order should be same.
  34.   sender.observe("output");
  35.   receiver.observe("input");

  37.   // Starting the OSC Communication. listen on port 9999, return messages on port 9998
  38.   oscP5 = new OscP5(this, 9999);
  39.   dest = new NetAddress("127.0.0.1", 9998);
  40. }

  42. void draw() {
  43.   if (input == 1) {
  44.     sendOsc();
  45.   }
  46.   if (input == 2) {
  47.     sendOsc();
  48.   }
  49.   print("input: ");
  50.   println(input);
  51. }

  53. // Function to send OSC messages to browser
  54. void sendOsc() {
  55.   OscMessage msg = new OscMessage("/socketio");  // tell the address
  56.   msg.add((float)input); // add the message
  57.   oscP5.send(msg, dest); //send the OSC message
  58. }

  60. // Recieve OSC messages from browser
  61. void oscEvent(OscMessage theOscMessage) {
  62.   if (theOscMessage.checkAddrPattern("/socketio") == true) {
  63.     // Receiving the output from browser
  64.     output = theOscMessage.get(0).intValue();  

  66.     print("output: ");
  67.     println(output);
  68.   }
  69. }
复制代码

Arduino草图

一旦Arduino草图从Processing接收输出数据，它将触发LED信号。

如果输出为1，它将点亮LED。如果输出为2，它将关闭LED。

草图还会向Processing发送一条消息，确认LED是否亮起。


注意：在上传草图之前，请确保Processing没有运行，因为它将使用相同的端口并且会出现“port busy”错误。

  1. //Including the library that will help us in receiving and sending the values from processing
  2. #include <VSync.h>
  3. ValueReceiver<1> receiver;  // Receiver Object
  4. ValueSender<1> sender;      // Sender Object

  6. // The below variables will be syncronized with the Processing and they should be same on the both sides.
  7. int output;
  8. int input;

  10. int ledPin = 13; //LED Pin

  12. void setup()
  13. {
  14.   /* Starting the serial communication because we are communicating with the
  15.     Arduino through serial. The baudrate should be same as on the processing side. */
  16.   Serial.begin(9600);
  17.   pinMode(ledPin, OUTPUT);

  19.   // Synchronizing the variables with the processing. The variables must be int type.
  20.   receiver.observe(output);
  21.   sender.observe(input);
  22. }

  24. void loop()
  25. {
  26.   // Receiving the output from the processing.
  27.   receiver.sync();

  29.   // Matching the received output to light up LED
  30.   if (output == 1)
  31.   {
  32.     digitalWrite(ledPin, HIGH);
  33.     input = 1;
  34.   }
  35.   else if (output == 2)
  36.   {
  37.     digitalWrite(ledPin, LOW);
  38.     input = 2;
  39.   }
  40.   sender.sync();
  41. }
复制代码

如何运行项目

首先，通过CMD运行'socketio.js'文件，它将创建一个服务器，帮助从Processing发送和接收数据。之后，在浏览器中输入您的PC IP地址，然后输入端口8080以打开网页。


在Arduino IDE中上传Arduino代码，然后在Processing中更改波特率和COM端口。 同样，两端的波特率和COM端口应该相同。


如果您按下网页按钮，作为响应，内置的Arduino LED将亮起或熄灭。

Web浏览器, Processing

相关帖子
回复

使用道具 举报

我吃大西瓜

0

主题

1

回帖

13

积分

新手上路

积分
13
发表于 2019-4-16 10:19:42 | 显示全部楼层
如何将Arduino传感器的数据传输显示在网页上啊？
回复

使用道具 举报

syb

0

主题

1

回帖

13

积分

新手上路

积分
13
发表于 2020-1-3 18:57:20 | 显示全部楼层
你好,<VSync.h>这个库函数在哪里
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|YiBoard一板网 ( 冀ICP备18020117号 )

GMT+8, 2025-10-30 08:59 , Processed in 0.072459 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表