Los eventos enviados por el servidor (en lo sucesivo, SSE) y el evento-fuente-polyfill utilizan una conexión larga unidireccional (el fondo se envía activamente al front-end)

SSE es similar a WebSocket en que establece un canal de comunicación entre el navegador y el servidor, y luego el servidor envía información al navegador. SSE es un canal unidireccional que solo se puede enviar desde el servidor al navegador, porque la transmisión la información se está descargando esencialmente. Si el navegador envía información al servidor, se convierte en otra solicitud HTTP.

Instrucciones 

Tutorial de eventos enviados por el servidor: blog de Ruan Yifeng https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

Desventajas: no es posible, como agregar token en el encabezado de la solicitud, etc.

 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连接状态: 0 - connecting; 1 - open; 2 - closed;
              if ((event.readyState = EventSource.CLOSED)) {
                console.log("sse错误------", event);
                reject("请求错误!");
              } else {
                resolve(event);
              }
            },
            false
          );
          // this.SSE.addEventListener("close", event => {
          //   console.log("我要关闭啦", event.type);
          //   this.SSE.close();
          // });
        } else {
          console.log("你的浏览器不支持SSE");
        }
      });
    },

 Si agrega parámetros personalizados, puede usar el complemento de terceros event-source-polyfill

GitHub - Yaffle/EventSource: un polyfill para http://www.w3.org/TR/eventsource/ un polyfill para http://www.w3.org/TR/eventsource/. Contribuya al desarrollo de Yaffle/EventSource creando una cuenta en 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) {
        // 监听错误
        console.log("错误", error);
      };

Puedes ver que el token ha sido agregado. 

Supongo que te gusta

Origin blog.csdn.net/qq_40190624/article/details/126380533
Recomendado
Clasificación