JavaScript 实现 HTTPS SSE 连接

JavaScript 实现 HTTPS SSE 连接

一、SSE 简介

SSE（Server-Sent Events，服务器推送事件）是一种基于 HTTP 的单向通信协议，允许服务器主动向客户端推送数据，适用于实时通知、消息提醒、状态同步等场景。与 WebSocket 双向通信不同，SSE 仅支持服务器到客户端的单向传输，开销更小，适配 HTTPS 协议更简洁。

本文实现的 SSE 客户端具备以下特性：HTTPS 适配、自动重连、事件监听、单例模式、错误处理、动态拼接用户参数，可直接集成到 Vue3/Vite 等前端项目中。

二、SSE 客户端代码

核心文件：utils/sseClient.js，采用类封装，提供完整的连接、监听、断开、重连能力，支持自定义事件与参数动态拼接。

import { getToken, getUserInfo } from '@/utils/tools';

class SSEClient {
  constructor() {
    this.source = null; // SSE 核心实例
    // 基础 URL（从环境变量读取，适配不同环境）
    this.baseUrl = import.meta.env.VITE_API_BASE_URL;
    this.path = '/sse/talent/adminConnect'; // SSE 接口路径
    this.url = `${this.baseUrl}${this.path}`;
    // 请求头（携带 Token 做权限校验，适配 HTTPS 鉴权），目前这种方式并不支持自定义 headers
    this.headers = {
      satoken: getToken(),
    };
    this.reconnectInterval = 30000; // 自动重连间隔（30 秒，可配置）
    this.isConnected = ; 
    . = ; 
    . =  (); 
    . = ; 
    . = ; 
  }

  
  () {
     {
       userInfo = (); 
       (!userInfo || !userInfo.) {
         .;
      }
       userId = userInfo.; 
       params =  ();
      params.(, userId);
      
       fullUrl = ;
       fullUrl;
    }  (error) {
      .(, error);
       .;
    }
  }

  
  () {
    
     (. || .) {
      ;
    }
    
     withCredentials = options. || ;
    . = options. || .;
    
    .();
    
    . = .();
     {
      
       eventSourceInitDict = { withCredentials };
      . =  (., eventSourceInitDict);
      
      .. =  {
        . = ;
        . = ;
        . = ; 
        .(, { : , : . });
        .(, .);
      };
      
      .. =  {
         {
          
           data = .(event.);
          .(, data);
        }  (e) {
          
          .(, event.);
        }
      };
      
      .. =  {
        . = ;
         errorMsg = ;
        .(errorMsg, error);
        .(, { : errorMsg, error, : .. });
        
         (.. === . && !.) {
          .++;
          
           (. > .) {
            . = ;
            .(, { : . });
            .();
            ;
          }
          . = ;
          .();
          
          ( {
            .(options);
          }, .);
        }
      };
      
      ..( {
        .(eventName, handler);
      });
    }  (e) {
      . = ;
       errorMsg = ;
      .(errorMsg, e);
      .(, { : errorMsg, : e });
    }
  }

  
  () {
    
     systemEvents = [, , ];
     (systemEvents.(eventName)) ;
    
     (.) {
      ..(eventName, handler);
      
      ..(eventName,  {
         {
           data = .(event.);
          (data);
        }  (e) {
          (event.);
        }
      });
    }
  }

  
  () {
     ( handler !== ) {
      .();
      ;
    }
    
    ..(eventName, handler);
    
     (. && .) {
      .(eventName, handler);
    }
  }

  
  () {
     handler = ..(eventName);
     (handler) {
       {
        (data);
      }  (e) {
        .(, e);
      }
    }
  }

  
  () {
    ..(eventName);
     (.) {
       handler = ..(eventName);
       (handler) {
        ..(eventName, handler);
      }
    }
  }

  
  () {
     (.) {
      ..();
      . = ;
    }
    
    . = ;
    . = ;
     (isManual) {
      . = ; 
      .(, { isManual });
      .();
    }
  }

  
  () {
    . = ;
    . = ;
    .(options);
  }

  
  () {
    . = .();
    
     (.) {
      .();
    }
  }
}


  sseClient =  ();