使用JS获得串口数据

JavaScript语言通常是一种网页编程语言,比较适合前台的一些应用设计。对于本地设备和数据的操作有比较大的限制。由于项目的需要,我需要获得本机的串口数据并显示在web端。我们有很多中方法实现功能,在实际的操作过程中我测试两种方式获得数据。第一种方法是使用ActiveX控件,JS调用MSCOMM32.dll的串口控件对串口进行控制。第二种方法是使用C#语言的控件对串口进行控制,然后使用JS+AJAX与C#进行交互获得串口数据。

先说说两种方法各自的特点:方法一使用的是微软的ActiveX控件MSCOMM32.dll,该控件可以直接对串口进行操作,而JS也可以通过调用接口进行控制。不过ActiveX控件目前只针对IE浏览器支持较好,我用的是Chrome那就爱莫能助了。方法二目前应该是比较流行的,C#用来做后台控制个人觉得还是很不错的,而AJAX在前后台数据交互方面的作用应该也是有目共睹的。唯一的不足可能就是在数据同步方面可能会稍有延迟,毕竟AJAX是一个异步传输的标准。

首先,我尝试了方法一。实现一个htm文件和一个js文件。关于串口调用的代码很简单,htm文件中的主要工作是添加MSCOMM32.dll控件的调用。

  1. <object classid="clsid:648A5600-2C6E-101B-82B6-000000000014" id="MSComm1" codebase="MSCOMM32.OCX"
  2. type="application/x-oleobject" style="left: 54px; top: 14px">
  3. <param name="CommPort" value="4"><!--设置并返回通讯端口号。-->
  4. <param name="DTREnable" value="1">
  5. <param name="Handshaking" value="0">
  6. <param name="InBufferSize" value="1024">
  7. <param name="InputLen" value="0">
  8. <param name="NullDiscard" value="0">
  9. <param name="OutBufferSize" value="512">
  10. <param name="ParityReplace" value="?">
  11. <param name="RThreshold" value="1">
  12. <param name="RTSEnable" value="1">
  13. <param name="SThreshold" value="2">
  14. <param name="EOFEnable" value="0">
  15. <param name="InputMode" value="0"><!--comInputModeText 0 (缺省) 通过 Input 属性以文本方式取回数据。comInputModeBinary 1  通过 Input 属性以二进制方式检取回数据。-->
  16. <param name="DataBits" value="8">
  17. <param name="StopBits" value="1">
  18. <param name="BaudRate" value="38400">
  19. <param name="Settings" value="38400,N,8,1">
  20. </object>

以上代码主要设置了串口号,波特率,收发缓冲等等(具体使用说明网上有很多)。

而在js文件中则主要实现打开关闭串口,以及收发数据的操作。

  1. function OpenPort()
  2. {
  3. var cmd_send = "";
  4. var result = $('txtReceive').value;
  5. var results = result.split(',');
  6. for(var i=0;i<results.length;i++)
  7. {
  8. cmd_send += String.fromCharCode(eval(results[i]));
  9. }
  10. if(MSComm1.PortOpen==false)
  11. {
  12. MSComm1.PortOpen=true;
  13. MSComm1.Output=cmd_send;//发送命令
  14. }
  15. else
  16. {
  17. window.alert   ("已经开始接收数据!");
  18. }
  19. }
  20. function ClosePort()
  21. {
  22. if(MSComm1.PortOpen==true)
  23. {
  24. MSComm1.PortOpen=false;
  25. }
  26. else
  27. {
  28. window.alert   ("串口已经关闭!");
  29. }
  30. }
  31. function SendMessage()
  32. {
  33. var cmd_send = "";
  34. var result = $('txtReceive').value;
  35. var results = result.split(',');
  36. for(var i=0;i<results.length;i++)
  37. {
  38. cmd_send += String.fromCharCode(eval(results[i]));
  39. }
  40. if(MSComm1.PortOpen==false)
  41. {
  42. window.alert   ("串口已经关闭!!");
  43. }
  44. else
  45. {
  46. MSComm1.Output=cmd_send;//发送命令
  47. }
  48. }

实现之后的效果是这样的:

我们看到的上面的文本框使我发送的指令,而下面的文本框就是我收到的数据。

然后,我使用方法二。使用C#打开串口,使用jQuery的函数和C#进行通讯获取当前的数据(包括当前经纬度,时间日期)。C#的代码如下:

  1. public static void Read()
  2. {
  3. sp = new SerialPort("COM4", 38400, Parity.None, 8, StopBits.One);
  4. sp.Close();
  5. sp.ReadBufferSize = 512;
  6. sp.ReceivedBytesThreshold = 1;
  7. sp.Open();
  8. while (true)
  9. {
  10. try
  11. {
  12. Databuffer += sp.ReadExisting();
  13. }
  14. catch (TimeoutException) { }
  15. }
  16. }

其中sp为串口类SerialPort。打开串口之后调用ReadExisting函数读取串口数据。

JS中获取当前数据的代码如下:

  1. function GPSGetDataTimer() {
  2. Referece = "data";  //获得GPS数据
  3. $.post("GetGPSDataComm.aspx",
  4. { REF: encodeURI(Referece)
  5. },
  6. function (data) {
  7. alert(data);
  8. });
  9. }

我按照一定的频度向GetGPSDataComm.aspx文件发出请求,然后获得当前的数据,并且把字符串显示出来。效果如下图:

下一步我计划在前台将字符串以图形化的方式显示,这样便会更加直观的观测到串口的数据。

最新文章

  1. 分享Kali Linux 2016.2第50周虚拟机
  2. IOS的浅拷贝和深拷贝
  3. 比较两份文件的异同-beyond compare
  4. 手把手教你清除WIN7的C盘垃圾
  5. Effective C++_笔记_条款02_尽量以const、enum、inline替换#define
  6. sqlalchemy的使用
  7. TwinStickShooter的一些问题
  8. Egret 获取不到皮肤中的按钮 id
  9. C# PictureBox控件畫圖
  10. linux下配置java环境
  11. StorageLevel
  12. 转载-浅谈Ddos攻击攻击与防御
  13. Java HashMap源码分析
  14. POJ 1047 Round and Round We Go
  15. C语言 字符串处理函数 转自 http://blog.chinaunix.net/uid-25885064-id-3175049.html
  16. 「Python」socket指南
  17. c/c++的|、||、&amp;、&amp;&amp;、异或、~、!运算
  18. c++新特性---引用变量
  19. scala学习手记30 - 闭包
  20. LeetCode 2——两数相加

热门文章

  1. SpringMVC 方法参数设置
  2. scriptlet
  3. 亚马逊API的使用
  4. Python threads synchronization: Locks, RLocks, Semaphores, Conditions, Events and Queues(Forwarding)
  5. Linux入门基础篇
  6. BTA 常问的 Java基础40道常见面试题及详细答案
  7. list去除重复数据
  8. Android之使用picker打开相应的app
  9. Pycharm 增加 run 控制台缓冲行数
  10. [Android Pro] AtomicInteger的用法