vue使用SockJS实现webSocket通信

2019-10-29

Vue中使用webscoket实时更新数据

在入口页index.html引入websocket即时通信所需要的js

1 2	<script src="static/js/sockjs.min.js" charset="utf-8"></script> <script src="static/js/stomp.min.js" charset="utf-8"></script>

import store from '../../src/store'
import {getToken} from "../utils/auth";
import webSocket from "../store/modules/webSocket";

const wsHostName = process.env.VUE_APP_BASE_WS;//192.168.1.1:8888
var url = wsHostName + "/ws/intersection?access-token=";
//连接
let timer = null;
//为true代码webscoket连接成功否则失败
store.state.webSocket.connectStatus = false;
var stomp = null;//定义全局变量，代表一个session
//定义连接函数
export function connect(){	//定义连接函数
    if(stomp == null || !stomp.connected){
        var sockJS = new SockJS(url+getToken());
        stomp = Stomp.over(sockJS);
        stomp.debug = null;
        stomp.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
        stomp.heartbeat.incoming = 0; //客户端不从服务端接收心跳包
        stomp.connect({},
            function connectCallback (frame) {
                // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
                store.state.webSocket.connectStatus = true;
                clearInterval(timer);
                console.log('已连接【' + frame + '】');
            },
            function errorCallBack (error) {
                // 连接失败时（服务器响应 ERROR 帧）的回调方法
                if(getToken()){
                    console.log('连接失败【' + error + '】');
                    store.state.webSocket.connectStatus = false;
                    setTimeout(function () {
                        //内容3秒后执行
                        connect();
                    }, 3000);
                }else{
                    destorySock();
                }
            }
        );
    }else{
        store.state.webSocket.connectStatus = true
    }
}
//断开Socket连接
export function destorySock(){
    stomp.disconnect();
}

let trafficParticipant = null;
let signalState = null;
 
//订阅实时数据接口
export function listenSignalState(id) {
    signalState = stomp.subscribe(`/t/t/state/${id}`, function (res) {
        store.state.webSocket.signalState = JSON.parse(res.body)
    });
}
//取消订阅
export function cancelSignalState() {
    if(signalState !== null){
        signalState.unsubscribe()
    }
}

webscoker在vuex中的连接状态管理

let webSocket = {
    state:{
       // ws的连接状态，false：未连接，true：已连接
        connectStatus: false, 
        trafficParticipant:'',
        signalState:'',
    },
    mutations:{

    },
    actions:{

    }
};
export default webSocket;

运行websocket

在main.js入口运行websocket方法

import {connect} from './api/socket'

const whiteList = ['/login'];// 不重定向白名单
router.beforeEach((to, from, next) => {
    if (getToken()) {
        connect();//连接webscoket
        next();
    } else {
        if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
            next()
        } else {
            next('/login'); // 否则全部重定向到登录页
        }
    }
});

在功能中使用webscoket

//页面初始化的时候webscoker连接成功则订阅方法
mounted(){
    if (this.$store.state.webSocket.connectStatus) {
        try {
             listenSignalState(id);// 订阅websocket中的数据接口
        } catch (e) {
             console.log('连接失败');
        }
    }
},
computed: {
    //websocker连接状态
    connectStatus() {
       return this.$store.state.webSocket.connectStatus;
    },
     //webscoket订阅的vuex中的字段 监听值的变化
     signalState() {
       return this.$store.state.webSocket.signalState;
     },
},
watch(){
    connectStatus: 'connectStatus_',
    signalState: 'signalState_',//订阅方法放在vuex中的参数值字段
},
methods:{
        //websoctet连接状态 true false
        connectStatus_(newVal, oldVal) {
            listenSignalState(id);// 订阅websocket中的数据接口
        },
        //接口实时返回来的数据 做数据处理
        signalState_(newVal, oldVal) {
        
        }
}