SSE 與 WebSocket 作用相似，都是建立瀏覽器與服務(wù)器之間的通信渠道，然后服務(wù)器向?yàn)g覽器推送信息SSE 是單向通道，只能服務(wù)器向?yàn)g覽器發(fā)送，因?yàn)榱餍畔⒈举|(zhì)上就是下載。如果瀏覽器向服務(wù)器發(fā)送信息，就變成了另一次 HTTP 請(qǐng)求

使用方法?

Server-Sent Events 教程 - 阮一峰的網(wǎng)絡(luò)日志https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

缺點(diǎn):不可以比如請(qǐng)求頭中加token等

 getSSE() {
      return new Promise((resolve, reject) => {
        let base = process.env.VUE_APP_SYSTEMURL;
        let url = `${base}/server/sampleRemovePush/sse`;
        if (window.EventSource) {
          this.SSE = new EventSource(url);
          this.SSE.addEventListener(
            "open",
            e => {
              console.log("建立連接。。。", e);
            },
            false
          );
          this.SSE.addEventListener(
            "message",
            event => {
              console.log("ebent", event);
              resolve(event);
            },
            false
          );
          this.SSE.addEventListener(
            "error",
            event => {
              // readyState連接狀態(tài): 0 - connecting; 1 - open; 2 - closed;
              if ((event.readyState = EventSource.CLOSED)) {
                console.log("sse錯(cuò)誤------", event);
                reject("請(qǐng)求錯(cuò)誤!");
              } else {
                resolve(event);
              }
            },
            false
          );
          // this.SSE.addEventListener("close", event => {
          //   console.log("我要關(guān)閉啦", event.type);
          //   this.SSE.close();
          // });
        } else {
          console.log("你的瀏覽器不支持SSE");
        }
      });
    },

?如果加自定義參數(shù)可以使用三方插件event-source-polyfill

GitHub - Yaffle/EventSource: a polyfill for http://www.w3.org/TR/eventsource/a polyfill for http://www.w3.org/TR/eventsource/. Contribute to Yaffle/EventSource development by creating an account on GitHub.https://github.com/Yaffle/EventSource/使用方法

npm install event-source-polyfill

import {EventSourcePolyfill} from 'event-source-polyfill';

  let base = process.env.VUE_APP_SYSTEMURL;
      let url = `${base}/server/sampleRemovePush/sse`;
      let { access_token } = this.$store.state.login.login;
      var es = new EventSourcePolyfill(url, {
        headers: {
          Authorization: access_token ? `Bearer${access_token}` : ""
        }
      });

      es.onopen = function(event) {
        console.log("連接成功", event);
      };

      es.onmessage = function(event) {
        // to to something…
        console.log("接收信息", event);
      };

      es.onerror = function(error) {
        // 監(jiān)聽(tīng)錯(cuò)誤
        console.log("錯(cuò)誤", error);
      };

可?以看到token是有加上去的?

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-660455.html

到了這里，關(guān)于Server-Sent Events（以下簡(jiǎn)稱 SSE）及event-source-polyfill使用單向長(zhǎng)連接(后臺(tái)主動(dòng)向前端推送)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！