Node.js串口数据无法输出至HTML，报require未定义错误

错误根源 #

你遇到的Uncaught ReferenceError: require is not defined，本质是把Node.js专属的服务器代码直接在浏览器中运行导致的：require()是Node.js特有的模块加载API，浏览器环境完全不支持，而你在HTML里通过<script src="app.js">直接引入了服务器端的app.js，自然会报错。

解决步骤 #

核心思路是分离服务器代码与前端代码，通过Socket.IO实现服务器（串口数据）和浏览器的双向通信：

1. 修正服务器端代码（app.js）

保留串口读取、HTTP服务、Socket.IO广播逻辑，同时修复socket作用域错误（原代码中socket.emit在connection回调外无法访问）：

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

var SerialPort = require('serialport');
const parsers = SerialPort.parsers;

const parser = new parsers.Readline({
  delimiter: '\r\n',
});

var port = new SerialPort('COM6', {
  baudRate: 9600,
  dataBits: 8,
  parity: 'none',
  stopBits: 1,
  flowControl: false,
});

port.pipe(parser);

var app = http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(index);
});

var io = require('socket.io')(app);

// 监听客户端连接
io.on('connection', function (socket) {
  console.log('客户端已连接');
});

// 串口数据接收后广播给所有客户端
parser.on('data', function (data) {
  console.log('Received data from port: ' + data);
  io.emit('message', data);
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

2. 修改HTML文件（index.html）

移除对服务器代码的引用，改为引入Socket.IO客户端库和前端专属逻辑文件：

<!DOCTYPE html>
<html>
<body>

<h1>Node.js to html code</h1>
<p>Message:</p>

<p id="message"></p>

<!-- 自动加载Socket.IO客户端库（由服务器提供） -->
<script src="/socket.io/socket.io.js"></script>
<!-- 前端数据接收逻辑 -->
<script src="frontend.js"></script>
    
</body>
</html>

3. 编写前端逻辑文件（frontend.js）

在浏览器中连接Socket.IO服务器，接收并更新页面内容：

// 连接到本地Socket.IO服务器
const socket = io();

// 监听服务器发送的串口数据
socket.on('message', function(data) {
  // 更新页面上的消息展示
  document.getElementById('message').textContent = data;
});

运行说明 #

1. 确保已安装依赖：

npm install serialport socket.io

2. 启动服务器：

node app.js

3. 在浏览器访问http://localhost:3000，即可看到串口数据实时更新到页面上。

内容的提问来源于stack exchange，提问作者Jens