0

0

JavaScript蓝牙连接_javascript硬件交互

紅蓮之龍

紅蓮之龍

发布时间:2025-12-04 19:57:06

|

175人浏览过

|

来源于php中文网

原创

javascript通过web bluetooth api实现与蓝牙低功耗设备的交互,需用户授权并满足https、现代浏览器等条件;1. 调用requestdevice选择设备;2. 连接gatt服务器;3. 获取服务与特征值;4. 读取或监听数据;仅支持ble、需手动触发、兼容性有限,尤其ios不支持。

javascript蓝牙连接_javascript硬件交互

JavaScript 实现蓝牙连接和硬件交互,主要依赖于 Web Bluetooth API,它允许网页在用户授权的前提下与附近的蓝牙低功耗(BLE, Bluetooth Low Energy)设备进行通信。这种技术广泛应用于物联网(IoT)、智能穿戴设备、健康监测仪器等场景中。

Web Bluetooth API 基础

Web Bluetooth 让浏览器可以直接发现、连接并读写 BLE 外设的数据。该功能目前主要支持现代浏览器如 Chrome、Edge 和部分基于 Chromium 的浏览器,不支持 Safari 和 IE。

使用前需确保:

  • 设备支持蓝牙 4.0 或以上版本
  • 浏览器启用且支持 Web Bluetooth
  • 网站运行在 HTTPS 环境下(本地开发可使用 localhost

连接蓝牙设备的步骤

通过 JavaScript 连接蓝牙设备通常包括以下流程:

Anyword
Anyword

AI文案写作助手和文本生成器,具有可预测结果的文案 AI

下载

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

1. 请求设备
调用 navigator.bluetooth.requestDevice() 弹出选择框,让用户选择目标设备。

const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ['battery_service'] }], // 按服务筛选
  optionalServices: ['battery_service'] // 后续操作需要的服务
});

2. 建立 GATT 连接
获取设备的 GATT 服务器并连接。

const server = await device.gatt.connect();

3. 获取服务和特征值
通过服务 UUID 获取特定服务,再获取其中的特征(Characteristic)。

const service = await server.getPrimaryService('battery_service');
const characteristic = await service.getCharacteristic('battery_level');

4. 读取或监听数据
可以读取当前值或开启通知持续接收更新。

// 读取一次
const value = await characteristic.readValue();
console.log('电量:', value.getUint8(0));

// 监听变化
await characteristic.startNotifications();
characteristic.addEventListener('characteristicvaluechanged', (event) => {
  const val = event.target.value;
  console.log('实时电量:', val.getUint8(0));
});

实际应用场景示例

假设你有一个自定义的 BLE 设备,广播一个名为 "HeartRateMonitor" 的服务,你可以这样连接:

const device = await navigator.bluetooth.requestDevice({
  filters: [
    { namePrefix: 'HR_' } // 名称以 HR_ 开头的设备
  ],
  optionalServices: ['heart_rate']
});

const server = await device.gatt.connect();
const service = await server.getPrimaryService('heart_rate');
const char = await service.getCharacteristic('heart_rate_measurement');

await char.startNotifications();
char.addEventListener('characteristicvaluechanged', (e) => {
  const data = e.target.value;
  // 解析心率数据(具体格式参考 BLE 标准)
  const heartRate = data.getUint8(1);
  console.log('当前心率:', heartRate);
});

注意事项与限制

虽然 Web Bluetooth 提供了便捷的硬件交互方式,但仍有一些关键限制:

  • 仅支持 BLE 设备,不能连接经典蓝牙(如音箱、键盘)
  • 必须由用户主动触发连接操作(比如点击按钮),不能自动扫描
  • 权限控制严格,用户每次都需要确认设备选择
  • 不同设备的 UUID 和数据格式各异,需查阅设备文档正确解析
  • 移动端兼容性差,Android 支持较好,iOS 基本不支持

基本上就这些。只要设备符合规范,配合正确的服务和特征 UUID,JavaScript 就能轻松实现与硬件的数据交互。不复杂但容易忽略细节,尤其是数据解析部分,建议结合官方 BLE 规范文档一起调试。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

1044

2023.08.11

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

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

827

2023.11.06

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

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

1711

2023.08.21

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

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

396

2024.03.05

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

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

1031

2025.04.24

android开发三大框架
android开发三大框架

android开发三大框架是XUtil框架、volley框架、ImageLoader框架。本专题为大家提供android开发三大框架相关的各种文章、以及下载和课程。

334

2023.08.14

android是什么系统
android是什么系统

Android是一种功能强大、灵活可定制、应用丰富、多任务处理能力强、兼容性好、网络连接能力强的操作系统。本专题为大家提供android相关的文章、下载、课程内容,供大家免费下载体验。

1819

2023.08.22

android权限限制怎么解开
android权限限制怎么解开

android权限限制可以使用Root权限、第三方权限管理应用程序、ADB命令和Xposed框架解开。详细介绍:1、Root权限,通过获取Root权限,用户可以解锁所有权限,并对系统进行自定义和修改;2、第三方权限管理应用程序,用户可以轻松地控制和管理应用程序的权限;3、ADB命令,用户可以在设备上执行各种操作,包括解锁权限;4、Xposed框架,用户可以在不修改系统文件的情况下修改应用程序的行为和权限。

2126

2023.09.19

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号