udiwms-vue/src/socket.js

// 在Vue中使用，不需要可以去除以下引用
import Vue, {ComponentOptions as h} from 'vue'
import axios from "axios";
// import storage from 'store'
import storage from "./store/index";
import "./element";
// 导出socket对象

export {
    socket
}

// socket主要对象
var socket = {
    websock: null,
    // 固定的WebSocket地址：此处是从env文件中读取socket地址，可以自行从其他config文件中读取或直接写死
    // 如需使用动态WebSocket地址，请自行作ajax通讯后扩展
    // ws_url: "ws://127.0.0.1:9991/api/websocket/100",
    // 开启标识
    socket_open: false,
    // 心跳timer
    hearbeat_timer: null,
    // 心跳发送频率
    hearbeat_interval: 5000,
    ws_url:null,
    // 是否自动重连
    is_reonnect: true,
    // 重连次数
    reconnect_count: 3,
    // 已发起重连次数
    reconnect_current: 1,
    // 重连timer
    reconnect_timer: null,
    // 重连频率
    reconnect_interval: 3000,
     myVue:{},

    /**
     * 初始化连接
     */
    init: (data) => {
        axios.get("./config.json").then(res => {
            // 基础地址
            socket.ws_url = res.data.WEBSOCKET_URL;
            console.log(res.data.BASE_URL + "\n" + res.data.WEBSOCKET_URL);
            socket.initData(data);
        });
    },

    initData: (data) => {

        console.log(data);
        socket.myVue = data;
        if (!("WebSocket" in window)) {
            console.log('浏览器不支持WebSocket')
            return null
        }

        // 已经创建过连接不再重复创建
        if (socket.websock) {
            return socket.websock
        }

        socket.websock = new WebSocket(socket.ws_url+"/100")
        socket.websock.onmessage = function (e) {
            socket.receive(e)
        }

        // 关闭连接
        socket.websock.onclose = function (e) {
            console.log('连接已断开')
            console.log('connection closed (' + e.code + ')')
            clearInterval(socket.hearbeat_interval)
            socket.socket_open = false

            // 需要重新连接
            if (socket.is_reonnect) {
                socket.reconnect_timer = setTimeout(() => {
                    // 超过重连次数
                    if (socket.reconnect_current > socket.reconnect_count) {
                        clearTimeout(socket.reconnect_timer)
                        return
                    }

                    // 记录重连次数
                    socket.reconnect_current++
                    socket.reconnect()
                }, socket.reconnect_interval)
            }
        }

        // 连接成功
        socket.websock.onopen = function () {
            console.log('连接成功')
            socket.socket_open = true
            socket.is_reonnect = true
            // 开启心跳
            socket.heartbeat()
        }

        // 连接发生错误
        socket.websock.onerror = function () {
            console.log('WebSocket连接发生错误')
        }
    },

    /**
     * 发送消息
     * @param {*} data 发送数据
     * @param {*} callback 发送后的自定义回调函数
     */
    send: (data, callback = null) => {
        // 开启状态直接发送
        if (socket.websock.readyState === socket.websock.OPEN) {
            socket.websock.send(JSON.stringify(data))

            if (callback) {
                callback()
            }

            // 正在开启状态，则等待1s后重新调用
        } else if (socket.websock.readyState === socket.websock.CONNECTING) {
            setTimeout(function () {
                socket.send(data, callback)
            }, 1000)

            // 未开启，则等待1s后重新调用
        } else {
            socket.init()
            setTimeout(function () {
                socket.send(data, callback)
            }, 1000)
        }
    },

    /**
     * 接收消息
     * @param {*} message 接收到的消息
     */
    receive: (message) => {
        var params = JSON.parse(message.data)

        if (params.type != 0) {
            console.log('收到服务器内容：', message.data)
        }

        if (params == undefined) {
            console.log("收到服务器空内容")
            return false
        }

        // 以下是接收消息后的业务处理，仅供参考

        // 被服务器强制断开
        if (params.type != undefined && params.type == 110) {
            socket.socket_open = false
            socket.is_reonnect = true

            // 被服务器踢掉
        } else if (params.type == 99) {
            socket.socket_open = true
            socket.is_reonnect = false
            console.log("被挤下线 不做处理")
            return false
        } else if (params.type == 'sid') {
            socket.myVue.$notify.success({
                title: '提示',
                message: params.data
            });
        }else if(params.type == 'err'){
            socket.myVue.$notify.error({
                title: '提示',
                message: params.data
            });
        }

        // 自行扩展其他业务处理...
    },

    /**
     * 心跳
     */
    heartbeat: () => {
        console.log('socket', 'ping')
        if (socket.hearbeat_timer) {
            clearInterval(socket.hearbeat_timer)
        }

        socket.hearbeat_timer = setInterval(() => {
            const token = storage.get('Access-Token')
            var data = {
                type: 0, //请求类型 type 0 心跳包
                shop_id: Vue.prototype.$shop_id(false), //如果是商家 传当前店铺ID 否则可不传
                'API-Token': token, //用户的token
                'API-Source': 'MERCHANT', // MERCHANT  商家  CUSTOMER  顾客
            }
            socket.send(data)
        }, socket.hearbeat_interval)
    },

    /**
     * 主动关闭连接
     */
    close: () => {
        console.log('主动断开连接')
        clearInterval(socket.hearbeat_interval)
        socket.is_reonnect = false
        socket.websock.close()
    },

    /**
     * 重新连接
     */
    reconnect: () => {
        console.log('发起重新连接', socket.reconnect_current)

        if (socket.websock && socket.socket_open) {
            socket.websock.close()
        }

        socket.init()
    },
}