vue發送websocket請求和http post請求

直接上代碼：

pdf.vue

<script>
    import SockJS from 'sockjs-client';
    import Stomp from 'stompjs';
    import qs from "qs"

    export default {
        name: "pdf",
        data() {
            return {
                newsData: [],
                tagGuid_mx: "",
                tagGuid_4AA_Ia: "",
                tagGuid_4AA_P: "",
                tagGuid_4AA_Q: "", 49                 tagGuid_1AA_6_Ib: "",
                tagGuid_1AA_6_Ic: "",
                tagGuid_pdfwd: "",
                tagGuid_pdfsd: "",
                stompClient: '',
                timer: '',
                visibilityHeZha: "hidden",
                visibilityFenZha: "hidden",
                hezhaData:[]
            }
        },
        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://XXX.XX.XX.XXX:8081/energy-system-websocket');
                // 獲取STOMP子協議的客戶端對象
                this.stompClient = Stomp.over(socket);
                // 定義客戶端的認證信息,按需求配置
                let headers = {
                    access_token: "92c31bd5-ae43-4f25-9aad-c4eb1a92d61d"
                    //                    Authorization: ''
                }
                // 向服務器發起websocket連接
                this.stompClient.connect(headers, () => {
                    this.stompClient.subscribe('/user/topic/data', (msg) => { // 訂閱服務端提供的某個topic
                            console.log('廣播成功')
                            //                        console.log(msg); // msg.body存放的是服務端發送給我們的信息
                            console.log(msg.body);
                            this.newsData = JSON.parse(msg.body);

                        }, headers),
                        this.stompClient.subscribe('/user/topic/alarm', (msg) => { // 訂閱服務端提供的某個topic
                            console.log('廣播告警成功')
                            //console.log(msg); // msg.body存放的是服務端發送給我們的信息
                            console.log(msg.body);
                            this.newsData = JSON.parse(msg.body);

                        }, headers);
                    this.stompClient.subscribe('/user/topic/cmd_ack', (msg) => { // 訂閱服務端提供的某個topic
                        console.log('下控指令應答成功')
                        //console.log(msg); // msg.body存放的是服務端發送給我們的信息
                        console.log(msg.body);
                        this.newsData = JSON.parse(msg.body);

                    }, headers);

                    this.stompClient.subscribe('/user/topic/response', (msg) => { //指令的應答（僅表示服務端接收成功或者失敗）
                        console.log('SEND指令的應答成功')
                        //console.log(msg); // msg.body存放的是服務端發送給我們的信息
                        console.log(msg.body);
                        this.newsData = JSON.parse(msg.body);
                        this.newsData = this.newsData.data;
                        console.log(this.newsData);
                        for(var i = 0; i < this.newsData.length; i++) {　
                            //母線uab
                            if(this.newsData[i].tagGuid == "a3a95bf3-fef8-454e-9175-19a466e40c3d") {　　　　　　
                                this.tagGuid_mx = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : ""
                            }
                            //電容櫃4AA_Ia
                            if(this.newsData[i].tagGuid == "4cf6e256-6c3a-4853-a087-dfd263916dab") {　　　　　　
                                this.tagGuid_4AA_Ia = this.newsData[i].value　
                            }
                            //電容櫃4AA_P
                            if(this.newsData[i].tagGuid == "52e8265a-0a20-4e3b-a670-14a8df373bf7") {　　　　　　
                                this.tagGuid_4AA_P = this.newsData[i].value　
                            }
                            //電容櫃4AA_Q
                            if(this.newsData[i].tagGuid == "ef369a17-0bbd-4295-8ac7-816c23fcb065") {　　　　　　
                                this.tagGuid_4AA_Q = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : 0　
                            }276                             //配電房溫度
                            if(this.newsData[i].tagGuid == "ead49446-07f9-43b7-a4ce-cd974d53728e") {　　　　　　
                                this.tagGuid_pdfwd = this.newsData[i].value　
                            }
                            //配電房濕度
                            if(this.newsData[i].tagGuid == "baaf1733-124e-46fd-9d58-c069b747317a") {　　　　　　
                                this.tagGuid_pdfsd = this.newsData[i].value　
                            }

                        }
                    }, headers);
                    this.stompClient.send("/app/monitor/subTagGuid", // # 訂閱需要監控的測點ID
                        headers,

                        JSON.stringify({
                            "stationCode": "00013",
                            "tagGuids": [
                                "a3a95bf3-fef8-454e-9175-19a466e40c3d", //
                                "4cf6e256-6c3a-4853-a087-dfd263916dab", //
                                "52e8265a-0a20-4e3b-a670-14a8df373bf7", //
                                "ef369a17-0bbd-4295-8ac7-816c23fcb065", //334                                 "baaf1733-124e-46fd-9d58-c069b747317a"
                            ]
                        })
                    ) //用戶加入接口
                }, (err) => {
                    // 連接發生錯誤時的處理函數
                    console.log('失敗')
                    console.log(err);
                });
            }, //連接 后台
            disconnect() {
                if(this.stompClient) {
                    this.stompClient.disconnect();
                }
            }, // 斷開連接
            changeColor(evt) {
                this.rect.setAttributeNS(null, "fill", "blue")
            },
            shl3aa4() {
                this.visibilityHeZha = this.visibilityHeZha == "visibility" ? "hidden" : "visibility";
                this.visibilityFenZha = this.visibilityFenZha == "visibility" ? "hidden" : "visibility";
            },
            shl3aa42() {
                setTimeout(() => {
                    this.visibilityHeZha = "hidden";
                    this.visibilityFenZha = "hidden";
                }, 1200)
            },
            hezha() {
                //3#樓3AA-4_合閘
                this.$axios.post("/energy-system/auth/monitor/ykcmd", {
                        checkUser: "admin",
                        checkPass: "123456",
                        stationCode:"00013",
                        tagGuid: "89d1d312-17be-4d20-8471-baa08ba734e0",
                        value: 1
                    })
                    .then(res => {
                        this.hezhaData=JSON.parse(res.config.data)
                        if(this.hezhaData.tagGuid=="89d1d312-17be-4d20-8471-baa08ba734e0" && this.hezhaData.value==1){
                            alert("合閘成功！");
                        }else{
                            alert("合閘失敗！請聯系管理員");
                        }379                     })
                    .catch(error => {
                        console.log(error)
                    })
            },
            fenzha() {
                alert("分閘"); //3#樓3AA-4_分閘
            }
        },
        mounted() {
            this.initWebSocket();
        },
        beforeDestroy: function() { // 頁面離開時斷開連接,清除定時器
            this.disconnect();
            clearInterval(this.timer);
        },
        created() {

        }
    }
</script>

在main.js設置全局http地址：

Axios.defaults.baseURL = 'http://XXX.XXX.XX.XXX:9001';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

在main.js中設置header中token值：

// 添加請求攔截器
Axios.interceptors.request.use(function(config) {
    config.headers.access_token = "add7c097-f12b-40fe-8e48-6fe1f2120fa5";
    //    config.headers.Authorization = localStorage.token; //將token設置成請求頭
    console.log("請求============" + config);
    // 在發送請求之前做些什么
    return config;
}, function(error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
});

 

數據刷起來！