快捷導(dǎo)航

vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析

更新時(shí)間：2023年10月17日 14:59:54 作者：如晴天似雨天~

SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長輪詢和HTTP 流,而且能在斷開連接時(shí)自動確定何時(shí)重新連接,本文重點(diǎn)給大家介紹

SSE簡介

SSE（Server-Sent Events，服務(wù)器發(fā)送事件）是圍繞只讀Comet 交互推出的API 或者模式。

SSE API允許網(wǎng)頁獲得來自服務(wù)器的更新，用于創(chuàng)建到服務(wù)器的單向連接，服務(wù)器通過這個(gè)連接可以發(fā)送任意數(shù)量的數(shù)據(jù)。服務(wù)器響應(yīng)的MIME類型必須是text/event-stream，而且是瀏覽器中的JavaScript API 能解析格式輸出。

SSE 支持短輪詢、長輪詢和HTTP 流，而且能在斷開連接時(shí)自動確定何時(shí)重新連接。

使用原因

之前系統(tǒng)通知公告等信息是通過每隔一段時(shí)間調(diào)用接口來判斷是否有新的公告或通知，最開始想到的是用websocket，但是這場景只需要服務(wù)端往客戶端發(fā)送消息，所以商量后決定使用SSE。

// 使用這個(gè)庫可以添加的請求頭（比如添加token）
import { EventSourcePolyfill } from "event-source-polyfill";
import { getToken } from '@/utils/user'
export default {
  data() {
    return {
      eventSource: null
    }
  },
  mounted() {
    this.createSSE()
  },
  methods: {
    createSSE(){
      if(window.EventSource){
        // 根據(jù)環(huán)境的不同，變更url
        const url = process.env.VUE_APP_MSG_SERVER_URL
        // 用戶userId
        const { userId } = this.$store.state.user
        this.eventSource = new EventSourcePolyfill(
          `${url}/sse/connect/${userId}`, {
          // 設(shè)置重連時(shí)間
          heartbeatTimeout: 60 * 60 * 1000,
          // 添加token
          headers: {
             'Authorization': `Bearer ${getToken()}`,
          },
        });
        this.eventSource.onopen = (e) => {
          console.log("已建立SSE連接~")
        }
        this.eventSource.onmessage = (e) => {
          console.log("已接受到消息:", e.data)
        }
        this.eventSource.onerror = (e) => {
          if (e.readyState == EventSource.CLOSED) {
            console.log("SSE連接關(guān)閉");
          } else if (this.eventSource.readyState == EventSource.CONNECTING) {
            console.log("SSE正在重連");
            //重新設(shè)置token
            this.eventSource.headers = {
              'Authorization': `Bearer ${getToken()}`
            };
          } else {
            console.log('error', e);
          }
        };
      } else {
        console.log("你的瀏覽器不支持SSE~")
      }
    },
    beforeDestroy() {
      if(this.eventSource){
          const { userId } = this.$store.state.user
          // 關(guān)閉SSE
          this.eventSource.close();
          // 通知后端關(guān)閉連接
          this.$API.system.msg.closeSse(userId)
          this.eventSource = null
          console.log("退出登錄或關(guān)閉瀏覽器，關(guān)閉SSE連接~")
       }
    },

在createSSE被調(diào)用后，這個(gè)請求會一直在pending狀態(tài)