Vue|Vue + Vuex + sockjs-client + stompjs进行websocket连接 Vue+Vuex+sockjs-client+stompjs进行w

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.页面中使用 【Vue|Vue + Vuex + sockjs-client + stompjs进行websocket连接】由于我创建的是全局的实例对象，在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下载。
语言可以改为中文。