vue中websocket的使用

 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 是一种更高效、实时性更好的通信协议，在需要实时双向通信的场景下，它能提供更好的性能和用户体验。