如何使用HTML按钮执行节点功能

Question

I'm new at nodejs and I want to write to a serial port using node but now I want it to be triggered by a button. 我是nodejs的新手，我想使用node写入串行端口，但是现在我希望它由按钮触发。 And the data is coming from a textbox. 数据来自文本框。 My node script is doing fine when I run it in the console/terminal. 在控制台/终端中运行节点脚本时，它运行良好。 But can't do it with a button in a webpage. 但是无法使用网页中的按钮来做到这一点。 Here's my nodejs embedded in html 这是我嵌入在HTML中的nodejs

<!DOCTYPE html>
<html>
<head>
    <title>Node x HTML</title>
</head>
<body>

    <script>
    function write_serial() 
    {
        var serialport = require("serialport");
        var SerialPort = serialport.SerialPort;

        var sp = new SerialPort("/dev/ttyACM0", {
          baudrate: 9600,
          parser: serialport.parsers.readline("\n")
        });

            var text = document.getElementById("textbox1").value;

            sp.on('open', function() 
            {
                sp.on('data', function (data) 
                {
                    sp.write(name);
                });
            });
    }

    </script>

    <Input Type = "text" id = "textbox1" >
    <BR>
    <br><button onclick="write_serial();" href="javascript:;">Go!</button>
</body>
</html>

Here's the error I got when I open the console of the page (F12) 这是我打开页面控制台（F12）时遇到的错误

ReferenceError: require is not defined

Thanks in advance for your help. 在此先感谢您的帮助。 :) :)

Answer 1

NodeJS is a non-browser JavaScript environment. NodeJS是一个非浏览器的JavaScript环境。 You can't use most NodeJS features in a browser environment, because they aren't designed for it. 您不能在浏览器环境中使用大多数NodeJS功能，因为它们不是为此设计的。

Instead, you'd have a local NodeJS process providing a web endpoint (eg, a web server; perhaps using Express, but you don't have to) and run that NodeJS process so it's listening for web requests. 取而代之的是，您将有一个本地NodeJS进程来提供Web终结点（例如，Web服务器；也许使用Express，但您不必这样做）并运行该NodeJS进程，以便它侦听Web请求。 Then you'd have a button on your web page that makes an ajax call to the NodeJS server, which performs the work. 然后，您的网页上就会有一个按钮，该按钮对执行工作的NodeJS服务器进行ajax调用。

Naturally, this would only allow you to perform the work on the machine where the server process is running. 自然，这仅允许您在运行服务器进程的计算机上执行工作。

Answer 2

Node.js is a hosting environment, that can execute JS and provides Node.js specific API. Node.js是一个托管环境，可以执行JS并提供Node.js特定的API。 Browser, is a different hosting environment, with different API's. 浏览器是一个具有不同API的不同托管环境。 You can't use Node's specific API in a browser, and JS that uses Node API will result in an error in a browser. 您不能在浏览器中使用Node的特定API，而使用Node API的JS将导致浏览器错误。

For example, your script is using global require function, which is not available in a browser API's. 例如，您的脚本使用的是全局require函数，该函数在浏览器API中不可用。 And that's why: 这就是为什么：

ReferenceError: require is not defined ReferenceError：需求未定义

Conversely, your script can't be executed on Node as well, since it uses browser API: 相反，您的脚本也无法在Node上执行，因为它使用浏览器API：

document.getElementById("textbox1") document.getElementById（“ textbox1”）

You've mixed API's from different environments in one script. 您已在一个脚本中混合了来自不同环境的API。

However, if your JS script doesn't use Node or browser specific API, it can be executed in both Node and a browser without an error. 但是，如果您的JS脚本不使用Node或浏览器特定的API，则可以在Node和浏览器中执行它而不会出现错误。 But it's not the case with your script. 但是脚本不是这种情况。

The solution to your problem can be to split your script into two separate scripts, run one in a browser, and the other in Node.js, and to exchange data between them using XMLHttpRequest . 解决问题的方法可以是将脚本拆分为两个单独的脚本，在浏览器中运行一个脚本，在Node.js中运行另一个脚本，然后使用XMLHttpRequest在它们之间交换数据。

Answer 3

Maybe import the serialport module from https://wzrd.in/standalone/serialport@latest 也许从https://wzrd.in/standalone/serialport@latest导入serialport模块

In other hand, try to seperate the logic from the view, i don't know if your app will grow or if it's just a POC, but use a messageBroker or sockets to bind your actions'view with the engine ? 另一方面，尝试从视图中分离逻辑，我不知道您的应用程序是否会增长，或者仅仅是POC，而是使用messageBroker或套接字将您的操作视图与引擎绑定？

Hope it helps 希望能帮助到你

如何使用HTML按钮执行节点功能

问题描述

3 个解决方案

解决方案1
1 2017-01-14 08:09:14

解决方案2
0 已采纳 2017-01-14 08:08:52

解决方案3
-1 2017-01-14 08:16:39

如何使用HTML按钮执行节点功能

问题描述

3 个解决方案

解决方案1 1 2017-01-14 08:09:14

解决方案2 0 已采纳 2017-01-14 08:08:52

解决方案3 -1 2017-01-14 08:16:39

解决方案1
1 2017-01-14 08:09:14

解决方案2
0 已采纳 2017-01-14 08:08:52

解决方案3
-1 2017-01-14 08:16:39