websocket+sockjs+stompjs详解及实例

websocket+sockjs+stompjs详解及实例

https://segmentfault.com/a/1190000017204277

  1. /**
  2.  * 依赖文件sockjs.js、stomp.js
  3.  * */
  4. ;!(function (window) {
  5.     'use strict'
  6.     let WS = function () {
  7.         //保存所有的订阅事件 {Aevent:[pubfun(status,data),pubfun(status,data),...]}
  8.         this.subEvents = {};
  9.         this.isConnect = false;
  10.         this.stompClient = null;
  11.         this.selfClose = false;
  12.         this.ws = null;
  13.         this.url = null;
  14.     };
  16.     WS.prototype = {
  17.         constructor: WS
  18.         //设置连接状态
  19.         , setConnect(status) {
  20.             this.isConnect = status;
  21.         }
  22.         //建立连接
  23.         , connect(url) {
  24.             //若没有连接，才连接
  25.             this.isConnect = false;
  26.             this.url = url;
  27.             this.ws = new SockJS(url);
  28.             this.stompClient = Stomp.over(ws);
  29.             this.stompClient.connect({}, (data) => {
  30.                 this.setConnect(true);
  31.                 this.connectSuc.apply(this, [stompClient, data]);
  32.             }, (error) => {
  33.                 this.setConnect(false);
  34.                 this.connectErr.apply(this,[stompClient,error]);
  35.             });
  36.             this.ws.onclose =  (e) => {
  37.                 this.isConnect = false;
  38.                 if(!this.selfClose){
  39.                     this.reConnect();
  40.                 }
  41.             }
  42.             return stompClient;
  43.         }
  44.         //手动断开连接
  45.         , disconnect() {
  46.             if(this.stompClient != null && this.isConnect) {
  47.                 this.stompClient.disconnect();
  48.                 this.isConnect = false;
  49.                 this.selfClose = true;
  50.                 this.ws = null;
  51.                 this.stompClient = null;
  52.             }
  53.         }
  54.         //重连
  55.         , reConnect(){
  56.             if(this.isConnect){return;}
  57.             this.connect(this.url);
  58.         }
  59.         //连接成功后的回调
  60.         , connectSuc(stompClient, data) {
  61.             if(this.isConnect){
  62.                 //发布连接成功事件
  63.                 this.trigger.apply(this, ['connectSuc', stompClient.subscribe.bind(stompClient), data]);
  64.                 //发布发送消息到服务端事件
  65.                 this.trigger.apply(this, ['sendMessage', stompClient.send.bind(stompClient), data]);
  66.             }
  67.         }
  68.         //连接失败后的回调
  69.         , connectErr(stompClient, data){
  70.             //发布连接失败事件
  71.             this.trigger.apply(this, ['connectErr', stompClient, data]);
  72.         }
  73.         //发布函数
  74.         , trigger(eventType, ...data) {
  75.             eventType = this.subEvents[eventType];
  76.             for (var i = 0; i < eventType.length; i++) {
  77.                 eventType[i].apply(this, data);
  78.             }
  79.         }
  80.         //订阅方法 --->用于订阅指定事件
  81.         , on(eventType, handle) {
  82.             if (!(eventType in this.subEvents)) {
  83.                 this.subEvents[eventType] = [];
  84.             }
  85.             this.subEvents[eventType].push(handle);
  86.         }
  87.         //删除订阅
  88.         , off(eventType, handle) {
  89.             eventType = this.subEvents[eventType];
  90.             if (eventType) {
  91.                 let handleIndex = eventType.indexOf(handle);
  92.                 if (handleIndex >= 0) {
  93.                     eventType.splice(handleIndex, 1);
  94.                 }
  95.             }
  96.         }
  97.     };
  98.     window.WS = WS;
  99. })(window);
  102. /**
  103.  *
  104.  *  var ws = new WS();
  105.     ws.connect("/helloWebsocket");
  107.     ws.on('connectSuc',function (subscribe,data) {
  108.         subscribe('/topic/serverSend', function(response){
  109.             info.innerHTML += "<div>"+response+"</div>";
  110.         });
  111.         subscribe('/topic/serverResponse',function (response) {
  112.             info.innerHTML += "<div>"+response+"</div>";
  113.         });
  114.     });
  116.     ws.on('connectErr',function (stompClient,data) {
  118.     });
  120.     //客户端发送消息给服务端
  121.     ws.on('sendMessage',function (send,data) {
  122.         send("/client/clientSendMessage",{},"hello server !!");
  123.     });
  127.      //强制关闭窗口后,断开连接
  128.     window.onunload = function (ev) {
  129.         ws.disconnect();
  130.     }
  131.  *
  132.  * */