asp.net 使用JS获得串口数据

使用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文件发出请求，然后获得当前的数据，并且把字符串显示出来。效果如下图：

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