讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript怎样操作蓝牙设备?_javascript的Web Bluetooth API如何使用?

秋瑶君_8231

秋瑶君_8231

发布时间:2025-12-23 16:46:15

|

813人浏览过

|

来源于php中文网

原创

Web Bluetooth API允许HTTPS或localhost环境下通过用户交互调用requestDevice()、connect()、getPrimaryService()、readValue()等异步方法与BLE设备通信,Chrome/Edge/Opera支持,Safari/Firefox不支持。

javascript怎样操作蓝牙设备?_javascript的web bluetooth api如何使用?

JavaScript 本身不能直接操作蓝牙硬件,但现代浏览器(Chrome、Edge、Opera 等)支持 Web Bluetooth API,它允许网页在用户授权前提下与附近的蓝牙设备(如传感器、手环、打印机、BLE 设备)进行通信。这个 API 是异步的、基于 Promise 的,且必须运行在安全上下文(HTTPS 或 localhost)中。

一、基础前提和限制

使用 Web Bluetooth 前需确认:

  • 浏览器支持:Chrome 56+、Edge 79+、Opera 43+;Safari 和 Firefox 暂不支持
  • 页面必须通过 HTTPS(生产环境)或 http://localhost(开发调试)提供
  • 用户必须主动触发(比如点击按钮),不能自动连接——这是强制的安全策略
  • 仅支持 BLE(Bluetooth Low Energy),不支持经典蓝牙(如音频耳机、鼠标)

二、核心流程:发现 → 连接 → 读写特征值

典型操作分四步,每步都返回 Promise:

  • requestDevice():弹出系统设备选择框,让用户选一个 BLE 设备
  • connect():建立 GATT 连接(类似“打开通道”)
  • getPrimaryService() + getCharacteristic():定位服务(Service)和特征(Characteristic)
  • readValue() / writeValue() / startNotifications():读、写、监听数据

示例:读取温度传感器的当前值(假设服务 UUID 为 0000181a-0000-1000-8000-00805f9b34fb,温度特征 UUID 为 00002a6e-0000-1000-8000-00805f9b34fb):

立即学习“Java免费学习笔记(深入)”;

document.getElementById('readBtn').addEventListener('click', async () => {
  try {
    // 1. 选择设备(可加 filters 缩小范围)
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['battery_service'] }], // 或用 UUID 数组
      optionalServices: ['0000181a-0000-1000-8000-00805f9b34fb']
    });

    // 2. 连接
    const server = await device.gatt.connect();

    // 3. 获取服务和特征
    const service = await server.getPrimaryService('0000181a-0000-1000-8000-00805f9b34fb');
    const characteristic = await service.getCharacteristic('00002a6e-0000-1000-8000-00805f9b34fb');

    // 4. 读值(返回 DataView)
    const value = await characteristic.readValue();
    const temp = value.getFloat32(0, true); // 按 Little-Endian 解析 float
    console.log('温度:', temp, '°C');
  } catch (error) {
    console.error('操作失败:', error);
  }
});

三、常见实用技巧

  • 过滤设备:用 filters 指定名称前缀、服务 UUID 或制造商数据,避免列出所有设备
  • 监听通知:对可订阅的特征调用 startNotifications(),然后监听 characteristic.addEventListener('characteristicvaluechanged', ...)
  • 写数据注意格式:用 new Uint8Array([...]) 构造字节数组再传给 writeValue()
  • 断开后清理:监听 device.gatt.ondisconnect,必要时重连或提示用户

四、调试建议

开发时推荐:

  • 用手机 App(如 nRF Connect)模拟 BLE 外设,验证网页逻辑
  • Chrome 地址栏输入 chrome://bluetooth-internals 查看已配对设备、GATT 结构和实时日志
  • 遇到 NotFoundError 或 SecurityError,优先检查是否 HTTPS、是否用户触发、是否设备未广播

基本上就这些。Web Bluetooth 功能明确但权限谨慎,写起来不复杂,但容易忽略安全上下文和用户交互要求。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2746

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5439

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3867

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2982

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2714

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

3092

2025.04.24

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

4520

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

4103

2023.10.12

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn