Electron+Next.js环境下获取蓝牙串口设备名称的方案咨询

一、Node版本不一致的原因及解决 #

• 你遇到的node命令显示20.12.2但安装的是18.16.1，大概率是用了版本管理器（比如nvm、nvs），全局默认版本被切换到了20.12.2，而npm 10.5.0本身是Node 20.x的配套版本，所以出现版本不匹配。
• 解决方法：
  • 用版本管理器切换到指定版本：nvm use 18.16.1（如果用nvm）
  • 检查系统PATH变量，确保Node 18.16.1的路径优先级高于其他版本
  • 若不需要多版本管理，卸载多余Node版本，重新安装对应版本的npm（Node 18对应npm 8.x，可运行npm install -g npm@8降级匹配）

二、获取蓝牙设备名称的可行方案（无需废弃模块） #

旧的Node蓝牙模块大多不再维护，推荐直接使用Electron支持的Web Bluetooth API，它基于Chromium原生能力，适配你的Electron 26版本，且支持TypeScript/ES模块。

实现步骤： #

1. 配置Electron权限
   在main.js中开启蓝牙权限，允许渲染进程使用Web Bluetooth：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      enableBlinkFeatures: 'Bluetooth'
    }
  });

  mainWindow.loadURL('http://localhost:3000'); // 你的Next.js开发地址
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

2. 在Preload脚本中暴露蓝牙相关API
   preload.js中添加：

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('bluetooth', {
  getPairedDevices: async () => {
    if (!navigator.bluetooth.getDevices) return [];
    const devices = await navigator.bluetooth.getDevices();
    return devices.map(device => ({
      name: device.name,
      id: device.id,
      connected: device.gatt?.connected || false
    }));
  },
  requestDevice: async () => {
    try {
      const device = await navigator.bluetooth.requestDevice({
        acceptAllDevices: true,
        optionalServices: ['generic_access']
      });
      return {
        name: device.name,
        id: device.id,
        connected: device.gatt.connected
      };
    } catch (error) {
      console.error('蓝牙请求失败:', error);
      return null;
    }
  }
});

3. 在Next.js渲染层调用API
   在React组件（如pages/index.tsx）中：

import { useEffect, useState } from 'react';

interface BluetoothDevice {
  name: string;
  id: string;
  connected: boolean;
}

export default function Home() {
  const [devices, setDevices] = useState<BluetoothDevice[]>([]);

  const fetchPairedDevices = async () => {
    const pairedDevices = await window.bluetooth.getPairedDevices();
    setDevices(pairedDevices);
  };

  const requestNewDevice = async () => {
    const device = await window.bluetooth.requestDevice();
    if (device) setDevices(prev => [...prev, device]);
  };

  return (
    <div>
      <button onClick={fetchPairedDevices}>获取已配对设备</button>
      <button onClick={requestNewDevice}>选择新设备</button>
      <ul>
        {devices.map(device => (
          <li key={device.id}>
            名称: {device.name || '未知设备'} | 连接状态: {device.connected ? '已连接' : '未连接'}
          </li>
        ))}
      </ul>
    </div>
  );
}

注意事项： #

• Web Bluetooth API必须由用户交互触发（如点击按钮），不能直接在页面加载时调用，否则会被Electron阻止
• 部分平台（如Windows）需要开启系统蓝牙权限，且应用需被授权访问蓝牙
• 若设备名称为空，可能是设备未广播名称，此时通过requestDevice让用户手动选择设备，通常能获取到名称

内容的提问来源于stack exchange，提问作者Mart