/** * 依賴文件sockjs.js、stomp.js * */ ;!(function (window) { 'use strict' let WS = function () { //保存所有的訂閱事件 {Aevent:[pubfun(status,data),pubfun(status,da ...
/** * 依賴文件sockjs.js、stomp.js * */ ;!(function (window) { 'use strict' let WS = function () { //保存所有的訂閱事件 {Aevent:[pubfun(status,data),pubfun(status,data),...]} this.subEvents = {}; this.isConnect = false; this.stompClient = null; this.selfClose = false; this.ws = null; this.url = null; }; WS.prototype = { constructor: WS //設置連接狀態 , setConnect(status) { this.isConnect = status; } //建立連接 , connect(url) { //若沒有連接,才連接 this.isConnect = false; this.url = url; this.ws = new SockJS(url); this.stompClient = Stomp.over(ws); this.stompClient.connect({}, (data) => { this.setConnect(true); this.connectSuc.apply(this, [stompClient, data]); }, (error) => { this.setConnect(false); this.connectErr.apply(this,[stompClient,error]); }); this.ws.onclose = (e) => { this.isConnect = false; if(!this.selfClose){ this.reConnect(); } } return stompClient; } //手動斷開連接 , disconnect() { if(this.stompClient != null && this.isConnect) { this.stompClient.disconnect(); this.isConnect = false; this.selfClose = true; this.ws = null; this.stompClient = null; } } //重連 , reConnect(){ if(this.isConnect){return;} this.connect(this.url); } //連接成功後的回調 , connectSuc(stompClient, data) { if(this.isConnect){ //發佈連接成功事件 this.trigger.apply(this, ['connectSuc', stompClient.subscribe.bind(stompClient), data]); //發佈發送消息到服務端事件 this.trigger.apply(this, ['sendMessage', stompClient.send.bind(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 (subscribe,data) { subscribe('/topic/serverSend', function(response){ info.innerHTML += "<div>"+response+"</div>"; }); subscribe('/topic/serverResponse',function (response) { info.innerHTML += "<div>"+response+"</div>"; }); }); ws.on('connectErr',function (stompClient,data) { }); //客戶端發送消息給服務端 ws.on('sendMessage',function (send,data) { send("/client/clientSendMessage",{},"hello server !!"); }); //強制關閉視窗後,斷開連接 window.onunload = function (ev) { ws.disconnect(); } * * */