如何在nodejs中连接wifi(亲测在windows以及linux下均可使用)🚀

问题: 如何在nodejs中连接wifi?

1. 使用技术栈: Vue3+Vite+Electron

因为需要使用到nodejs,所以单纯的Vue3+Vite并不能满足需求,具体的原因可以看我之前的文章Vue连接串口,包括如何搭建一个简单的Vue3+Vite+Electron的框架也可以看我之前的文章搭建一个Vue+Electron的框架,有这两篇文章作为铺垫,就可以直接码代码了

2. 第三方库介绍

这里使用了使用node-wifi库,在框架搭建好之后,可以直接使用npm或者yarn工具下载此库

3. 关键代码片段

1. 连接wifi前置操作

// 导入wifi
const wifi = require('node-wifi');

// 初始化 WiFi 模块
wifi.init({
  iface: null, // 在 Windows 上通常不需要指定接口
});

2. 检查wifi列表

// 扫描可用的 WiFi 网络
  wifi.scan((error, networks) => {
    if (error) {
      console.log(error);
      return;
    }
    // 扫描成功,得到wifi列表
    console.log(networks)
  });

3. 连接wifi

// 连接到 WiFi 网络
  wifi.connect({ ssid: 网络名称, password: 网络密码 }, error => {
    if (error) {
      // wifi连接失败
      console.log(error)
      return
    }
   // wifi连接成功
   console.log('wifi连接成功')     

4. 断开wifi

// 断开当前连接的 WiFi 网络
  wifi.disconnect(error => {
    if (error) {
      console.log(error);
    } else {
      console.log('wifi连接已断开!');
    }
  });

5. 检查wifi连接状态

wifi.getCurrentConnections((error, currentConnections) => {
    if (error) {
      console.error(error);
      return;
    }
    // 如果存在已连接的wifi信息
    if (currentConnections.length > 0) {
     console.log(currentConnections[0])
    } else {
      console.log('当前未连接到任何 WiFi 网络。');
    }
  });

有了以上的几个node-wifi的API代码片段,写起来就简单多了,只需要根据api来写业务逻辑即可

4. nodejs连接wifi案例

以下是我做的一个建议的wifi连接页面,包含了wifi列表展示,wifi连接,wifi断开连接,刷新wifi等功能,先看效果图

wifi连接工具源码:

<!--
 * @Author: wangzhiyu <w19165802736@163.com>
 * @Date: 2023-12-15 11:05:46
 * @LastEditTime: 2024-04-17 17:17:10
 * @Descripttion: Home页面
-->
<template>
  <div>
    <!-- 判断wifi是否开启 -->
    <a-button class="refreshWifi" @click="getWifiList" type="primary">刷新wifi</a-button>
    <!-- 刷新wifi -->
    <div v-if="wifiOpen" class="wifiList">
      <!-- 循环展示当前扫描到的wifi列表 -->
      <div v-for="item in wifiList" class="wifiItem">
        <!-- wifi名称 -->
        <div class="wifiSSid">{{ item.ssid }}</div>
        <!-- 连接wifi -->
        <a-button
          :type="item.isConnect ? 'default' : 'primary'"
          :danger="item.isConnect"
          @click="
            () => {
              if (item.isConnect) {
                // 断开wifi
                disconnectWifi(item);
              } else {
                // 连接wifi
                connectWifi(item);
              }
            }
          "
        >
          {{ item.isConnect ? '断开 wifi' : '连接 wifi' }}
        </a-button>
      </div>
    </div>

    <!-- wifi功能未开启提示 -->
    <div v-else>本机wifi未开启,请开启wifi后重试!</div>

    <!-- 连接wifi输入密码弹框 -->
    <a-modal :width="550" v-model:open="openModal" title="连接wifi" @ok="handleOk" cancelText="取消连接" okText="确认连接">
      <a-form>
        <a-form-item label="wifi名称">
          <a-input disabled :value="selectWifiInfo.ssid"></a-input>
        </a-form-item>
        <a-form-item label="wifi密码">
          <a-input-password v-model:value="wifiPassword" placeholder="请输入wifi密码" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
const wifi = require('node-wifi');

// wifi列表
const wifiList = ref([]);

// 判断是否开启网络
const wifiOpen = ref(false);

// 弹框开启/关闭状态
const openModal = ref(false);

// 选中连接的wifi信息
const selectWifiInfo = ref({});

// wifi密码
const wifiPassword = ref('');

// 初始化 WiFi 模块
wifi.init({
  iface: null, // 在 Windows 上通常不需要指定接口
});

// 获取wifi列表
const getWifiList = () => {
  // 扫描可用的 WiFi 网络
  wifi.scan((error, networks) => {
    // 扫描wifi失败
    if (error) {
      wifiOpen.value = false;
      console.log(error, 'error');
      return;
    }
    wifiOpen.value = true;

    // wifi扫描成功,获取wifi列表
    wifiList.value = networks.filter(item => item.ssid);

    // 检查当前wifi的连接状态
    getWifiState();
  });
};
getWifiList();

// 获取当前网络连接信息
const getWifiState = () => {
  // 获取当前连接的 WiFi 网络信息
  wifi.getCurrentConnections((error, currentConnections) => {
    if (error) {
      console.error(error);
      return;
    }
    // 如果存在已连接的wifi信息
    if (currentConnections.length > 0) {
      // 当前已经连接的 WiFi 网络
      const connectedNetwork = currentConnections[0].mac;

      // 标记当前连接的wifi
      wifiList.value.forEach(item => {
        if (item.ssid === connectedNetwork) {
          item.isConnect = true;
        } else {
          item.isConnect = false;
        }
      });
    } else {
      console.log('当前未连接到任何 WiFi 网络。');
    }
  });
};

// 连接wifi
const connectWifi = wifiInfo => {
  // 打开弹框
  openModal.value = true;
  selectWifiInfo.value = wifiInfo;
};

// 确认连接wifi
const handleOk = () => {
  // 连接到 WiFi 网络
  wifi.connect({ ssid: selectWifiInfo.value.ssid, password: wifiPassword.value }, error => {
    if (error) {
      // 提示wifi连接失败
      message.error('wifi连接失败,请检查账号密码后重试!');
    } else {
      // 提示wifi连接成功
      message.success('wifi连接成功!');

      // 标记当前连接的wifi
      wifiList.value.forEach(item => {
        if (item.ssid === selectWifiInfo.value.ssid) {
          item.isConnect = true;
        } else {
          item.isConnect = false;
        }
      });
    }

    // 清空密码
    wifiPassword.value = '';
    // 关闭弹框
    openModal.value = false;
  });
};

// 断开wifi连接
const disconnectWifi = () => {
  // 断开当前连接的 WiFi 网络
  wifi.disconnect(error => {
    if (error) {
      console.log(error);
    } else {
      message.success('wifi连接已断开!');
      wifiList.value.forEach(item => {
        item.isConnect = false;
      });
    }
  });
};
</script>

<style lang="scss">
.refreshWifi {
  position: absolute;
  left: 30%;
}
.wifiList {
  position: relative;
  width: 30%;
  min-width: 200px;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 10px;
  max-height: 90vh;
  overflow: auto;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
  .wifiItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid #000;
    padding-right: 50px;
    box-sizing: border-box;
    &:last-child {
      border-bottom: none;
    }
    .wifiSSid {
      width: 75%;
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏溢出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      padding-left: 20px;
    }
  }
}
</style>

5. 以上就是本次分享的全部内容了,有问题欢迎私信😁