Skip to main content

JS 连接蓝牙&传输数据

六月, 2024 · 预计阅读时间： 5 分钟

前端JS

Web Bluetooth API 是一项允许网页与蓝牙设备进行通信的技术。这使得开发者能够直接在浏览器中与支持 Bluetooth Low Energy (BLE) 的设备进行交互，比如智能手表、传感器、医疗设备等。

需求背景​

实现一个在浏览器端通过连接蓝牙打印机打印文件的功能！

以下是关于这个需求的详细描述：

  • 支持主流浏览器：如 Chrome、Firefox、Safari 等以及不同操作系统（如 Windows、macOS、Linux 等）。
  • 蓝牙连接：用户能够通过浏览器自动搜索并连接到附近的蓝牙打印机。
  • 文件打印：用户可以选择本地文件（如 PDF、Word、图片等格式）并通过蓝牙打印机进行打印。
  • 用户界面：提供一个简洁明了的用户界面，方便用户选择打印机、上传文件和开始打印。

为了实现这个功能，就可以采用 Web Bluetooth API 技术方案。

环境准备与权限获取​

  1. Web Bluetooth API 只能在 HTTPS 下使用（localhost 除外）。
  2. 目前主要是 Chrome 和基于 Chromium 的浏览器支持该 API。
  3. 需要用户授权网站访问蓝牙设备，这意味着需要在网站中添加适当的 UI 提示，引导用户授权。

连接蓝牙设备​

Web Bluetooth API 规定，对于需要用户授权的操作，必须在用户有明确交互行为（例如点击按钮）发生时才能进行。这是为了保护用户隐私，防止自动化访问。

要连接蓝牙设备，首先需要使用 navigator.bluetooth.requestDevice() 方法请求用户选择一个蓝牙设备。

这个方法接受一个 acceptAllDevices:true 参数，表示请求脚本可以接受所有蓝牙设备。

<!-- 按钮点击连接蓝牙 -->
<button id="connect" onclick="handleConnect()">连接蓝牙设备</button>
async function handleConnect() {
  try {
    // 请求用户选择一个蓝牙设备
    const device = await navigator.bluetooth.requestDevice({
      acceptAllDevices: true
    })
    console.log('Device Name:', device.name)
    console.log('Device ID:', device.id)
  } catch (error) {
    console.error('Error:', error)
  }
}

点击配对按钮，可以获取到 Device Name 以及对应的 Device ID ：

发现服务与特征​

成功连接到蓝牙设备后，下一步是发现设备上的 服务 和 特征。

首先，使用 connect() 方法连接到设备。

然后，调用 getPrimaryService() 方法获取指定的服务。

// 连接到设备
const server = await device.gatt.connect()

// 获取服务
// 这里的 YOUR_SERVICE_UUID 占位符表示实际的服务 UUID
const service = await server.getPrimaryService('YOUR_SERVICE_UUID')

读取写入数据​

使用 readValue() 和 writeValue() 方法读取和写入特征值:

// 获取特征
const characteristic = await service.getCharacteristic('YOUR_SERVICE_UUID')

// 读取特征值
const value = await characteristic.readValue()

// 写入特征值
const encoder = new TextEncoder()
const data = encoder.encode('Hello, Bluetooth!')
characteristic
  .writeValue(data)
  .then(() => {
    console.log('Data written successfully')
  })
  .catch(error => {
    console.error('Error:', error)
  })

这样一个简单的连接蓝牙设备并读写数据的功能案例就实现了，接下来就直接按照需求开干了。

完整示例​

async function handleConnect() {
  try {
    // 请求用户选择一个蓝牙设备
    const device = await navigator.bluetooth.requestDevice({
      acceptAllDevices: true
    })
    console.log('Device Name:', device.name)
    console.log('Device ID:', device.id)

    // 连接到设备
    const server = await device.gatt.connect()

    // 获取服务
    // 这里的 YOUR_SERVICE_UUID 占位符表示实际的服务 UUID
    const service = await server.getPrimaryService('YOUR_SERVICE_UUID')

    // 获取特征
    const characteristic = await service.getCharacteristic('YOUR_SERVICE_UUID')

    // 读取特征值
    const value = await characteristic.readValue()

    // 写入特征值
    const encoder = new TextEncoder()
    const data = encoder.encode('Hello, Bluetooth!')
    characteristic
      .writeValue(data)
      .then(() => {
        console.log('Data written successfully')
      })
      .catch(error => {
        console.error('Error:', error)
      })
  } catch (error) {
    console.error('Error:', error)
  }
}