vue socket.js 及使用

创建socket.js

import Vue from 'vue';
const vm = new Vue;
let scoketUrl = process.env.VUE_APP_SOCKET  //接口地址
class wsSocket {
    constructor(opt) {
        this.ws = null;
        this.opt = opt || {};
        this.init(opt.key);
    }

    onOpen() {
        this.opt.open && this.opt.open();
        let that = this;
        that.ping();
        this.socketStatus = true;
    }

    init() {
        let wsUrl = scoketUrl
        if (wsUrl) {
            this.ws = new WebSocket(wsUrl);
            this.ws.onopen = this.onOpen.bind(this);
            this.ws.onerror = this.onError.bind(this);
            this.ws.onmessage = this.onMessage.bind(this);
            this.ws.onclose = this.onClose.bind(this);
        }

    }

    ping() {
        var that = this;
        this.timer = setInterval(function () {
            that.send({ type: 'ping' });
        }, 10000);
    }

    send(data) {
        return new Promise((resolve, reject) => {
            try {
                this.ws.send(JSON.stringify(data));
                resolve({ status: true });
            } catch (e) {
                reject({ status: false })
            }
        });
    }

    onMessage(res) {
        this.opt.message && this.opt.message(res);
    }

    onClose() {
        this.timer && clearInterval(this.timer);
        this.opt.close && this.opt.close();
    }

    onError(e) {
        this.opt.error && this.opt.error(e);
    }

    $on(...args) {
        vm.$on(...args);
    }
}


function createSocket(key) {
    return new Promise((resolve, reject) => {
        const ws = new wsSocket({
            key,
            open() {
                resolve(ws);
            },
            error(e) {
                reject(e)
            },
            message(res) {
                if (res.data) {
                    const { type, data = {} } = JSON.parse(res.data);
                    vm.$emit(type, data);
                }
              
            },
            close(e) {
                vm.$emit('close', e);
            }
        })
    });
}


export const scoket = createSocket()

使用

import { scoket } from "@/utils/socket";
export default {
	 mounted() {
        scoket.then((ws) => {
            ws.$on('typeName', (data) => {  //typeName 为socket的type类型
            	//传过来的数据
            })
}