sockjs+stomp的websocket插件

来源:https://www.cnblogs.com/littleboyck/archive/2019/11/25/11927810.html
-Advertisement-
Play Games

/** * 依賴文件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();
    }
 *
 * */

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.導出ipa進行解壓後,定位到執行程式archero,ida載入後,發現很多都是sub_xxx開頭的。 2.搜索資料後,原來Unity編寫的程式,可以使用Il2CppDumper進行符號表還原。 下載Il2CppDumper對Payload\archero.app\Data\Managed\Met ...
  • vue項目的開發 我們已經通過命令行創建了一個vue項目,並且打開了這個項目。下麵是這個文件的src文件夾,這個文件夾放了整個項目的核心代碼。 一、vue文件的用處簡介。 1.assets文件夾,用來存放圖片,文件等資源。直接這樣就可以訪問到 src="./assets/logo.png",最好的訪 ...
  • 冒泡排序: 把所有的數據按照一定的順序進行排列(從小到大,從大到小) 1. 畫圖幫助理解如下: 2. 從小到大排序: var arr = [10, 0, 100, 20, 60, 30]; //迴圈1:控制比較的輪數 for (var i = 0; i < arr.length - 1; i++) ...
  • flex佈局開發 1. 佈局原理 flex時flexible Box的縮寫,意為“彈性佈局”,用來為盒子模型提供最大的靈活性,任何一個容器都可以定位flex佈局 【註意】 當我們為父盒子設為flex佈局以後,子元素的float、clear和vertical align屬性將失效 伸縮佈局=彈性佈局= ...
  • Html css position屬性 position屬性把元素放置在一個靜態的,相對的,絕對的,或則固定的位置中. 1,第一個屬性absolute,絕對定位 生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" ...
  • jqgrid後臺處理搜索, 如果點擊jqgrid自帶的搜索,則向後臺傳遞“_search”參數,和searchField、searchOper、searchString三個值。如下所示: ...
  • 背景 一開始買完伺服器裝的是用apache搭的後臺, 現在想使用nginx, 希望對你有參考作用 查看系統版本信息 我的版本信息是 首先關閉apache tomcat服務 最穩妥的關閉方法,找到你的安裝路徑,執行bin下的shutdown腳本 要開啟執行startup腳本 安裝nginx yum i ...
  • //console.log('每隔*秒鐘刷新一次'); var timer = window.setInterval(function() { $("#table_list_1").trigger("reloadGrid"); },10 * 1000); ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...