Vue + Vuex + sockjs-client + stompjs进行websocket连接
前不久遇到一个需求：实时读取硬件数据，在此作为技术点。
之前想的是使用，定时刷新请求接口来获取，但是数据实时性要求较高，这样难免有些麻烦。
这时候，websocket 就是一个不错的选择了。
简单赘述下原理（想直接上手可跳过此部分）
这里只描述大概，具体详细原理可另行百度。
由于WebSocket是html5出的协议，所以老版的浏览器是肯定不会支持的。
这里用到的Sock.js 就是用来兼容一些旧版本的浏览器。
而，STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。
简单地说，stomp是一个用于client之间进行异步消息传输的简单文本协议
1.vue的使用方法
执行npm 命令行，如下：
npm install sockjs-client --save
npm install stompjs --save
2.在vuex中创建
这里说明一点，也可以不使用vuex，可以直接在组件或者单个项目生命周期使用。
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
const state = {
tagValueList: {}
}
const mutations = {
tagListContent(state, newValue) {
state.tagValueList = newValue
}
}
const actions = {
// 创建方法
connect(context) {
// 创建连接
let socket = new SockJS('/xxxx/xxxx'); // 这个地址要找你们后端
let stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
stompClient.subscribe('/xxxx/xxxx', function (info) { // 这个地址要找你们后端
let receiveMsg = info.body
context.commit('tagListContent', receiveMsg)
});
});
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
这样，我在全局任意都可以直接使用了
3.页面中使用
由于我创建的是全局的实例对象，在watch中可以直接监听它的变化进行下一步操作了
import { stomp } from 'vuex'
computed: {
stomp() {
return this.$store.state.stomp.tagValueList
}
},
watch: {
stomp : function(val) {
// val 就是后端传过来的值了
// 逻辑代码
console.log(val)
}
}
就这些，比较简单。
考虑到有些朋友可能不用这么复杂，我还是写一些不用vuex的方法吧！
4.直接在生命周期中使用
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
created:function(){
let socket = new SockJS('xx/xx');
let stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
stompClient.subscribe('/topic/eqp/register', function (info) {
console.warn(info.body);
console.warn(JSON.parse(info.body));
});
});
}
5.前端自己发送数据
有些时候，为了便于测试，频繁地找后台开发的同学好像有些麻烦（会遭人烦 2333 -.-
所以我这里用的 MQTTX 这客户端软件自己进行测试
还是比较方便的
网上搜索很多的，mac用户在app store下载。
语言可以改为中文。
mqttx使用截图
最后的最后，点个赞再走~
