Web Serial API串口通信尝鲜

最新推荐文章于 2024-06-17 12:45:00 发布

电气高级护理专家

最新推荐文章于 2024-06-17 12:45:00 发布

阅读量1.4k

点赞数

文章标签： web js

本文链接：https://blog.csdn.net/m0_50635267/article/details/124975145

版权

近期用单片机做了个IDE光驱控制器来放CD，一直琢磨串口的上位机用什么方案来搞。其实只需要几条简单的指令交互就可以。所以最开始想用delphi来编个串口通信小程序就OK。但居然微软MSCOMM控件死活编译不成功，没办法导入到delphi的IDE里面去。VC太繁琐不想碰，看到Google提供了Web API接口，理论上简单的JS脚本就可以解决问题，反正我对实时性没啥要求，赶紧来试试。先写了个类似串口调试助手的东东，还不错。后面再优化下界面就成定制版的CD player前台了。

网页脚本：

<html>
  <head><meta http-equiv="Content-Type"content="text/html;charset=gb2312">
  <style>
	 textarea{
		resize:none;
		}
  </style>
  </head>

	<body>


    <div>
      <button id="butConnect" >打开串口</button>
      <button id="butEnd" >关闭串口</button>
      <button id="but_Senddata" >发送</button> 
      <button id="but_Clear_Received" onclick="Clear_Received()" >接收清屏</button> 
      <select id="selectlist" style="width:100px;" onchange="changeBAUD()">
	<option>115200</option>
	<option>38400</option>
	<option>19200</option>
	<option>9600</option>
	<option>1200</option>
      </select>
    </div>
    接收数据>><br />
    <textarea id="recetext" rows="16" cols="100" style="overflow-y:auto">
     </textarea><br />
    发送数据>><br />
    <textarea id="sendtext" rows="16" cols="100" style="overflow-y:auto">
    </textarea><br />

    <script>

      let keepReading = false;
      let reader;
      let writer;
      BAUDRATE=115200;

      document.getElementById("recetext").value=""; 
      document.getElementById("sendtext").value="";

      /*-------------------------打开串口&循环接收数据------------------------*/
      document.getElementById("butConnect").addEventListener("click", async () => {

       const port = await navigator.serial.requestPort();
       try {
        await port.open({ baudRate: document.getElementById("selectlist").value });
         } catch(err){alert("串口已打开");};
        keepReading = true;
        const textDecoder = new TextDecoderStream();
        const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
        const reader = textDecoder.readable.getReader();
        writer = port.writable.getWriter();
    
          while (port.readable && keepReading) {
                const { value, done } = await reader.read();
                if (done||keepReading==false) {
                  // Allow the serial port to be closed later.
                reader.releaseLock();                   
                break;
                }
                if (value) {
                     document.getElementById("recetext").value+=value;
                  }
              }//while

        }); 

      /*-------------------------关闭处理----------------------------------*/
      // const closedPromise = readUntilClosed();

        document.getElementById("butEnd").addEventListener("click", async () => {

	 keepReading = false; 
  
     writer.close();

     await port.close(); 

      });

      /*-------------------------发送数据------------------------------*/
      document.getElementById("but_Senddata").addEventListener("click", async () => { 
       arr = [];
      var string =Array.from(document.getElementById("sendtext").value);//发送数据存入数组
        for(var i=0;i<string.length;i++){
        arr.push(string[i].charCodeAt());                 //数组中的数据转换为ASCII码
	 }
        var tmpUint8Array = new Uint8Array(arr);            //数组类型转换
        await writer.write(tmpUint8Array);
       });
      

     /*-------------------------接收区域清屏-------------------------*/
     function Clear_Received(){
       document.getElementById("recetext").value="";
      }


     function changeBAUD(){   
      // BAUDRATE= document.getElementById("selectlist").value； 

       }
   
     </script>

 </body>
</html>

refer:Web Serial API

电气高级护理专家

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web Serial API串口通信尝鲜

近期用单片机做了个IDE光驱控制器来放CD，一直琢磨串口的上位机用什么方案来搞。其实只需要几条简单的指令交互就可以。所以最开始想用delphi来编个串口通信小程序就OK。但居然微软MSCOMM控件死活编译不成功，没办法导入到delphi的IDE里面去。VC太繁琐不想碰，看到Google提供了Web API接口，理论上简单的JS脚本就可以解决问题，反正我对实时性没啥要求，赶紧来试试。先写了个类似串口调试助手的东东，还不错。后面再优化下界面就成定制版的CD player前台了。网页脚本：...
复制链接

扫一扫