從客戶端 Web 瀏覽器與串行端口通信。
[英]Communicate with the serial port from client web browser.
問題描述
在我的 Web 應用程序（sencha extjs 5）中，我有一個用戶要求將數據讀/寫到客戶端 PC 串行端口。
我知道客戶端瀏覽器無法訪問本地機器硬件，除非在本地機器上安裝一些二進制文件（本機應用程序、Windows 服務等）。
我看到幾年前在 stackoverflow 論壇中討論過同樣的問題。 但是我需要知道當今使用可用技術進行此操作的最佳方法是什么？
3 個解決方案
解決方案1
11 2020-07-20 01:38:40
使用 Web 串行 API。 我使用它僅從帶有 RS232 串行接口的體重秤讀取數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Serial</title>
</head>
<body>
<div class="serial-scale-div">
<button class="btn" id="connect-to-serial">Connect with Serial Device</button>
</div>
<button id="get-serial-messages">Get serial messages</button>
<div id="serial-messages-container">
<div class="message"></div>
</div>
<script>
"use strict";
class SerialScaleController {
constructor() {
this.encoder = new TextEncoder();
this.decoder = new TextDecoder();
}
async init() {
if ('serial' in navigator) {
try {
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
this.reader = port.readable.getReader();
let signals = await port.getSignals();
console.log(signals);
}
catch (err) {
console.error('There was an error opening the serial port:', err);
}
}
else {
console.error('Web serial doesn\'t seem to be enabled in your browser. Try enabling it by visiting:');
console.error('chrome://flags/#enable-experimental-web-platform-features');
console.error('opera://flags/#enable-experimental-web-platform-features');
console.error('edge://flags/#enable-experimental-web-platform-features');
}
}
async read() {
try {
const readerData = await this.reader.read();
console.log(readerData)
return this.decoder.decode(readerData.value);
}
catch (err) {
const errorMessage = `error reading data: ${err}`;
console.error(errorMessage);
return errorMessage;
}
}
}
const serialScaleController = new SerialScaleController();
const connect = document.getElementById('connect-to-serial');
const getSerialMessages = document.getElementById('get-serial-messages');
connect.addEventListener('pointerdown', () => {
serialScaleController.init();
});
getSerialMessages.addEventListener('pointerdown', async () => {
getSerialMessage();
});
async function getSerialMessage() {
document.querySelector("#serial-messages-container .message").innerText += await serialScaleController.read()
}
</script>
</body>
</html>
您可能需要在瀏覽器上打開串行 API 功能。 以下是參考文獻的引用
可以想象，目前（2020 年 4 月）僅基於現代 Chromium 的桌面瀏覽器支持此 API，但希望在不久的將來支持會得到改善。 此時您需要啟用瀏覽器的實驗性 Web 平台功能，只需復制並粘貼正確的 URL：
chrome://flags/#enable-experimental-web-platform-featuresopera://flags/#enable-experimental-web-platform-featuresedge://flags/#enable-experimental-web-platform-features
參考：
https://dev.to/unjavascripter/the-amazing-powers-of-the-web-web-serial-api-3ilc
解決方案2
7 已采納 2015-05-20 01:02:50
好吧，一種方法是開發一個 chrome 應用程序。 您可以使用 chrome.serial API。
https://developer.chrome.com/apps/serial
示例代碼，
在您的 manifest.json 中，
{
"name": "Serial Sample",
"description": "Read/Write from/to serial port.",
"version": "1.0",
"manifest_version": 2,
"permissions": ["serial"],
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
在你的 background.js 中，
const DEVICE_PATH = 'COM1';
const serial = chrome.serial;
var dataRecieved="";
/* Interprets an ArrayBuffer as UTF-8 encoded string data. */
var ab2str = function(buf) {
var bufView = new Uint8Array(buf);
var encodedString = String.fromCharCode.apply(null, bufView);
return decodeURIComponent(escape(encodedString));
};
/* Converts a string to UTF-8 encoding in a Uint8Array; returns the array buffer. */
var str2ab = function(str) {
var encodedString = unescape(encodeURIComponent(str));
var bytes = new Uint8Array(encodedString.length);
for (var i = 0; i < encodedString.length; ++i) {
bytes[i] = encodedString.charCodeAt(i);
}
return bytes.buffer;
};
var SerialConnection = function() {
this.connectionId = -1;
this.lineBuffer = "";
this.boundOnReceive = this.onReceive.bind(this);
this.boundOnReceiveError = this.onReceiveError.bind(this);
this.onConnect = new chrome.Event();
this.onReadLine = new chrome.Event();
this.onError = new chrome.Event();
};
SerialConnection.prototype.onConnectComplete = function(connectionInfo) {
if (!connectionInfo) {
log("Connection failed.");
return;
}
this.connectionId = connectionInfo.connectionId;
chrome.serial.onReceive.addListener(this.boundOnReceive);
chrome.serial.onReceiveError.addListener(this.boundOnReceiveError);
this.onConnect.dispatch();
};
SerialConnection.prototype.onReceive = function(receiveInfo) {
if (receiveInfo.connectionId !== this.connectionId) {
return;
}
this.lineBuffer += ab2str(receiveInfo.data);
var index;
while ((index = this.lineBuffer.indexOf('\n')) >= 0) {
var line = this.lineBuffer.substr(0, index + 1);
this.onReadLine.dispatch(line);
this.lineBuffer = this.lineBuffer.substr(index + 1);
}
};
SerialConnection.prototype.onReceiveError = function(errorInfo) {
if (errorInfo.connectionId === this.connectionId) {
this.onError.dispatch(errorInfo.error);
}
};
SerialConnection.prototype.connect = function(path) {
serial.connect(path, this.onConnectComplete.bind(this))
};
SerialConnection.prototype.send = function(msg) {
if (this.connectionId < 0) {
throw 'Invalid connection';
}
serial.send(this.connectionId, str2ab(msg), function() {});
};
SerialConnection.prototype.disconnect = function() {
if (this.connectionId < 0) {
throw 'Invalid connection';
}
serial.disconnect(this.connectionId, function() {});
};
var connection = new SerialConnection();
connection.onConnect.addListener(function() {
//console.log('connected to: ' + DEVICE_PATH);
});
connection.onReadLine.addListener(function (line) {
//Serial port data recieve event.
dataRecieved = dataRecieved +line;
});
connection.connect(DEVICE_PATH);
創建 chrome 應用程序以與串行端口通信后，接下來是允許您的外部網頁使用 JavaScript 與 chrome 應用程序通信。
為此在您的 manifest.json 文件中添加，
"externally_connectable": {
"matches": ["*://*.example.com/*"]
}
這將允許您 example.com 域上的外部網頁與您的 chrome 應用程序通信。
在您的網頁中，
// The ID of the extension we want to talk to.
var editorExtensionId = "nboladondmajlaalmcdupihoilpcketyl";
// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId,
{ data: "data to pass to the chrome app" },
function (response)
{
alert(response);
});
在您的 Chrome 應用程序中，
chrome.runtime.onMessageExternal.addListener(
function (request, sender, sendResponse) {
sendResponse("Send serial port data to the web page");
});
解決方案3
1 2021-03-19 00:46:11
我建立了一個網站和一個在瀏覽器中運行串行終端的簡單示例。 您應該將其托管在 https 服務器上。
串行終端功能現在在 chrome 88 中可用。
現場演示https://www.SerialTerminal.com完整源代碼。 https://github.com/mmiscool/serialTerminal.com/blob/main/index.html
使用Applet + Javascript從客戶端（瀏覽器）讀取串行端口
[英]Read serial port from client(Browser) using Applet + Javascript
如何使用javascript通過客戶端串口進行通信？
[英]how to communicate through serial port on client side using javascript?
使用jssc和java applet與JS進行串行通信，但瀏覽器凍結
[英]using jssc and java applet to communicate to Serial with JS but browser freezes
使用 Node.js 訪問特定網頁時的 400 狀態代碼。 從我的瀏覽器點擊同一個網頁時出現 200 狀態代碼。 是什么賦予了？
[英]400 status code when using Node.js to hit a specific web page. And a 200 status code when hitting same web page from my browser. What gives?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.