websocket

websocket

websocket依赖于http协议的第一次握手，然后多了个Upgrade: websocket进行协议升级，返回的也是websocket，
为什么要用websocket因为http必须要客户端请求才会发数据，轮询的方式又太浪费了。

一.事件

		open，loose，erro，message，回调onopen，onloose，onerro，onmessage，

二.js原生的

((doc)=>{
    const list = doc.querySelector('#list')
    const message = doc.querySelector('#message')
    const send = doc.querySelector('#send')
    const ws = new WebSocket('ws:/localhost:8000')  //创建一个websocket对象
    let username = ''
    const init=()=>{
        bindEvent()
    }
    function bindEvent(){
        send.addEventListener('click',handGo,false)
        ws.addEventListener('open',handOpne,false)    //添加4个事件
        ws.addEventListener('close',handClose,false)
        ws.addEventListener('message',handMessage,false)
        ws.addEventListener('erro',handErro,false)

    }
    function handGo(){
        console.log('发送信息');
        const msv = message.value
        ws.send(JSON.stringify(
            {
                username,
                data:new Date().getTime(),
                massage:msv
            }
        ))  //send发送给服务器
    }
    function handOpne(){
        console.log('open');
        username  = sessionStorage.getItem('username')
    }
    function handErro(){
        console.log('erro');
    }
    function handClose(){
        console.log('close');
    }
    function handMessage(e){
        console.log('message');
        const meg = JSON.parse(e.data) //message拿到服务器发回来的数据
    }
    init()
})(document)

三.VUE方法
1.首先init一个websocket,http用wshttps用wss

data(){
    websocketObj: null,
    wsHeartflag: false,
    reconnectTime: 0
},
created(){
    this.initWebsocket(); //创建组件的时候调用这个init
},
methods: {
    initWebsocket(){
        if (websocket in window) {
            this.webSocketObj = new WebSocket(
                "wss://"+newApi+"/websocket?sid="+userToken
            ); //创建一个websocket对象
            this.webSocketObj.onmessage = this.onMessage //保存他的4个方法
            this.webSocketObj.onopen = this.onOpen
            this.webSocketObj.onerror = this.onError
            this.webSocketObj.onclose = this.onClose
        }  
    }
}

2.写上对应websocket方法

onOpen() {
    if (this.webSocketObj.readyState === 1) {
        //- readyState 等于1 的时候建立链接成功
        this.wsHeartflag = true;
        this.webSocketObj.send("13123123");
        this.reconnectTime = 0;
    }
},
timingHeart() {
    // 心跳检测  每4.5分钟发送一次 
    if (this.wsHeartflag) {
        this.webSocketObj.send('123123123'); //send发送给服务器
    }
    this.wsHeart = setTimeout(() => {
        this.timingHeart();
    }, 100 * 1000); // 100s心跳
},
onMessage(evt) {
    var received_msg = evt && JSON.parse(evt.data);
    if (received_msg.code === '1') {
        // 支付成功
        // this.$toast('恭喜您，支付成功，已升级成VIP');
        this.onClose();
    } else {
        // 支付失败
        this.showSuccessPop = false;
    }
},
onError() {
    // 链接失败，进行重连
    clearTimeout(this.wsHeart);
    this.wsHeartflag = false;
    if (this.reconnectTime <= MAX_CONNECT) {
        setTimeout(() => {
            this.onOpen();
            this.reconnectTime+=1;
        }, 5000);
    } else {
        this.$toast('抱歉，暂时无法连接到聊天服务器，请稍后再试');
        this.onClose();
    }
},
onClose() {
    this.wsHeartflag = false;
    this.webSocketObj && this.webSocketObj.close && this.webSocketObj.close();
},