如何在Angular Web应用中集成使用mavlink nodejs模块

原生Node.js生态的mavlink模块无法直接在浏览器（Angular客户端）运行，因为该模块依赖Node.js专属的原生API（如串口操作、UDP Socket、Node Buffer扩展能力等），浏览器环境不提供这些能力。但你可以使用适配浏览器环境的MAVLink实现，在Angular项目中完成相关开发，满足网页版Mission Planner的需求。

• 依赖选型与安装
  优先选择TS编写、原生支持浏览器环境的MAVLink库，比如@ifrunistuttgart/mavlink，该库支持MAVLink2协议，内置通用MAVLink消息定义，类型支持完善。
  安装命令：npm install @ifrunistuttgart/mavlink buffer --save
  其中buffer是用于补全浏览器缺失的Node Buffer能力的polyfill。
• Angular环境配置
  1. 配置polyfill：打开项目根目录下的src/polyfills.ts，添加以下代码：

  import * as buffer from 'buffer';
  (window as any).Buffer = buffer.Buffer;
  

  2. 兼容CommonJS依赖：打开angular.json，找到projects.[你的项目名].architect.build.options.allowedCommonJsDependencies，添加@ifrunistuttgart/mavlink，避免构建时报CommonJS依赖警告。
• 搭建数据传输通道
  浏览器无法直接访问串口、UDP等硬件/传输层能力，需要通过以下两种方案实现MAVLink数据传输：

  方案1（兼容性好）：本地部署轻量WebSocket代理服务，该服务负责读取串口/ UDP的MAVLink二进制数据，通过WebSocket转发给Angular前端，同时把前端下发的指令转发给飞控。
  方案2（无需本地代理）：使用Chrome、Edge等浏览器支持的WebSerial API，直接在前端和连接飞控的串口通信，不需要额外部署中间服务。

• 封装MAVLink处理服务
  建议把MAVLink的解析、发送逻辑封装为Angular全局服务，示例代码如下：

  import { Injectable } from '@angular/core';
  import { MAVLink, common } from '@ifrunistuttgart/mavlink';
  
  @Injectable({
    providedIn: 'root'
  })
  export class MavlinkService {
    // 初始化MAVLink实例：参数为消息定义集、系统ID、组件ID、是否启用MAVLink2
    private mavlink = new MAVLink(common, 255, 0, true);
  
    // 解析收到的二进制数据（从WebSocket/WebSerial获取的Uint8Array格式数据）
    parseData(rawData: Uint8Array) {
      const messages = this.mavlink.parseBuffer(rawData);
      messages.forEach(msg => {
        switch(msg.name) {
          case 'HEARTBEAT':
            // 处理心跳包，获取飞控类型、飞行模式、解锁状态等信息
            console.log('心跳包：', msg);
            break;
          case 'GPS_RAW_INT':
            // 处理GPS数据
            console.log('GPS信息：', msg);
            break;
          // 其他消息处理逻辑按需添加
        }
      })
    }
  
    // 封装发送指令的方法，示例为解锁电机指令
    sendArmCommand(transport: WebSocket | SerialPort) {
      const armCmd = common.commands.armDisarm({ arm: 1, force: 0 });
      const packedData = this.mavlink.pack(armCmd);
      transport.send(packedData);
    }
  }
  

• 自定义消息适配
  如果你使用的飞控有自定义MAVLink消息，可以通过官方pymavlink工具，根据飞控对应的MAVLink XML定义生成TS类型文件，导入到项目中替换默认的common消息集即可。

如果一定要使用原生Node.js版mavlink模块，需要在Angular构建配置中添加stream、util、os等Node核心模块的polyfill，但该方案兼容性差、构建体积大，不推荐生产环境使用。

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