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