您的位置:

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:

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原型进行管理。