求助：P5.js连接Arduino时出现p5.SerialPort不是构造函数错误

错误原因 #

这个错误的核心原因是你的P5.js项目未正确引入p5.serialport库，导致浏览器无法识别p5.SerialPort构造函数。

分步解决方案 #

1. 正确引入p5.serialport库 #

在加载P5.js核心库的HTML文件中，必须在P5.js之后引入p5.serialport脚本：

• 本地引入：
  将下载的p5.serialport.js文件放在项目目录内，HTML中按顺序添加脚本：

  <script src="p5.min.js"></script>
  <script src="p5.serialport.js"></script>
  <script src="sketch.js"></script>
  

• CDN引入：
  直接使用官方CDN链接：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5.serialport@0.0.28/lib/p5.serialport.js"></script>
  <script src="sketch.js"></script>
  

⚠️ 注意：脚本顺序不能颠倒，必须先加载P5.js核心，再加载串口库，最后加载你的代码文件。

2. 修正代码拼写错误 #

你的代码中存在一处笔误，将close误写为colse，修改如下：

// 错误写法
serial.on('colse', gotClose);
// 正确写法
serial.on('close', gotClose);

3. 补充缺失的回调函数 #

代码中调用了多个串口事件回调函数，但未定义它们，需要补充实现：

function serverConnected() {
  console.log('已连接到串口服务器');
}

function gotList(portList) {
  console.log('可用串口列表：');
  portList.forEach((port, index) => {
    console.log(`${index}: ${port}`);
  });
}

function gotOpen() {
  console.log('串口已打开');
}

function gotClose() {
  console.log('串口已关闭');
}

function gotData() {
  const data = serial.readStringUntil('\r\n');
  if (data) {
    latestData = data.trim();
    console.log('收到数据：', latestData);
  }
}

4. 确认服务器端口匹配 #

如果你的p5.serialserver使用了非默认端口（默认8081），需要在初始化串口时指定端口：

serial = new p5.SerialPort('localhost', 你的自定义端口号);

验证流程 #

1. 重启p5.serialserver，确保终端显示"p5.serialserver is running!"
2. 打开项目的HTML文件，按下F12打开浏览器开发者工具
3. 查看控制台是否有错误提示，若没有则检查串口列表是否正常输出
4. 上传测试代码到Arduino（比如定时发送字符串），确认P5.js控制台能收到数据

内容的提问来源于stack exchange，提问作者K-PopCorn