欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

sockjs+stomp的websocket插件

程序员文章站 2022-03-20 15:48:44
/** * 依赖文件sockjs.js、stomp.js * */ ;!(function (window) { let WS = function () { this.isConnect = false; //保存所有的订阅事件 {Aevent:[pubfun(status,data),pubfu ......
/**
 * 依赖文件sockjs.js、stomp.js
 * */
;!(function (window) {
    let ws = function () {
        this.isconnect = false;
        //保存所有的订阅事件 {aevent:[pubfun(status,data),pubfun(status,data),...]}
        this.subevents = {};
        this.stompclient = null;
    };

    ws.prototype = {
        constructor: ws
        //设置连接状态
        , setconnect(status) {
            this.isconnect = status;
        }
        //建立连接
        , connect(url) {
            let ws = new sockjs(url)
                , stompclient = stomp.over(ws);
            stompclient.connect({}, (data) => {
                this.setconnect(true);
                this.connectsuc.apply(this, [stompclient, data]);
            }, (error) => {
                this.setconnect(false);
                this.connecterr.apply(this,[stompclient,error]);
            });
            this.stompclient = stompclient;
            return stompclient;
        }
        //断开连接
        , disconnect: function () {
            if(this.stompclient != null && this.isconnect) {
                this.isconnect = false;
                this.stompclient.disconnect();
            }
        }
        //连接成功后的回调
        , connectsuc(stompclient, data) {
            if(this.isconnect){
                //发布连接成功事件
                this.trigger.apply(this, ['connectsuc', stompclient, data]);
                //发布发送消息到服务端事件
                this.trigger.apply(this, ['sendmessage', stompclient, data]);
            }
        }
        //连接失败后的回调
        , connecterr(stompclient, data){
            //发布连接失败事件
            this.trigger.apply(this, ['connecterr', stompclient, data]);
        }
        //发布函数
        , trigger(eventtype, ...data) {
            eventtype = this.subevents[eventtype];
            for (var i = 0; i < eventtype.length; i++) {
                eventtype[i].apply(this, data);
            }
        }
        //订阅方法 --->用于订阅指定事件
        , on(eventtype, handle) {
            if (!(eventtype in this.subevents)) {
                this.subevents[eventtype] = [];
            }
            this.subevents[eventtype].push(handle);
        }
        //删除订阅
        , off(eventtype, handle) {
            eventtype = this.subevents[eventtype];
            if (eventtype) {
                let handleindex = eventtype.indexof(handle);
                if (handleindex >= 0) {
                    eventtype.splice(handleindex, 1);
                }
            }
        }
    };

    window.ws = ws;
})(window);


/**
 *
 *  var ws = new ws();
 *  ws.connect("/hellowebsocket");
    ws.on('connectsuc',function (stompclient,data) {
        stompclient.subscribe('/topic/serversend',function (response) {
            info.innerhtml += "<div>"+response+"</div>";
        });
    });

   ws.on('connecterr',function (stompclient,data) {
        stompclient.subscribe('/topic/serversend',function (response) {
            info.innerhtml += "<div>"+response+"</div>";
        });
    });

    ws.on('sendmessage',function (stompclient,data) {
        stompclient.send("/client/clientsendmessage",{},"hello server !!");
    });

    //强制关闭窗口后,断开连接
    window.onunload = function (ev) {
       ws.disconnect();
    }
 *
 * */