### 如何在
Create-React-App 中集成蓝牙功能
Create-React-App 是一个用于快速初始化
React 项目的工具，虽然它本身并不直接支持硬件交互功能（如蓝牙），但可以通过 Web Bluetooth API 实现蓝牙设备的连接和数据传输。以下是实现这一目标的具体方法：
#### 1
. **Web Bluetooth API 基础**
Web Bluetooth API 提供了一种标准的方式来让网页应用程序与附近的蓝牙低功耗 (BLE) 设备进行通信。此 API 支持扫描 BLE 设备、读取服务和特征以及发送/接收数据等功能[^2]。
#### 2
. **安装依赖项**
由于
Create-React-App 默认不包含任何额外的库来处理蓝牙操作，因此需要手动编写代码调用浏览器原生的 `navigator
.bluetooth` 对象。如果希望简化某些复杂流程，可以考虑使用社区中的辅助库，例如 `web
-bluetooth` 或其他封装好的 npm 包。不过需要注意的是，在大多数情况下，直接使用 Web Bluetooth API 就足够了。
#### 3
. **请求权限并发现附近设备**
要开始与蓝牙设备互动，首先需要获得用户的许可，并尝试寻找可用的目标设备：
```javascript
async function requestDevice() {
try {
const device = await navigator
.bluetooth
.requestDevice({
filters: [{ services: ['battery_service'] }] // 替换为目标设备的服务 UUID
});
console.log('成功获取到设备:', device);
return device;
} catch (error) {
console.error('无法找到设备', error);
}
}
```
#### 4
. **建立 GATT 连接**
一旦选择了特定的蓝牙设备，则需进一步打开其通用属性配置文件 (GATT)，以便访问具体的服务和特性。
```javascript
function connectToDevice(device) {
device
.addEventListener('gattserverdisconnected', onDisconnected);
return device
.gatt
.connect()
.then(server => {
console.log('已连接至 GATT Server
.');
return server;
})
.catch(error => {
console.error('GATT 连接失败:', error);
});
}
function onDisconnected(event) {
console.warn('设备断开连接');
}
```
#### 5
. **读写蓝牙数据**
最后一步是从选定的服务中检索所需的特征值，并执行相应的读或写操作。
```javascript
async function readCharacteristicValue(server, serviceUUID, characteristicUUID) {
const service = await server
.getPrimaryService(serviceUUID);
const characteristic = await service
.getCharacteristic(characteristicUUID);
const value = await characteristic
.readValue();
console.log(`Read Value: ${value}`);
return value;
}
async function writeCharacteristicValue(server, serviceUUID, characteristicUUID, data) {
const service = await server
.getPrimaryService(serviceUUID);
const characteristic = await service
.getCharacteristic(characteristicUUID);
await characteristic
.writeValue(data);
console.log('Data written successfully!');
}
```
以上代码片段展示了如何利用 Web Bluetooth API 来完成基本的功能需求。值得注意的是，这些功能可能仅限于现代浏览器的支持情况，并且部分旧版操作系统或者移动平台可能存在兼容性问题[^1]。
#### 注意事项
- 确保测试环境允许开启蓝牙调试模式；
- 浏览器的安全策略通常要求 HTTPS 协议下才能激活敏感接口；
- 不同厂商生产的蓝牙模块可能会有不同的服务定义，请查阅对应文档确认实际使用的 UUID 列表。
---
### 示例项目结构
假设我们正在开发一款简单的电池状态监测应用，那么完整的组件逻辑如下所示：
```javascript
import
React, { useState } from '
react';
const BluetoothDemo = () => {
const [deviceName, setDeviceName] = useState('');
async function handleConnectClick() {
let device = null;
try {
device = await navigator
.bluetooth
.requestDevice({
acceptAllDevices: true,
optionalServices: ['battery_service']
});
setDeviceName(device
.name);
const server = await device
.gatt
.connect();
const batteryService = await server
.getPrimaryService('battery_service');
const levelChar = await batteryService
.getCharacteristic('battery_level');
const result = new Uint8Array(await levelChar
.readValue());
alert(`Battery Level: ${result[0]}%`);
} catch(err){
console.error("Connection failed", err
.message );
}
};
return (
<div>
<h1>Bluetooth Demo</h1>
<button onClick={handleConnectClick}>Connect Device</button><br/>
Connected to: {deviceName ? deviceName : "No device"}
</div>
)
};
export default BluetoothDemo;
```
---
本文介绍了如何在使用create-react-app创建的React应用中，通过修改webpack配置文件来移除console.log输出，以优化生产环境的打包结果。在执行`npm run eject`后，找到webpack配置并添加`pure_funcs`配置项，设置为`['console.log']`即可。此操作仅会移除console.log，保留其他console调用。
扫一扫
1453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
