网络监控状态

在有些时候我们需要监控网络的状态，比如要显示高清的图片，但是网络状态不好的话，能不能看的见图片都是一说，所以这个时候不如给用户一个稍微模糊的图片，再或者用户突然断网了但是用户不知道，此时我们就可以给出一点提示，再或者说在网络状态良好的时候提前预加载一些资源。这些都涉及一个问题，就是我们怎么才能知道用户的网络状态。

此时有一个API叫做navigator，里面有一个属性叫做connection，它是一个对象。它里面有啥呢我们来打印看一下。

js 复制代码

<template>
    <div class="screen-view"></div>
</template>
<script>
export default {
    name: '',
    data() {
        return {}
    },
    created() {
        console.log(window.navigator.connection);
    }
}
</script>
<style lang='scss' scoped>
.screen-view {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
</style>

其中这个effectiveType是识别出来的网络类型，不一定是真实的网络类型，比如我现在用的wifi，它识别出来的是4g，因为它的取值只有2g 3g 4g，它代表的不是真实的网络类型，而是通过你的延迟和网速综合判断出来的跟哪种网络状态比较接近。

而这个downlink就是下载速度也就是带宽，单位是兆/秒。rtt就是数据包从出去到回来的时间，相当于是ping，但是为毫秒。

怎么知道是离线还是在线呢，这就要通过navigator的另外一个属性onLine。它的值是布尔值，如果为true就是网络在线，相反，如果为false就是网络离线。

通过这两个属性我们就可以知道用户的网络状态了，那接下来还有一个问题，我们怎么知道信息有变呢？

这就涉及到三个事件，一个是window的事件online，当用户在线过后它会触发这个事件，就是从离线变成在线就会触发。另外一个事件也是window的事件offline，当用户离线过后它就会触发这个事件，就是从在线变成离线。那如果我不离线只是改变网络状态呢，该怎么触发事件呢？这就用到最后一个事件了，后一个事件是navigator.connection的事件change，表示网络状态发生变化的时候就会触发这个事件，也就是effectiveType发生改变以后就会触发的事件。

html 复制代码

<template>
    <div class="screen-view">
        <div class="info">
            <p>网络状态：{{ effectiveType }}</p>
            <p>延迟：{{ rtt }}</p>
            <p>带宽：{{ downlink }}</p>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            effectiveType: '',
            rtt: '',
            downlink: ''
        }
    },
    mounted() {
        window.addEventListener('online', this.updateNetworkInfo);
        window.addEventListener('offline', this.updateNetworkInfo);
        window.navigator.connection.addEventListener('change', this.updateNetworkInfo);
    },
    methods: {
        updateNetworkInfo() {
            // 获取网络信息
            const connection = window.navigator.connection || {};
            // 获取网络状态
            const flag = window.navigator.onLine;
            // 如果离线 直接返回
            if (!flag) {
                this.effectiveType = 'offline';
                this.rtt = 'unknown';
                this.downlink = 'unknown';
                return;
            }
            // 如果在线 获取网络信息
            this.effectiveType = connection.effectiveType || 'unknown';
            this.rtt = connection.rtt || 'unknown';
            this.downlink = connection.downlink + 'mb/s' || 'unknown';
        }
    },
}
</script>
<style lang='scss' scoped>
.screen-view {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;

    .info {
        margin: auto;
        width: 400px;
        height: 400px;
    }
}
</style>