WebSocket前端完全指南

一、WebSocket前端代碼

WebSocket是HTML5中新增的特性，使客戶端和伺服器之間可以進行實時雙向通信。要在前端使用WebSocket，首先需要先創建WebSocket實例：

const ws = new WebSocket('ws://localhost:8080');

創建WebSocket實例的參數是伺服器埠和地址，這裡以localhost為例。

二、前端測試WebSocket介面

為了確保WebSocket連接正常，需要監聽WebSocket的連接狀態，同時也可以監聽收到的消息。在WebSocket實例中添加以下代碼：

ws.onerror = (event)=>{
    console.error("websocket error",event);
};

ws.onopen = ()=>{
    console.log("websocket connection success");
};

ws.onmessage = (event)=>{
    console.log("websocket receive message:",event);
};

其中，onerror處理錯誤事件，在onopen裡面完成WebSocket連接之後的操作；onmessage用於處理接收到的消息。

三、WebSocket前端發送消息

既然是雙向通信，前端也需要向伺服器發送消息。可以使用WebSocket的send方法：

ws.send("Hello, WebSocket");

發送的消息可以是字元串或二進位數據。

四、WebSocket前端一發送就斷開

有時候我們需要在前端向伺服器發送一個消息，發送完就斷開連接。這可以通過onopen事件添加一次性函數實現：

ws.onopen = ()=>{
    ws.send("Hello, WebSocket");
    ws.close();
};

五、WebSocket前端怎麼用

對於一個WebSocket前端通信，我們必須要知道其生命周期。發送後端連通之前是CONNECTING，連接成功OPEN，消息上行(從前端發送到後端)為SENDING，消息下行(從後端發送到前端)為RECEIVING。封裝了一下並且添加了異常try catch：

pre {
background:#eee;
padding:8px;
}

pre code {
color:#f66;
}

class WebSocketUtil{
    private ws!:WebSocket;

    connect(url:string):Promise{
        return new Promise((resolve,reject)=>{
            this.ws = new WebSocket(url);

            this.ws.onopen = (e)=>{
                resolve(e);
            };

            this.ws.onerror=(e)=>{
                reject(e);
            };
        })
    }

    close(){
        this.ws.close();
    }

    send(data:any):Promise{
        return new Promise((resolve,reject)=>{
            this.ws.onmessage=(event)=>{
                resolve(event);
            };

            try {
                this.ws.send(JSON.stringify(data));
            }catch(e){
                reject(e);
            }
        });
    }

    get state():number{
        return this.ws.readyState;
    }
}

使用方法：

const url = 'ws://localhost:8080/ws';
const websocket = new WebSocketUtil();
await websocket.connect(url);

if(websocket.state===WebSocket.OPEN){
    console.log("connected");
    await websocket.send({id:1,message:"hello, WebSocket"});
    websocket.close();
}

六、WebSocket前端封裝

將WebSocket進行封裝，可以通過繼承並重寫WebSocket原型方法，來拓展WebSocket的功能。比如：

class MyWebSocket extends WebSocket{
    constructor(url: string) {
        super(url);
    }

    mySend(msg: any){
        super.send(JSON.stringify(msg));
    }
}

封裝之後使用方法和原來WebSocket一樣，不過多了一個mySend方法。

七、WebSocket前端Vue使用方法

在Vue中使用WebSocket，可以將WebSocket封裝在Vue原型中。在Vue的main.js文件中添加以下代碼：

import Vue from 'vue';
import MyWebSocket from './MyWebSocket';

Vue.prototype.$ws = new MyWebSocket('ws://localhost:8080/ws');

這樣就可以在Vue組件中使用this.$ws來操作WebSocket。

八、WebSocket前端交互

如果在前端中需要不同頁面或組件之間進行WebSocket交互，可以將WebSocket放在一個單獨的模塊中，使用Vuex或事件匯流排來傳遞消息。

九、WebSocket前端關閉連接

當WebSocket不再需要使用時，需要調用close方法來關閉連接：

ws.close();

建議在組件鉤子函數中使用created或destroyed來打開和關閉連接。其中created鉤子函數用於創建連接，destroyed鉤子函數用於在組件銷毀前關閉連接。

總結：WebSocket前端的使用非常簡單，前端只需創建WebSocket實例並監聽連接狀態，通過send發送消息即可。而為了方便，可以對WebSocket進行封裝，使用Vue原型進行管理。