web实时通讯方法轮询、webSocket、SSE介绍

前言

• 服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。
• 在日常的场景中微信消息通知栏、首页广告推送等等。
• 一般服务器向前端页面实时推送数据一般有三种方法：轮询、webSocket、SSE。

轮询

• 使用定时器轮询的方法，客户端会定时地向服务端发送请求，询问是否有新数据。
• 优点：实现简单，兼容性好。
• 缺点：一直请求，浪费服务器资源，可能会有较大的延迟，且对页面可能也会卡顿。

webSocket

• 一种双向通信协议，同时支持服务端和客户端之间的实时交互。WebSocket 是基于 TCP 的长连接，和HTTP 协议相比，它能实现轻量级的、低延迟的数据传输，非常适合实时通信场景，主要用于交互性强的双向通信。
• 优点：长连接，客户端不用主动去请求数据，节约服务器资源（不会一直去请求数据，也不会一直去查数据库），数据更新及时，浏览器兼容较好（web、h5、小程序一般都支持）。
• 缺点：有点大材小用，一般大屏数据只需要查询数据不需要向服务端发送消息，还要处理心跳、重连等问题。

创建 WebSocket 对象：其中，ws://example.com 是 WebSocket 的 URL，表示要连接的服务器。
var socket = new WebSocket(‘ws://example.com’);

连接 WebSocket：使用 WebSocket.onopen 事件处理程序检查 WebSocket 是否成功连接。
socket.onopen = function() {
console.log(‘WebSocket connected’); };

接收来自 WebSocket 的消息：使用 WebSocket.onmessage 事件处理程序接收来自 WebSocket 的消息。
socket.onmessage = function(event) {
console.log(‘WebSocket message:’, event.data); };

向 WebSocket 发送消息：使用 WebSocket.send 方法向 WebSocket 发送消息。
socket.send(‘Hello, WebSocket’);

关闭 WebSocket：当需要关闭 WebSocket 时，使用 WebSocket.close 方法。
socket.close();

• 在vue中的代码实现如下

<template>
  <div></div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      websocket: null, // WebSocket对象
      reconnectInterval: 3000, // 重连间隔时间（毫秒）
      heartbeatInterval: null, // 心跳定时器
    };
  },
  created() {
   
    this.setupWebSocket(); // 创建WebSocket连接
  },
  methods: {
   
    setupWebSocket() {
   
      this.websocket = new WebSocket("ws链接地址"); // 创建WebSocket连接
      this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
      this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
      this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
    },
    clo