【高频考点精讲】前端IoT实战：从Web蓝牙到设备控制

最新推荐文章于 2025-08-06 22:20:32 发布

全栈老李技术面试

最新推荐文章于 2025-08-06 22:20:32 发布

阅读量943

点赞数 27

CC 4.0 BY-SA版权

分类专栏：前端高频考点精讲文章标签：前端 javascript html css 面试题 react vue

本文链接：https://blog.csdn.net/liuyun_12138/article/details/149164379

前端IoT实战：从Web蓝牙到设备控制

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 7 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊一个前端工程师可能觉得有点"黑科技"的领域——用JavaScript控制蓝牙设备。没错，就是那个你每天用来连耳机、连手环的蓝牙技术，现在前端也能玩了！（全栈老李提醒：本文代码示例均可直接运行，建议边看边动手）

蓝牙API的前世今生

记得2015年那会儿，我第一次听说Web Bluetooth API时，第一反应是："这玩意儿能用JavaScript控制？别逗了！" 但事实就是这么魔幻——现在主流浏览器（Chrome、Edge、Opera等）都已经支持通过Web Bluetooth API与低功耗蓝牙设备(BLE)交互了。

原理其实很简单：浏览器作为中央设备(Central)，你的智能手环/温度计等作为外围设备(Peripheral)，通过GATT协议进行通信。整个过程就像去餐厅点餐：

扫描周围设备（看看有哪些餐厅开门）
连接设备（走进选定的餐厅）
发现服务（查看菜单）
读写特征值（下单和上菜）

手把手代码实战

让我们从一个真实案例开始——控制一台支持BLE的智能灯泡。先上完整代码，后面我会拆解每个关键步骤：

// 智能灯泡控制 by 全栈老李
class SmartLightController {
   
   
  constructor() {
   
   
    this.device = null;
    this.lightCharacteristic = null;
  }

  async connect() {
   
   
    try {
   
   
      console.log('正在搜索设备...');
      this.device = await navigator.bluetooth.requestDevice({
   
   
        acceptAllDevices: false,
        filters: [{
   
    services: ['0000ffe5-0000-1000-8000-00805f9b34fb'] }],
        optionalServices: ['generic_access']
      });