基于Websocket的串口控制系統的研究

張宏橋 蔣虎 曾曉華 段凌飛

摘 ?要：隨著計算機技術的不斷發展，物聯網設備的遠控技術在實現上變得更加快捷。其中，串口是當前嵌入式數據傳輸技術的一種主流通訊方式，它有著協議簡單，支持全雙工傳輸等特點。本文針對常用的RS232串口，基于Websocket協議，使用支持跨平臺的網絡庫libevent和串口庫Serial Communication Library，研究并實現了Websocket與RS232之間的數據中轉。接著基于Web前端HTML5標準的Websocket特性及相關UI框架，實現了Web與RS232之間數據的異地操作與傳輸，將串口數據實時繪制為網頁圖表并最終驗證了該系統設計的有效性與可擴展性。

關鍵詞：物聯網;遠程控制;串口通訊;Websocket

中圖分類號：TP311 ? ? 文獻標識碼：A

Abstract：With the development of computer technology，it becomes more efficient to implement the remote control techniques on the devices of Internet of Things.The serial port is a main method of data transmission for embedded devices，with the characteristics of simple protocol and good support for full duplex transmission.Aiming at the serial port type of RS232，this paper studies the research and implementation of data transfer between Websocket and RS232 by using the cross-platform network library of libevent and the serial port library of Serial Communication Library.Then，based on the Websocket characteristics of HTML5 and Echarts Library of Web UI framework，it realizes the remote operation and data transmission between Web and RS232，and renders the serial port data on a web page graph in real time.Finally，the validity and extensibility of the proposed system are verified.

Keywords：Internet of Things;remote control;serial port communication;Websocket

1 ? 引言（Introduction）

隨著計算機技術的發展，物聯網設備遠程操控的實現變得更加快捷。串口是目前嵌入式數據傳輸的主流方式之一，有著協議簡單，線路連接方便等特點[1]。同時，在人機交互領域，Web前端技術也愈發成熟與穩定，終端使用支持HTML5的瀏覽器訪問服務器頁面，即可實時控制節點并獲取硬件數據[2]。目前主流的前端UI設計趨于模塊化與代碼的精簡化，其本身又具有跨平臺的優勢，使得前端的多端發布更加容易[3]。本文利用H5標準的Websocket協議，使用C/C++設計了一種跨平臺的網頁與串口數據交互的中轉服務端，可以在網頁中對本地或者遠程的多個硬件串口進行操作，同時允許用戶可以便捷地對前端UI進行定制。

本文設計的數據操作框架如圖1所示。基于Websocket協議與串口編程接口，將硬件數據上送至Web控制端，同時從Web控制端將相應的操作指令下發至數據服務端以完成具體操作。

各模塊解釋如下：（1）被控設備：即下位機設備，通過RS232協議進行數據交互。（2）數據服務端：系統框架的核心，對下管理并操作多個串口數據，對上接收并執行Web控制端下發的控制指令，并在指令完成后向控制端返回相應的結果。（3）Web控制端：人機交互界面，使用Web框架實現，通過Websocket連接數據服務端并間接操作串口，允許控制端與服務端的異地分布。

2 ? 系統相關技術（System technology）

2.1 ? 串口操作

大部分的設備模塊均支持一個以上的串口來進行通訊[4]。本文基于C/C++的編程環境，針對常用的RS232串口進行操作。在PC級別的操作系統上，串口操作一般基于自身的應用程序編程接口以文件的方式驅動串口。本文使用支持Windows、Linux，以及Mac操作系統環境的Serial Communication Library庫進行串口操作，相關功能函數如下：

信息查詢：vectorcomInfo=serial：：list_ports（），其中comInfo為包含串口名稱等字符串信息的vector向量。

設置與打開串口：serial：：Serial（strComName，nBaud，tagTimeOut），其中strComName為string類型的串口名稱，nBaud為整數類型的波特率，tagTimeOut為serial：：Timeout結構體類型的讀寫超時配置。該構造函數默認調用open成員函數，如果打開失敗則會拋出異常信息。

關閉串口：Serial：：close（），關閉當前實例對應的串口。

狀態查詢：Serial：：isOpen（），返回當前實例對應串口的打開狀態。

讀取串口：Serial：：read（pBuffer，nLen），從當前串口讀緩沖區中讀取指定整數長度nLen的數據到字節指針pBuffer指向的內存中。

寫入串口：Serial：：write（pBuffer，nLen），將字節指針pBuffer指向的內存數據，寫到串口寫緩沖區中，長度為指定的整數nLen。

2.2 ? Websocket數據傳輸

Websocket是W3C標準下的一種基于Tcp的應用層協議，利用該協議可以在Web層面快速穩定的進行數據流交互[5]。協議的基本操作包含安全握手，數據類型與數據流控制等內容，關鍵的通訊狀態如下：

準備連接狀態：服務端建立Tcp監聽服務，等待客戶端發起連接。

握手驗證狀態：Websocket基于HTTP協議進行握手驗證，瀏覽器的網頁地址格式為ws：//服務主機地址：端口（默認80），對于HTTPS（HTTP+SSL）的加密驗證，地址格式為wss：//服務主機地址：端口（默認443）。當客戶端申請握手時，在協議頭的“Sec-WebSocket-Key”字段里添加由Base64編碼的握手文本，當服務端收到該握手信息后，提取該Base64秘鑰，并在其之后加上一段特殊字符串"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"，接著進行SHA-1與BASE64的操作，生成應答信息，最終賦給應答協議頭中的“Sec-WebSocket-Accept”字段并返回給客戶端校驗，以確認接下來的數據交互是Websocket協議訪問，而非HTTP。

數據傳輸狀態：Websocket支持多種長度與消息類型的數據傳輸。常用的數據格式有文本、二進制、PINGPONG等格式，此外還可自定義數據類型。數據長度上支持短（小于126字節）、中（小于65536字節）、長（小于2^64字節）三種長度的數據傳輸。

由于底層的Tcp是面向流的傳輸，可以通過協議定義的控制字來解決Tcp傳輸數據的粘包、分包等問題，具體的幀頭功能解釋詳見表1。

本文使用支持跨平臺的libevent網絡庫，基于上述的Websocket協議原理實現相關服務。實現時需注意如下問題：（1）長數據分幀方式的不同，即數據有可能在Websocket層被分為多幀發送;也可能在Websocket層使用一幀發送，卻在Tcp層被分為了多幀。（2）服務端與客戶端在數據加密上的區別，一般情況下，服務端向客戶端發送非加密數據，客戶端向服務端發送掩碼異或加密的數據。

2.3 ? Web端數據傳輸與UI設計

目前主流的H5瀏覽器均支持Websocket相關的Javascript編程接口，相關的功能函數與事件如表2所示。

在目前H5的Web標準下，可以使用各類Javascript庫高效地實現Web數據的渲染與交互。如JQuery庫有著編碼方便、性能高、插件豐富等特點;EasyUI庫具有美觀的界面插件，專注于用較少的代碼開發UI。Echarts則是圖表顯示功能較為強大的Javascript功能庫，可以方便地集成到其他模塊當中[6]。本文基于Echarts庫，將Websocket收到的串口數據實時繪制在瀏覽器圖表上。

3 ? 系統設計與實現（System design and implementation）

本文采用循環指令隊列實現異步串口操作，支持通過一個控制端同時操作多個串口，控制流程如圖2所示，其中“源ID”指的是下發當前指令所用的Websocket上下文環境。

控制指令采用字符串格式，服務端接收指令并異步執行串口操作，最終返回給控制端相應的操作結果，具體命令與響應的定義如下文所述。

查詢所有串口：當控制端下發查詢命令后，數據服務端執行串口遍歷相關功能，并返回串口列表。

打開串口：控制端下發打開串口命令，指定要打開串口的名稱、波特率等信息，數據服務端先檢查指定的串口是否存在，若存在則檢查當前串口狀態并嘗試以指定的配置打開串口，最終異步響應執行結果。

關閉串口：控制端下發關閉串口命令，指定要關閉串口的名稱，數據服務端先檢查指定的串口是否存在，如果存在且串口已經打開，則嘗試關閉串口，最終異步響應執行結果。

查詢串口狀態：控制端下發串口查詢命令，指定要查詢串口的名稱，數據服務端先檢查指定的串口是否存在，如果存在則檢查串口的開關狀態，最終異步響應查詢結果。

寫入串口數據：控制端下發寫串口命令，指定所寫的數據類型、串口號，以及要寫入的數據。數據服務端先檢查指定的串口是否存在，如果存在且打開則執行寫入操作，最終異步響應寫入結果。其中，數據類型為0或1，0表示文本型數據，1表示用Base64編碼的二進制數據。

讀取串口數據：控制端下發讀串口命令，指定要讀取的長度、串口號。數據服務端先檢查指定的串口是否存在，如果存在且打開則執行讀取操作，最終異步響應讀取結果。其中，實際讀取的數據長度小于等于指定的讀取長度，數據以Base64編碼的形式返回。

4 ? 系統功能驗證（System function verification）

本文使用被控設備向PC串口發送隨時間變化的正弦信號，Web控制端以20ms的間隔下發讀命令給數據服務端，服務端接收串口數據并上送給控制端，最終使用Echarts把數據以圖表的形式渲染出來，串口的參數以網頁URL的形式傳入。本文使用同一局域網內的兩臺PC機進行測試，其中一臺運行數據服務器并與下位機用串口連接，下位機不斷向數據服務端發送正弦數值，另外一臺在瀏覽器中運行Web控制端網頁，獲取串口數據并顯示，工作流程如圖3所示。

圖4顯示了數據中轉服務器啟動后綁定了通用IP地址0.0.0.0，以及指定的端口8881，并打印出本地串口列表。圖5顯示了在同一網絡環境的另外一臺電腦上用瀏覽器直接打開本地網頁文件，即數據控制端，其啟動后嘗試連接數據服務器，并以9600的配置打開名稱為“COM6”的串口，最終將硬件數據實時渲染為可視化的圖形。

5 ? 結論（Conclusion）

本文使用支持跨平臺的RS232串口庫Serial Communication Library，以及網絡編程庫libevent，基于Websocket協議實現了網頁與串口之間的數據傳輸。然后利用了Web網頁的Websocket特性，以及Echarts網頁前端UI庫，實現了將串口波形數據渲染到網頁圖表上的WEB界面。最終驗證了該系統的有效性與可擴展性，為嵌入式上位機的實現提供了一種新的思路。

參考文獻（References）

[1] 張勝，李瑞民.物理隔斷計算機網絡間的實時通信設計[J].電視技術，2016，40（6）：127-130.

[2] 謝佳柏，陳賢祥，胡欣宇，等.基于低功耗藍牙和WebSocket的物聯網數據網關[J].儀表技術與傳感器，2016（1）：76-78.

[3] 章銳，陳樹勇，劉道偉，等.基于ECharts的電網Web可視化研究及應用[J].電測與儀表，2017，54（19）：59-66.

[4] 陳旭輝，楊紅云.基于STM32的多串口并行傳輸系統設計[J].計算機測量與控制，2019，27（1）：166-170.

[5] 錢宇虹.使用Websocket和Servlet實現服務器定點推送[J].軟件工程，2016，19（10）：30-33.

[6] 冀瀟，李楊.采用ECharts可視化技術實現的數據體系監控系統[J].計算機系統應用，2017，26（6）：72-76.

作者簡介：

張宏橋（1989-），男，碩士，助理實驗師.研究領域：軟件開發，計算機控制.

蔣 ?虎（1998-），男，學士生.研究領域：軟件開發，嵌入式開發.

曾曉華（1976-），女，碩士，高級實驗師.研究領域：系統仿真，嵌入式開發.

段凌飛（1983-），男，碩士，講師.研究領域：嵌入式開發，計算機控制.