公司项目要求要有消息提醒机制 , 多方面考虑用了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的更多相关文章

  1. 基于websocket vue 聊天demo 解决方案

    基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...

  2. websocket vue

    /* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...

  3. stompjs, websocket和nginx的配置

    server {    listen 8080; location /socket/ {        proxy_pass http://socket_server/;        proxy_s ...

  4. d面试题汇总

    HTML Doctype作用,HTML5 为什么只需要写<!DOCTYPE HTML>? html5有哪些新特性?移除了哪些元素? 简述一下你对HTML语义化的理解? 行内元素有哪些,块级 ...

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

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

  6. vue使用SockJS实现webSocket通信

    以前使用websocket都是使用 window.webSocket = new WebSocket('ws://' + config.webSocketUrl + '/webData/websock ...

  7. SpringBoot+vue整合websocket

    0.引言 这里我先说下,网上对于websocket的解释有一堆不懂自己查,我这就不做原理解释,只上代码. 1.SpringBoot引入websocket maven 依赖 <dependency ...

  8. vue发送websocket请求和http post请求

    直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; impor ...

  9. vue+websocket+express+mongodb实战项目(实时聊天)

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

随机推荐

  1. BigBoss按键映射

    // BigBoss: SBSettings Toggle Spec 按键映射 http://thebigboss.org/guides-iphone-ipod-ipad/sbsettings-tog ...

  2. 具体解释。。设计模式5——DAO。。studying

    设计模式5--DAO ★ 场景和问题 在Java程序中,常常须要把数据持久化.也须要获取持久化的数据,可是在进行数据持久化的过程中面临诸多问题 (如:数据源不同.存储类型不同.供应商不同.訪问方式不同 ...

  3. C#学习笔记——常量、字段以及事件

    一 常量与字段 (一) 常量 常量总是被视为静态成员,而不是实例成员.定义常量将导致创建元数据.代码引用一个常量时,编译器会在定义常量的程序集的元数据中查找该符号,提取常量的值,并将值嵌入IL中.由于 ...

  4. 【习题 3-5 UVA-227】Puzzle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.. 输入稍微恶心了点. getchar()一个一个搞就好. [代码] #include <bits/stdc++.h& ...

  5. iproute2交叉编译

    测试zynq+ramdisk平台时发现自带的busybox无法通过ip命令配置can接口,执行can配置命令 ip link set can0 type can bitrate 会出现以下报错: ip ...

  6. 幻灯展示jQuery插件supersized

    主要特性: 能够自动修改图片大小适合浏览器的页面大小 通过幻灯展示的循环背景可以动态加载并且可以设置变化方式 核心版本可以支持仅仅需要背景变化大小的需要 键盘导航 整合Flickr - 可以从用户,组 ...

  7. Python 细节与基础拾遗

    locals():当前环境下的全部局部变量,字典(dict)类型,所有的 key 均为字符串类型: if 'sess' in locals() and sess is not None: print( ...

  8. 认识PWA

    原文 简书原文:https://www.jianshu.com/p/f38f21ed45dc 大纲 前言 1.什么是PWA 2.PWA 应该具备的特点 3.PWA基础 4.构建 PWA 的业务场景 5 ...

  9. python 如何使用pip安装第三方软件

    1. 先将sripts加入系统的环境变量path中.如笔者的路径为: D:\Program Files\Python35\Scripts 2. 启动cmd,如安装request 过程十分简单,但是也容 ...

  10. PHP文件处理--操作文件

    除了能够对文件内容进行读写,对文件本身相同也能够进行操作,如拷贝文件.又一次命名.查看改动日期等. PHP内置了大量的文件操作函数,经常使用的文件函数例如以下表: 函数原型 函数说明 举例 bool ...