如何使用html按钮执行节点功能答案

【问题标题】：How to execute node function using html button如何使用html按钮执行节点功能
【发布时间】：2017-01-14 08:04:46
【问题描述】：

我是 nodejs 的新手，我想使用 node 写入串行端口，但现在我希望它由一个按钮触发。数据来自文本框。当我在控制台/终端中运行节点脚本时，它运行良好。但是不能用网页中的按钮来做到这一点。这是我嵌入在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>

这是我打开页面控制台时遇到的错误（F12）

ReferenceError: require is not defined

提前感谢您的帮助。 :)

【问题讨论】：

标签： javascript html node.js node-serialport

【解决方案1】：

Node.js 是一个托管环境，可以执行 JS 并提供 Node.js 特定的 API。浏览器是一个不同的托管环境，具有不同的 API。不能在浏览器中使用 Node 的特定 API，使用 Node API 的 JS 会导致浏览器出错。

例如，您的脚本正在使用全局 require 函数，该函数在浏览器 API 中不可用。这就是为什么：

ReferenceError: 要求未定义

相反，您的脚本也无法在 Node 上执行，因为它使用浏览器 API：

document.getElementById("textbox1")

您在一个脚本中混合了来自不同环境的 API。

但是，如果您的 JS 脚本不使用 Node 或浏览器特定的 API，它可以在 Node 和浏览器中执行而不会出错。但您的脚本并非如此。

解决您的问题的方法是将您的脚本拆分为两个单独的脚本，一个在浏览器中运行，另一个在 Node.js 中运行，并使用XMLHttpRequest 在它们之间交换数据。

【讨论】：

您好，感谢您的回复。在你的最后一段中，你的意思是我需要打开控制台/终端来运行 NodeJS 脚本（我将与
@Blanket，不，这比这更工作。您必须设置一个可以侦听 http 连接的服务器，read this
我可以在不安装 Express 等其他模块的情况下做到这一点吗？我实际上想要另一台设备（也连接到同一网络）来访问该网页。 Express 是像我这样的初学者的最佳解决方案吗？更简单的方法是什么？谢谢。
@Blanket，我链接的文章展示了如何在没有 express 的情况下设置基本服务器
嗨，谢谢。我接受了您的回答，因为它为我提供了一个有用的链接。我将首先开始学习http请求。我认为这可能会有所帮助。非常感谢您的努力。 :)

【解决方案2】：

NodeJS 是一个非浏览器的 JavaScript 环境。您不能在浏览器环境中使用大多数 NodeJS 功能，因为它们不是为它设计的。

相反，您将拥有一个本地 NodeJS 进程，提供一个 Web 端点（例如，一个 Web 服务器；也许使用 Express，但您不必这样做）并运行该 NodeJS 进程，以便它监听 Web 请求。然后你的网页上会有一个按钮，它可以对执行工作的 NodeJS 服务器进行 ajax 调用。

当然，这只允许您在运行服务器进程的机器上执行工作。

【讨论】：

您好，感谢您的回复。我实际上想要另一台设备（也连接到同一网络）来访问该网页。 Express 是像我这样的初学者的最佳解决方案吗？
@Blanket：不能说“最好”，但它使用起来相当简单，并且经常用于使用 NodeJS 构建 Web 服务器。
您好，只是为了补充一些问题，您能给我一些简单教程的链接，如何在没有快递的情况下做到这一点。我看到的所有链接对于像我这样的初学者来说都很混乱。提前谢谢。

【解决方案3】：

也许从https://wzrd.in/standalone/serialport@latest导入串口模块

另一方面，尝试将逻辑与视图分离，我不知道您的应用程序是否会增长或者它是否只是一个 POC，但使用 messageBroker 或套接字将您的操作视图与引擎绑定？

希望对你有帮助

【讨论】：

您好，感谢您的回复。您的链接是否也意味着npmjs.com/serialport
嘿 :) 是的，同样的事情！我不喜欢没有任何解释就放-1的人:(
我不知道我不是那个-1你的人。