微信小程序搜索局域网设备

易风有点疯2023-10-19 9:48

最终目的：在微信小程序内搜索到同局域网内的其他设备

实现步骤：小程序开启 mDNS（多播 DNS）搜索 + 其他设备配置对应的 mDNS 模块

小程序开启 mDNS 搜索

使用 wx.startLocalServiceDiscovery 来开启 mDNS 搜索

vue 复制代码

<template>
  <view>
    <button @click="getLocalDevice">获取局域网设备</button>
    <!-- 打印信息 -->
    <view v-for="(item, index) in infoList" :key="index">
      {{ item }}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        infoList: [],
      }
    },
    methods: {
      //获取局域网设备
      getLocalDevice() {
        // 开始搜索
        wx.startLocalServiceDiscovery({
          // 当前手机所连的局域网下有一个 _http._tcp. 类型的服务，除此之外还可以设置为 '_ssh._tcp'等，具体自己百度
          serviceType: '_http._tcp',
          success: data => {
            console.log('开启成功', data)
          },
          fail: error => {
            console.log('开启失败', error)
          },
        })

        // 设置定时器停止搜索（如果不设置的话，微信默认搜索30s后停止搜索）
        setTimeout(() => {
          wx.stopLocalServiceDiscovery({
            success: data => {
              console.log('关闭成功', data)
            },
            fail: error => {
              console.log('关闭失败', error)
            },
          })
        }, 20000)
        // 监听搜索到的数据，每搜索到一个设备，就会执行一次该函数
        wx.onLocalServiceFound(rs => {
          console.log('搜索到设备', rs)
        })
      },
    },
  }
</script>