vue socket的使用

1、簡單介紹

基于webSocket通信的庫主要有 ​​socket.io​​​，​​SockJS​​，這次用的是 SockJS。

2、前提

這裡我們使用​​sockjs-client​​​、​​stomjs​​這兩個子產品，要實作webSocket通信，需要背景配合，也使用相應的子產品。

sockjs-client

​​​sockjs-client​​是從SockJS中分離出來的用于用戶端使用的通信子產品.是以我們就直接來看看SockJS. SockJS是一個浏覽器的JavaScript庫,它提供了一個類似于網絡的對象,SockJS提供了一個連貫的,跨浏覽器的JavaScriptAPI,它在浏覽器和Web伺服器之間建立了一個低延遲,全雙工,跨域通信通道. 你可能會問,我為什麼不直接用原生的WebSocket而要使用SockJS呢?這得益于SockJS的一大特性,一些浏覽器中缺少對WebSocket的支援,是以，回退選項是必要的，而Spring架構提供了基于SockJS協定的透明的回退選項。SockJS提供了浏覽器相容性,優先使用原生的WebSocket,如果某個浏覽器不支援WebSocket,SockJS會自動降級為輪詢.

stomjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡單文本協定;

WebSocket是一個消息架構,不強制使用任何特定的消息協定,它依賴于應用層解釋消息的含義.

與HTTP不同,WebSocket是處在TCP上非常薄的一層,會将位元組流轉化為文本/二進制消息,是以,對于實際應用來說,WebSocket的通信形式層級過低,是以，可以在 WebSocket 之上使用STOMP協定，來為浏覽器 和 server間的 通信增加适當的消息語義。

STOMP與WebSocket 的關系:

1. HTTP協定解決了web浏覽器發起請求以及web伺服器響應請求的細節,假設HTTP協定不存在,隻能使用TCP套接字來編寫web應用,你可能認為這是一件瘋狂的事情;
2. 直接使用WebSocket(SockJS)就很類似于使用TCP套接字來編寫web應用,因為沒有高層協定,就需要我們定義應用間發送消息的語義,還需要確定連接配接的兩端都能遵循這些語義;
3. 同HTTP在TCP套接字上添加請求-響應模型層一樣,STOMP在WebSocket之上提供了一個基于幀的線路格式層,用來定義消息語義.

3、代碼

先安裝 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);
    }
}