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

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使用截图

最后的最后，点个赞再走~