Vue中使用WebSocket

代码案例

<template>
  <div>
    <button @click="connect">连接</button>
    <button @click="disconnect">断开</button>
    <input v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">发送消息</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      messages: [],
      socket: null,
    };
  },
  methods: {
    connect() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        console.log("WebSocket is already connected.");
        return;
      }
      this.socket = new WebSocket("ws://124.222.224.186:8800");//一般情况这个链接都是好用的，如果挂了就自行去网上找一个
      this.setupWebSocket();
    },
    disconnect() {
      if (this.socket) {
        this.socket.close();
      }
    },
    setupWebSocket() {
      // 监听WebSocket的open事件
      this.socket.addEventListener("open", (event) => {
        console.log("WebSocket connection opened:", event);
      });

      // 监听WebSocket的message事件
      this.socket.addEventListener("message", (event) => {
        console.log("WebSocket message received:", event);
        this.messages.push(event.data);
      });

      // 监听WebSocket的close事件
      this.socket.addEventListener("close", (event) => {
        console.log("WebSocket connection closed:", event);
      });

      // 监听WebSocket的error事件
      this.socket.addEventListener("error", (event) => {
        console.error("WebSocket error observed:", event);
      });
    },
    sendMessage() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.message);
        this.message = "";
      } else {
        console.error("WebSocket is not open. Cannot send message.");
      }
    },
  },
  beforeDestroy() {
    this.disconnect();
  },
};
</script>

什么是websocket？

• WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据交换，而无需客户端不断发送请求。
• WebSocket协议通过HTTP/1.1协议的101状态码进行握手。在握手过程中，浏览器和服务器协商使用的协议版本、支持的子协议、支持的扩展选项等。一旦握手完成，连接将保持打开状态，客户端和服务器就可以在连接上实时地传递数据。WebSocket协议支持二进制数据和文本数据，可以自由地在它们之间进行转换。
• WebSocket协议的优势包括实时性、双向通信和减少网络负载。由于WebSocket的持久化连接，它可以实现实时的数据传输，避免了Web应用程序需要不断地发送请求以获取最新数据的情况。WebSocket协议支持双向通信，这意味着服务器可以主动向客户端发送数据，而不需要客户端发送请求。此外，由于WebSocket的持久化连接，它可以减少HTTP请求的数量，从而减少了网络负载。
• WebSocket协议的劣势包括需要浏览器和服务器都支持、需要额外的开销和安全问题。WebSocket是一种相对新的技术，需要浏览器和服务器都支持。一些旧的浏览器和服务器可能不支持WebSocket。WebSocket需要在服务器上维护长时间的连接，这需要额外的开销，包括内存和CPU。由于WebSocket允许服务器主动向客户端发送数据，可能会存在安全问题。服务器必须保证只向合法的客户端发送数据。

WebSocket的原理

• 握手阶段：WebSocket协议的握手阶段是建立连接的第一步。客户端发起WebSocket连接请求，通过HTTP协议发送一个特殊的Upgrade头部字段，请求升级到WebSocket协议。服务器接受这个请求后，返回一个状态码为101的响应，表示协议升级成功。此时，WebSocket连接建立成功，后续的通信将使用WebSocket协议。
• 双向通信：WebSocket协议在建立连接之后，客户端和服务器之间可以进行双向通信。与传统的HTTP请求-响应模式不同，WebSocket允许客户端和服务器随时发送消息给对方，而无需等待对方的响应。这种双向通信的特性使得WebSocket协议非常适合实时通信应用，如在线聊天、实时游戏等。
• 持久连接：与HTTP协议不同，WebSocket协议使用单个TCP连接进行通信，这个连接会一直保持活跃状态，直到客户端或服务器关闭连接。因此，WebSocket协议是一种持久连接，可以减少连接建立和断开的开销，提高通信效率。
• 数据帧格式：WebSocket协议使用了一种称为数据帧(Frame)的格式来传输数据。数据帧由帧头(FrameHeader)和帧载荷(FramePayload)组成，帧头包含了一些控制信息，如数据类型、是否分片等，而帧载荷则是实际的数据内容。WebSocket协议定义了多种数据帧类型，如文本帧、二进制帧、ping帧、pong帧等，用于不同类型的数据传输。在websocket出现之前，web交互一般是基于http协议的短连接或者长连接，websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

下面是我转载大佬的内容 原文地址

1.http存在的问题

• http是一种无状态协议，每当一次会话完成后，服务端都不知道下一次的客户端是谁，需要每次知道对方是谁，才进行相应的响应，因此本身对于实时通讯就是一种极大的障碍
• http协议采用一次请求，一次响应，每次请求和响应就携带有大量的header头，对于实时通讯来说，解析请求头也是需要一定的时间，因此，效率也更低下
• 最重要的是，需要客户端主动发，服务端被动发，也就是一次请求，一次响应，不能实现主动发送

2.long poll(长轮询)

• 对于以上情况就出现了http解决的第一个方法——长轮询

• 基于http的特性，简单点说，就是客户端发起长轮询，如果服务端的数据没有发生变更，会 hold
  住请求，直到服务端的数据发生变化，或者等待一定时间超时才会返回。返回后，客户端又会立即再次发起下一次长轮询

• 优点是解决了http不能实时更新的弊端，因为这个时间很短，发起请求即处理请求返回响应，实现了“伪·长连接”
  张三取快递的例子，张三今天一定要取到快递，他就一直站在快递点，等待快递一到，立马取走

从例子上来看有个问题：

• 假如有好多人一起在快递站等快递，那么这个地方是否足够大，（抽象解释：需要有很高的并发，同时有很多请求等待在这里） 总的来看：
  推送延迟。服务端数据发生变更后，长轮询结束，立刻返回响应给客户端。 服务端压力。长轮询的间隔期一般很长，例如 30s、60s，并且服务端
  hold 住连接不会消耗太多服务端资源。

3.Ajax轮询

• 基于http的特性，简单点说，就是规定每隔一段时间就由客户端发起一次请求，查询有没有新消息，如果有，就返回，如果没有等待相同的时间间隔再次询问
• 优点是解决了http不能实时更新的弊端，因为这个时间很短，发起请求即处理请求返回响应，把这个过程放大n倍，本质上还是request =
  response

举个形象的例子（假设张三今天有个快递快到了，但是张三忍耐不住，就每隔十分钟给快递员或者快递站打电话，询问快递到了没，每次快递员就说还没到，等到下午张三的快递到了，but，快递员不知道哪个电话是张三的，（可不是只有张三打电话，还有李四，王五），所以只能等张三打电话，才能通知他，你的快递到了）
从例子上来看有两个问题：

假如说，张三打电话的时间间隔为10分钟，当他收到快递前最后一次打电话，快递员说没到，他刚挂掉电话，快递入库了（就是到了），那么等下一次时间到了，张三打电话知道快递到了，那么这样的通讯算不算实时通讯？很显然，不算，中间有十分钟的时间差，还不算给快递员打电话的等待时间（抽象的解释：每次request的请求时间间隔等同于十分钟，请求解析相当于等待）
假如说张三所在的小区每天要收很多快递，每个人都采取主动给快递员打电话的方式，那么快递员需要以多快的速度接到，其他人打电话占线也是问题（抽象解释：请求过多，服务端响应也会变慢）

总的来看，Ajax轮询存在的问题：
推送延迟。

服务端压力。配置一般不会发生变化，频繁的轮询会给服务端造成很大的压力。

推送延迟和服务端压力无法中和。降低轮询的间隔，延迟降低，压力增加；增加轮询的间隔，压力降低，延迟增高

建议看一下大佬原文这份这是我的转载，链接在上面