WebSocket前端完全指南

小蓝 • 2025-01-05 13:23 • 编程

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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/311391.html