【学习随记】ws test

<template>
    <div class="ws">
        <div>
            <p>{{msg}}</p>
            <textarea class="sendBox" v-model="sendTxt" @click="wsSend(sendTxt)"></textarea>

            <div class="btnBox">
                <input type="button" value="发送">
            </div>
        </div>
    </div>
</template>

<script>
// import { formatTime } from '../assets/js/public.js';

export default {
    data(){
        return {
            msg: "hello",
            sendTxt: '',

            lockReconnect: false,   // 避免ws重复连接
            ws: null,   // 判断当前浏览器是否支持WebSocket
            wsUrl: '',  // 请求ws地址

            heartCheck: {
                timeout: 2000,  //540000,     // 发一次心跳 时间
                timeoutObj: null,
                serverTimeoutObj: null,
                reset: function(){
                    clearTimeout(this.timeoutObj);
                    clearTimeout(this.serverTimeoutObj);
                    return this;
                },
                start: function(enWs){
                    let that = this;
                    this.timeoutObj = setTimeout(function(){
                        // console.log('enWs--->', enWs)
                        //这里发送一个心跳，后端收到后，返回一个心跳消息，
                        // onmessage 拿到返回的心跳就说明连接正常
                        enWs.send("ping");
                        // console.log("ping!")
                        that.serverTimeoutObj = setTimeout(function(){  //如果超过一定时间还没重置，说明后端主动断开了
                            enWs.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                        }, that.timeout)
                    }, this.timeout)
                }
            }

        }
    },
    methods: {

        // 格式化时间 返回: "2019/01/01 01:02:03" 时间格式
        // 传入时间戳：格式化 / 不传参：返回当前时间
        formatTime(timestamp) {
            let nowDate;
            timestamp ? nowDate = new Date(timestamp) : nowDate = new Date()
            let Y = nowDate.getFullYear() + '/';
            let M = (nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1) + '/';
            let D = nowDate.getDate() + ' ';
            let h = nowDate.getHours() + ':';
            let m = nowDate.getMinutes() + ':';
            let s = nowDate.getSeconds();
            return Y + M + D + h + m + s;
        },

        
        // ws 初始化
        initWs(url) {
            try {
                if ('WebSocket' in window) { // 浏览器支持情况
                    console.log("您的浏览器支持websocket协议");
                    this.ws = new WebSocket(url); // 创建 WebSocket 对象
                    this.wsHandle();
                } else {
                    console.log("您的浏览器--不--支持websocket协议");
                }
            } catch (e){
                this.reconnect(url);
                console.log(e);
            }     
        },

        // ws 实例的方法
        wsHandle() {
            let that = this;

            // 要保持连接，在onclose/onerror绑定重连方法
            that.ws.onclose = function (e) {
                // that.reconnect(that.wsUrl);
                console.log("ws--连接关闭! --> ", that.formatTime());
                console.log(e);
            };
            that.ws.onerror = function (e) {
                that.reconnect(that.wsUrl);
                console.log("ws--连接错误! --> ", that.formatTime());
                console.log(e);
            };
            that.ws.onopen = function (e) {
                // that.heartCheck.reset().start(that.ws); //心跳检测重置
                console.log("ws--连接成功! --> ", that.formatTime());
                console.log(e);
            };
            that.ws.onmessage = function (res) { //如果获取到消息，心跳检测重置
                // that.heartCheck.reset().start(that.ws); //拿到任何消息都说明当前连接是正常的
                
                // console.log("ws--收到消息啦:\n", res);
                // console.log("ws--收到消息如下:\n", res.data);
                that.msgHandle(res); // 处理返回数据

                // if(res.data!='pong'){
                //     var obj=eval("("+res.data+")");
                //     layui.use(['layim'], function(layim){
                //         if(obj.type=="onlineStatus"){
                //             layim.setFriendStatus(obj.id, obj.content);
                //         }else if(obj.type=="friend" || obj.type=="group"){
                //             layim.getMessage(obj);  
                //         }
                //     })
                // }

            }
        },

        // ws重连
        reconnect(url) {
            console.log("进入ws重连---url-->", url);
            let that = this;
            if(that.lockReconnect) return;
            that.lockReconnect = true;
            setTimeout(function () {    //没连接上会一直重连，设置延迟避免请求过多
                that.initWs(url);
                that.lockReconnect = false;
            }, 2000);
        },

        // 数据接收成功 要执行的操作
        msgHandle(res){
            console.log("ws--数据接收成功! --> " + this.formatTime() + " --> 收到消息如下:");
            // console.log("ws--e >>> ", res);
            console.log(res.data);
            
            // global_callback(JSON.parse(e.data));
        },

        // 数据发送
        wsSend(sendData){
            let that = this;
            console.log("原始发送数据", sendData)
            let sendMsg = JSON.stringify(sendData)
            console.log("stringify后发送数据", sendData)
            that.ws.send(sendMsg);


            // if (that.ws.readyState === that.ws.OPEN) {
            //     // 若是ws开启状态
            //     console.log("ws 链接正常");
            //     that.wsSend(sendData)
            // } else if (that.ws.readyState === that.ws.CONNECTING) {
            //     // 若是 正在开启状态，则等待1s后重新调用
            //     console.log("ws 正在链接……");
            //     setTimeout(()=>{
            //         that.wsSend(sendData);
            //     }, 1000);
            // } else {
            //     // 若未开启 ，则等待1s后重新调用
            //     // 未连接 应该要重连吧
            //     console.log("ws 链接未开");
            //     // setTimeout(()=>{
            //     //     sendSock(sendData, callback);
            //     // }, 1000);
            // }
            
        }



    },
    mounted(){
        console.log('entry---ws');

        this.wsUrl = 'ws://121.40.165.18:8800';
        this.initWs(this.wsUrl);

    },
    beforeDestroy() {
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        this.ws.close();
    },
}
</script>

<style scoped>

.sendBox{
    display: block;
    box-sizing: border-box;
    width: 80%;
    min-height: 2.5rem;
    margin: .5rem auto .2rem;
    padding: .15rem;
    border: .01rem solid #ccc;
}
.btnBox {
    width: 80%;
    margin: 0 auto;
}
.btnBox input{
    border: none;
    background: none;
    min-width: 1.5rem;
    line-height: .8rem;
    font-size: .3rem;
    color: blue;
    background: lightgreen;
}


</style>