created() {
this.WebSocketfuc();
},
methods: {
//定义WebSocket
WebSocketfuc() {
this.socket = new WebSocket(
//WebSocket的接口地址
"ws://192.168.90.103:8080/websocket"
);
this.socket.onopen = () => {
console.log("WebSocket connected");
};
this.socket.onmessage = (event) => {
const data = event?.data;
console.log("接收到的消息:", data);
};
this.socket.onclose = () => {
console.log("WebSocket disconnected");
};
this.socket.onerror = (error) => {
console.error("WebSocket error:", error);
this.$modal.msgError("WebSocket error:系统错误,联系管理员");
};
},
toSend() {
this.socket.send('发送给服务器的消息');
},
}
当客户端需要主动关闭websocket连接时,需要主动调用this.socket.close()方法。
以上就是websocket的使用方法。当然你也可以使用websocket的封装库来进行使用。
为什么使用websocket?
WebSocket 是一种在网络应用中实现实时双向通信的技术。相比传统的 HTTP 请求,WebSocket 提供了更高效、更轻量级的通信机制,有以下几点优势:
实时性
WebSocket 允许服务器主动向客户端推送数据,实现了真正的实时通信。相较于传统的 HTTP 请求-响应模式,它不需要等待客户端发送请求才能进行响应,从而可以更快速地发送数据,实现实时更新。
更少的开销
WebSocket 通过建立一次连接,可以持久性地在客户端和服务器之间双向通信,避免了 HTTP 协议中每次请求都需要建立连接的开销,减少了通信的开销和延迟。
双向通信
传统的 HTTP 请求是单向的,客户端发起请求,服务器响应。而 WebSocket 允许客户端和服务器之间进行双向通信,这意味着服务器可以随时向客户端发送数据,而不需要客户端显式地请求。
适用于实时应用
WebSocket 特别适用于需要实时更新和即时性交互的应用,比如在线聊天、实时数据展示、多人协作编辑等场景。
较少的网络流量
WebSocket 使用较少的网络流量,因为它不需要像 HTTP 那样的头部信息和额外的数据传输,通信时头部信息相对较小。
综上所述,WebSocket 是一种更高效、实时性更好的通信协议,在需要实时双向通信的场景下,它能提供更好的性能和用户体验。