Stompjs websocket vue
公司项目要求要有消息提醒机制 , 多方面考虑用了ActiveMQ ,基本上现在主流的后台语言都没啥问题 , php phthon java nodejs , 等等都没问题 , 各位道友可以去查阅相关资料 , 我这里只粘贴出前端的代码
<template>
<div></div>
</template>
<script>
import Stomp from "stompjs";
function uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = ; i < ; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), );
}
s[] = ""; // bits 12-15 of the time_hi_and_version field to 0010
s[] = hexDigits.substr((s[] & 0x3) | 0x8, ); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[] = s[] = s[] = s[] = "-";
var uuid = s.join("");
return uuid;
}
export default {
data() {
return {
// client: Stomp.client("ws://192.168.1.103:61614/stomp")
client: null
};
},
methods: {
onConnected(frame) {
console.log("Connected: " + frame);
var topic = "/topic/charger.messageTopic";
this.client.subscribe(topic, this.responseCallback, this.onFailed);
},
onFailed(frame) {
console.log("Failed: " + frame);
},
responseCallback(frame) {
console.log("得到的消息 msg=>" + frame.body);
console.log(frame)
},
connect() {
this.client= Stomp.client("ws://192.168.1.103:61614/stomp")
var clientid = uuid();
var headers = {
"login": "admin",
"passcode": "admin",
"client-id": clientid,
// additional header
};
this.client.connect(headers, this.onConnected, this.onFailed);
}
},
mounted() {
this.connect()
}
};
</script>
请广大道友注意如果直接install stompjs (中间没点 , 别整错了)那么在vue里面会报错 , 因为还需要install 一下 net
var Stomp = require('./lib/stomp.js');
var StompNode = require('./lib/stomp-node.js');
module.exports = Stomp.Stomp;
module.exports.overTCP = StompNode.overTCP;
module.exports.overWS = StompNode.overWS;
index.js 里面引用到了这个stomp-node.js然儿这个node.js
Stomp = require('./stomp');
net = require('net');
Stomp.Stomp.setInterval = function(interval, f) {
return setInterval(f, interval);
};
用到了net ,
请注意箭头函数的使用 , if你直接使用function的话会有this的指向性问题 , client里面封装了很多原型函数 , 如果this指向调用错误的话这些函数都会找不到
Stompjs websocket vue的更多相关文章
- 基于websocket vue 聊天demo 解决方案
基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...
- websocket vue
/* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...
- stompjs, websocket和nginx的配置
server { listen 8080; location /socket/ { proxy_pass http://socket_server/; proxy_s ...
- d面试题汇总
HTML Doctype作用,HTML5 为什么只需要写<!DOCTYPE HTML>? html5有哪些新特性?移除了哪些元素? 简述一下你对HTML语义化的理解? 行内元素有哪些,块级 ...
- Springboot + Websocket + Sockjs + Stomp + Vue + Iview 实现java后端日志显示在前端web页面上
话不多说,看代码. 一.pom.xml 引入spring boot websocket依赖 <dependency> <groupId>org.springframework. ...
- vue使用SockJS实现webSocket通信
以前使用websocket都是使用 window.webSocket = new WebSocket('ws://' + config.webSocketUrl + '/webData/websock ...
- SpringBoot+vue整合websocket
0.引言 这里我先说下,网上对于websocket的解释有一堆不懂自己查,我这就不做原理解释,只上代码. 1.SpringBoot引入websocket maven 依赖 <dependency ...
- vue发送websocket请求和http post请求
直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; impor ...
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
随机推荐
- struts2_7_Action类中方法的动态调用
(一)直接调用方法(不推荐使用) 1)Action类: private String savePath; public String getSavePath() { return savePath; ...
- VIM使用说明
[vim 命令-移动光标]:h 的鍵位于左邊,每次按下就會向左移動.l 的鍵位于右邊,每次按下就會向右移動.j 鍵看起來很象一支尖端方向朝下的箭頭.k朝上移动. [vim 命令-启动和退出]:1. 請 ...
- Android 系统状态栏一体化实现
自上周更新了QQ手机client.对于新版本号的QQ,系统状态栏也有蓝色色调,看起来有种清爽感觉.于是想自已也实现这样的效果,随查阅资料,自已调试实现这样的效果.Android 系统4.4以上都能够具 ...
- js课程 3-9 js内置对象定时器和超时器怎么使用
js课程 3-9 js内置对象定时器和超时器怎么使用 一.总结 一句话总结:定时器: 1.定义 sobj=setInterval(func,1000); 2.清除 cl ...
- u-boot-2011.06在基于s3c2440开发板的移植之引导内核与加载根文件系统
http://www.linuxidc.com/Linux/2012-09/70510.htm 来源:Linux社区 作者:赵春江 uboot最主要的功能就是能够引导内核启动.本文就介绍如何实现该 ...
- 26、从零写UVC驱动之分析描述符
指令:lsusb 可以查看usb设备的描述符信息,当然lsusb指令要带一些参数 一个usb设备有多个config配置+设备描述符,一个config有多个接口和association.config描述 ...
- 【p092】分数线划定
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 世博会志愿者的选拔工作正在A市如火如荼地进行.为了选拔最合适的人才,A市对所有报名的选手进行了笔试,笔 ...
- 如何调试Javascript代码
转自原文如何调试Javascript代码 目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法 ...
- css3-11 如何设置文字的阴影
css3-11 如何设置文字的阴影 一.总结 一句话总结:text-shadow属性.text-shadow:3px 3px 3px #f0f; 1.text-shadow属性的参数依次是什么意思? ...
- angular的学习参考材料
原文地址:https://www.jianshu.com/p/b9db7bb3d4ec 目的 其实写这篇文章的主要目的是为了提供给那些刚刚入门angular或者有意学习angular的读者准备的. 我 ...