vue使用SockJS實現webSocket通信

以前使用websocket都是使用

window.webSocket = new WebSocket('ws://' + config.webSocketUrl + '/webData/websocket?token=' + token + '&username=' + username);
這種方式進行操作。由於項目要求，需要訪問網關因此需要使用http的連接方式進行socket信息推送，以下用的是 SockJS。

# 2020-02-19更新
在項目前期開發，我們都是在全局的js文件中定義socket的連接ip和端口，在頁面調用。但在項目優化過程中，我們希望可以直接使用webpack的代理模式，直接通過代碼進行請求，這樣頁面就不需要進行socket地址的配置。
優點：（1）頁面減少全量變量的配置；（2）系統方法調用的統一性，和其他普通的接口調用代理一致。
缺點：（1）由於在頁面中配置的代理，而不是直接請求http:xxxx,導致需要在代理服務器中（例如ngnix）上多添加一個代理配置。相當於把以前http的直接請求方式變成代理轉發請求。
具體更改模式為：
　　1、在自定義的websocket.js文件中，創建SockJS對象：
      新寫法：const socket = new SockJS('/bullet');// 連接SockJS的endpoint名稱為"bullet"
　　　 舊寫法：let socket = new SockJS('http://'+config.webSocketUrl+'/bullet');//連接SockJS的endpoint名稱為"bullet"
　　2、在項目根目錄下的config/index.js文件中（vue-cli2.0）,或者vue.config.js（vue-cli3.0）添加代理配置即可。

    proxyTable: {
      '/bullet': {
        target: target,　　//target為目標變量
        ws: true,
        pathRewrite: {
          '^/bullet': '/bullet'
        },
      }
    },

　　　　

 

# 2019-04-11更新
隨着項目的模塊化，需要把websocket相關的功能獨自創建一個模塊進行引入使用，以下是本人的操作方式：
1.在utils目錄下創建一個js文件，可以命名為：websocket.js

2.在websocket.js文件中寫入相關的socket.io代碼

說明：config.webSocketUrl是一個url地址的變量。主要是在vue項目中的static文件夾下創建一個js文件（不會被webpack壓縮），定義全局常量、變量，並在index.html中做為一個原生的js文件使用<script>標簽引入即可。在項目部署過程中，直接修改js文件，即可對相應的數據進行更改。

// socket功能
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import store from "../store";

export function connectionSocket() {
  let socket = new SockJS('http://'+config.webSocketUrl+'/bullet');//連接SockJS的endpoint名稱為"bullet"
  console.log('socket連接地址：'+'http://'+config.webSocketUrl+'/bullet');
  // 獲取STOMP子協議的客戶端對象
  let stompClient = Stomp.over(socket);
  // 定義客戶端的認證信息,按需求配置
  let headers = {
    Authorization:store.getters.token
  };

  // 攔截輸出的一大堆垃圾信息
  stompClient.debug = function (str) {
    $("#debug").append(str + "\n");
  };
  // 向服務器發起websocket連接
  stompClient.connect(headers,() => {
    stompClient.subscribe('/topic/getResponse', (response) => { // 訂閱服務端提供的某個topic
      if (response.body) {
        const repObj = JSON.parse(response.body);
        if (repObj.data.webSocketType == 'ISEVehicle') { //監控管理，新版車輛監控
          if (repObj.status == 200) {
            store.dispatch('carMonitorFun', repObj);
          }  else if (repObj.data.webSocketType == 'vehicleAlarm') { //首頁，車輛告警數據推送
          if (repObj.status == 200) {
            store.commit('vehicleAlarmMUTA', repObj.data);
          }
        }
      }
    });
    stompClient.subscribe('/user/'+store.getters.userRegionCode+'/queue/getResponse', (response) => { // 訂閱服務端提供的某個topic
      if (response.body) {
        const repObj = JSON.parse(response.body);
         if (repObj.data.webSocketType == 'personAlarm') { //首頁，人臉預警數據推送
          if (repObj.status == 200) {
            store.commit('personAlarmMUTA', repObj.data);
          }
        }
        else if (repObj.data.webSocketType == 'vehicleAlarm') { //首頁，車輛告警數據推送
          if (repObj.status == 200) {
            store.commit('vehicleAlarmMUTA', repObj.data);
          }
        }
      }
    });
    stompClient.subscribe('/user/'+store.getters.token+'/queue/getResponse', (response) => { // 訂閱服務端提供的某個topic
      if (response.body) {
        let repObj = JSON.parse(response.body);
        if (repObj.data.webSocketType =='task') { store.commit('monitorStatus', repObj);} //任務列表//當監控到websocket有數據返回的時候，修改monitorStatus使其發生變化即可
        else if (repObj.data.webSocketType == 'networkConfig') { store.commit('monitorStatusMUTA', repObj);}//聯網配置
       
      }
    });
  }, (err) => {
    // 連接發生錯誤時的處理函數
    console.log('失敗')
  });
}

　　3.在頁面需要初始化的地方因為該js文件即可

 

 

# 2018-12-13創建

先安裝 sockjs-client 和 stompjs 

npm install sockjs-client
npm install stompjs　　

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
export default {
    data(){
        return {
            stompClient:'',
            timer:'',
        }
    },
    methods:{
        initWebSocket() {
            this.connection();
            let that= this;
            // 斷開重連機制,嘗試發送消息,捕獲異常發生時重連
            this.timer = setInterval(() => {
                try {
                    that.stompClient.send("test");
                } catch (err) {
                    console.log("斷線了: " + err);
                    that.connection();
                }
            }, 5000);
        },  
        connection() {
            // 建立連接對象
            let socket = new SockJS('http://10.10.91.4:8081/ws');
            // 獲取STOMP子協議的客戶端對象
            this.stompClient = Stomp.over(socket);
            // 定義客戶端的認證信息,按需求配置
            let headers = {
                Authorization:''
            }
            // 向服務器發起websocket連接
            this.stompClient.connect(headers,() => {
                this.stompClient.subscribe('/topic/public', (msg) => { // 訂閱服務端提供的某個topic
                    console.log('廣播成功')
                    console.log(msg);  // msg.body存放的是服務端發送給我們的信息
                },headers);
                this.stompClient.send("/app/chat.addUser",
                    headers,
                    JSON.stringify({sender: '',chatType: 'JOIN'}),
                )   //用戶加入接口
            }, (err) => {
                // 連接發生錯誤時的處理函數
                console.log('失敗')
                console.log(err);
            });
        },    //連接 后台
        disconnect() {
            if (this.stompClient) {
                this.stompClient.disconnect();
            }
        },  // 斷開連接
    },
    mounted(){
        this.initWebSocket();
    },
    beforeDestroy: function () {
        // 頁面離開時斷開連接,清除定時器
        this.disconnect();
        clearInterval(this.timer);
    }
}
 

問題
安裝 sockjs-client、stompjs；在這兒要注意一下，我在"stompjs": "^2.3.3"這個版本發現，引入stompjs會報一個net模塊找不到，需要在stompjs模塊根目錄下執行npm install net，這個是個奇葩的問題

進入到module目錄下的stompjs目錄，執行npm install net