VUE 整合websocket 全局調用，局部監聽，事件響應，自定義協議

廢話不多說直接貼代碼

 

1，新建一個websocketStore.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        websock: null,
        eventlist:[]
    },
    getters: {
        onEvent(state) {
            return function (method) {
                let index = state.eventlist.map((eb) => {return eb.method}).indexOf(method);
                if (state.eventlist.length > 0 && index >= 0) {
                    let result = Object.assign({}, state.eventlist[index]);
                    state.eventlist.splice(index, 1);
                    return result.data;
                }
                return null;
            }
        }
    },
    mutations: {
        WEBSOCKET_INIT(state,url) {
            state.websock = new WebSocket(url);
            state.websock.onopen = function () {
                console.log("連接成功！");
            }
            state.websock.onmessage = function (callBack) {
                console.log("ws接收！");
                console.log(callBack.data);

                var receive = [];
                var type = 0;
                var length = 0;
                receive = receive.concat(Array.from(new Uint8Array(callBack.data)));
                if (receive.length < 6) {
                    console.log("包頭大小錯誤：" + receive.length)
                    return;
                }


                var index = 0;
                type = new DataView(new Uint8Array(receive).buffer).getUint16(index)
                index += 2;

                length = new DataView(new Uint8Array(receive).buffer).getUint32(index);
                index += 4;
                if (receive.length < length + 6) {
                    console.log("包體大小錯誤：" + receive.length)
                    return;
                }

                if (type==5){
                    console.log("收到服務器心跳包！")
                    return;
                }


                var bytes = receive.slice(index, length + 6);
                //doSomething(bytes);
                console.log("包體數據大小：" + bytes.length)

                var typeS = new DataView(new Uint8Array(receive).buffer).getUint16(index)
                index += 2;

                var methodLenth = new DataView(new Uint8Array(receive).buffer).getUint16(index)
                index += 2;

                var methodByte = receive.slice(index, index + methodLenth);
                index += methodLenth;
                var methodStr = byteToString(methodByte);


                var dataByte = receive.slice(index, length + 6);
                var dataStr = byteToString(dataByte);

                console.log("methodStr:" + methodStr + " dataStr:" + dataStr)
                state.eventlist.push({
                    method:methodStr,
                    data:JSON.parse(dataStr)
                })
            }
            state.websock.οnerrοr=function(e) { //錯誤
                console.log("ws錯誤!");
                console.log(e);
            }
            state.websock.onclose=function(e) { //關閉
                console.log("ws關閉！");
                console.log(e);
            }
            state.websock.binaryType = "arraybuffer";
            //發送心跳包
            setInterval(function() {
                console.log("ws發送心跳！");
                var heart={
                    type:5,
                    method: "",
                    jsonData:{}
                };
                state.websock.send(makeByte(heart));
            }, 30000)
        },
        WEBSOCKET_SEND(state, p) {
            console.log("ws發送！");
            state.websock.send(makeByte(p));
        }
    },
    actions: {
        WEBSOCKET_INIT({commit},url) {
            commit('WEBSOCKET_INIT',url)
        },
        WEBSOCKET_SEND({commit}, p) {
            p.type=3;
            commit('WEBSOCKET_SEND', p)
        }
    }
})

function makeByte(p){
    var bytesMethod = stringToByte(p.method);

    var bytes = stringToByte(JSON.stringify(p.jsonData));

    var headLenth = 6;
    var bodyLenth = bytes.length + bytesMethod.length + 2 + 2;
    var buffer = new ArrayBuffer(headLenth + bodyLenth);
    var view = new DataView(buffer);

    var count = 0;
    //包頭
    view.setInt16(count, p.type);//消息類型2
    count += 2;
    view.setUint32(count, bodyLenth);//包體大小4
    count += 4;
    //包體

    view.setInt16(count, 1);//序列化類型2
    count += 2;
    view.setInt16(count, bytesMethod.length);//方法字符大小2
    count += 2;
    for (var i = 0; i < bytesMethod.length; i++) {
        view.setUint8(count, bytesMethod[i]);
        count++;
    }
    for (var i = 0; i < bytes.length; i++) {
        view.setUint8(count, bytes[i]);
        count++;
    }
    return view;
}


function stringToByte(str) {
    var bytes = new Array();
    var len, c;
    len = str.length;
    for (var i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if (c >= 0x010000 && c <= 0x10FFFF) {
            bytes.push(((c >> 18) & 0x07) | 0xF0);
            bytes.push(((c >> 12) & 0x3F) | 0x80);
            bytes.push(((c >> 6) & 0x3F) | 0x80);
            bytes.push((c & 0x3F) | 0x80);
        } else if (c >= 0x000800 && c <= 0x00FFFF) {
            bytes.push(((c >> 12) & 0x0F) | 0xE0);
            bytes.push(((c >> 6) & 0x3F) | 0x80);
            bytes.push((c & 0x3F) | 0x80);
        } else if (c >= 0x000080 && c <= 0x0007FF) {
            bytes.push(((c >> 6) & 0x1F) | 0xC0);
            bytes.push((c & 0x3F) | 0x80);
        } else {
            bytes.push(c & 0xFF);
        }
    }
    return bytes;


}


function byteToString(arr) {
    if (typeof arr === 'string') {
        return arr;
    }
    var str = '',
        _arr = arr;
    for (var i = 0; i < _arr.length; i++) {
        var one = _arr[i].toString(2),
            v = one.match(/^1+?(?=0)/);
        if (v && one.length == 8) {
            var bytesLength = v[0].length;
            var store = _arr[i].toString(2).slice(7 - bytesLength);
            for (var st = 1; st < bytesLength; st++) {
                store += _arr[st + i].toString(2).slice(2);
            }
            str += String.fromCharCode(parseInt(store, 2));
            i += bytesLength - 1;
        } else {
            str += String.fromCharCode(_arr[i]);
        }
    }
    return str;
}

2，main.js裏添加引用

。。。。
import websocket from './store/websocketStore'
。。。。

Vue.prototype.$websocket = websocket;

3，初始化鏈接

this.$websocket.dispatch('WEBSOCKET_INIT',"ws://192.168.0.89:10101/ws")

4，發送消息

var jsonData = {
                    data2:12312312,
                    data: {
                        msg: "helloWorld"
                    }
                };
                var method="proxy.ConnectByJson";
                this.$websocket.dispatch("WEBSOCKET_SEND",{
                    method:method,
                    jsonData:jsonData,
                });

5，監聽回調

        computed:{
            alertCont() {
                return this.$websocket.getters.onEvent('ConnectByJson.C');
            }
        },
        watch: {
            alertCont: function (a, b) {
                if (a !== b && a) {
                    console.log("觸發事件：");
                    console.log("a:"+JSON.stringify(a));
                    console.log("b:"+JSON.stringify(b));
                }
            }
        },