首页/文章/javascript

JavaScript 连接蓝牙&传输数据！

2024-09-18

788 字约 3 分钟

...

学习

需求背景

最近项目上接到一个新的需求：实现一个在浏览器端通过连接蓝牙打印机打印文件的功能！

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

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

为了实现这个功能，我们将采用 Web Bluetooth API 技术方案：

Web Bluetooth API 是一个用于与蓝牙设备通信的 Web API，可以让我们在浏览器端直接与蓝牙打印机进行交互。

环境准备与权限获取

在使用 Web Bluetooth API 之前，请确保您的网站运行在支持该 API 的浏览器上（目前主要是 Chrome 和基于 Chromium 的浏览器）。

同时，用户需要授权网站访问蓝牙设备。这意味着您需要在网站中添加适当的 UI 提示，引导用户授权。

连接蓝牙设备

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

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

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

  
  <button id="connect" onclick="handleConnect()">连接蓝牙设备</button>

  function handleConnect() {
    navigator.bluetooth
      .requestDevice({
        acceptAllDevices: true,
      })
      .then((device) => {
        console.log("Device Name:", device.name);
        console.log("Device ID:", device.id);
        return device.gatt;
      })
      .then((server) => {
        
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }

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

发现服务与特征

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

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

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

❗️ 注意：这里的 YOUR_SERVICE_UUID 占位符表示实际的服务 UUID。

server.connect()
  .then(server => {
    return server.getPrimaryService('YOUR_SERVICE_UUID');
  })
  .then(service => {
    
  })
  .catch(error => {
    console.error('Error:', error);
  });

读取写入数据

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

characteristic.readValue()
  .then(value => {
    console.log('Characteristic Value:', value);
  })
  .catch(error => {
    console.error('Error:', error);
  });


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);
  });