Vue3 监控网页上的网络状态 防止设备离线 网络监控 设备监控 速率监控

<script setup>
import {onMounted, reactive, ref} from 'vue';
onMounted(() => {
});const network =reactive({speed:'',type:'',ttl:'',
})//网络变化事件addEventListener('online',()=>{console.log('设备上线')})//网络变化事件
addEventListener('offline',()=>{console.log('设备离线')
})//网络速度变化
navigator.connection.addEventListener('change',()=>{console.log('网络状态变化')
})const timer =setInterval(()=>{getNetworkState()
},1000)function getNetworkState(){network.speed=navigator.connection.downlink+'Mb/s'network.type=navigator.connection.effectiveType.toUpperCase()network.ttl=navigator.connection.rtt+'ms'
}</script><template><div class="box"><h3>带宽: {{network.speed}}</h3><h3>延迟: {{network.ttl}}</h3><h3>类型: {{network.type}}</h3></div>
</template><style scoped>
.box {height: 500px;background-color: royalblue;
}
</style>