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

sockjs+stomp的websocket插件的更多相关文章

  1. STOMP Over WebSocket

    Show Table of Contents What is STOMP? STOMP is a simple text-orientated messaging protocol. It defin ...

  2. 文档 - STOMP Over WebSocket

    http://jmesnil.net/stomp-websocket/doc/ What is STOMP? STOMP is a simple text-orientated messaging p ...

  3. Jmeter websocket插件安装与使用

    Jmeter websocket插件安装与使用 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试 ...

  4. Springboot + Websocket + Sockjs + Stomp + Vue + Iview 实现java后端日志显示在前端web页面上

    话不多说,看代码. 一.pom.xml 引入spring boot websocket依赖 <dependency> <groupId>org.springframework. ...

  5. springboot实现服务器端消息推送(websocket + sockjs + stomp)

    服务器端推送技术在web开发中比较常用,可能早期很多人的解决方案是采用ajax向服务器轮询消息,这种方式的轮询频率不好控制,所以大大增加了服务器的压力,后来有了下面的方案:当客户端向服务器发送请求时, ...

  6. spring+rabbitmq+stomp搭建websocket消息推送(非spring boot方式)

    前言: 两年前做过spring+activemq+stomp的ws推送,那个做起来很简单,但现在公司用的mq中间件是rabbitmq,因此需要通过rabbitmq去做ws通信.仔细搜了搜百度/谷歌,网 ...

  7. Jmeter使用Websocket插件测试SingalR,外加还有阿里云PTS的Jmeter原生测试爬坑日志。

    题外话:距离我的上一篇博客已经过去7年多了,我实在是个不务正业的程序员,遇到测试方面的东西总想分享一下,因为可用的资料实在太少了(包括国外的资料). 本人不喜欢授人以鱼,所以不会直接给出问题和解决方案 ...

  8. WebSocket插件

    ;!(function(window){ "use strict"; let Event = { wsMesEvent:function(message){ console.log ...

  9. Jquery封装: WebSocket插件

    1 $(function() { var websocket = null; //浏览器是否支持websocket if ("WebSocket" in window) { try ...

随机推荐

  1. 一起学Android之Animation

    本文以一个简单的小例子,简述在Android开发中,动画的简单应用,仅供学习分享使用. 概述 android提供了各种强大的apis,用于将动画应用到ui元素中,来丰富应用程序的功能和应用. 动画分类 ...

  2. scrapy在pycharm配置启动(无需命令行启动)

    一.新建文件 run.py这个名字随意哈 方法一. from scrapy.cmdline import execute execute(['scrapy','crawl','爬虫程序名字','-a' ...

  3. Scrapy框架-中间件

    一.中间件中主要有3个函数方法 process_request:处理请求,默认返回值是None process_response:处理响应,默认返回值是response对象 process_exce ...

  4. CRM第一篇

    2.1搭建前提 我们在搭建CRM开发环境之前,需要明确2件事情: a.我们搭建环境采用基于注解的配置. b.搭建环境需要测试,我们以客户的保存和列表查询作为测试功能. 2.2搭建步骤 2.2.1导入S ...

  5. 【转载】Android App应用启动分析与优化

    前言: 昨晚新版本终于发布了,但是还是记得有测试反馈app启动好长时间也没进入app主页,所以今天准备加个班总结一下App启动那些事! app的启动方式: 1.)冷启动  当启动应用时,后台没有该应用 ...

  6. Android 中的style和Theme的使用

    说明 style和theme的定义是为了改变原有系统设定的默认窗体.字体.背景色.格式等风格而使用.其本质就是系统属性的集合.本篇主要介绍android中的style和theme的具体用法. styl ...

  7. liunx用户环境初始化脚本

          liunx用户环境初始化脚本 编写生成脚本基本格式,包括作者,联系方式,版本,时间,描述等 [root@magedu ~]# vim .vimrc set ignorecase set c ...

  8. vs code 运行 Django 怎么修改端口

    1.具体操作步骤如下 默认情况下,通过 python manage.py runserver 命令行模式默认打开是 8000 端口,如下图所示: 在浏览器预览效果如下: 为了防止端口冲突,我们一般会修 ...

  9. eNSP仿真软件之VLAN基础配置及Access接口

    ★Access接口是交换机上用来连接用户主机的接口. 实验内容: 实验步骤: (1)      打开仿真软件eNSP,新建拓扑.根据实验内容建立如下实验拓扑图. (2)      按照如下的编址表对每 ...

  10. 【tf.keras】tf.keras使用tensorflow中定义的optimizer

    Update:2019/09/21 使用 tf.keras 时,请使用 tf.keras.optimizers 里面的优化器,不要使用 tf.train 里面的优化器,不然学习率衰减会出现问题. 使用 ...