使用post请求建立长连接实现sse，接收后端主动发来的消息，实现chat-gpt的弹字效果，EventSource的应用

原创

已于 2023-09-28 11:51:41 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-09-26 13:41:08 首次发布

最近在做一个chat相关的功能，然后由于接口返回特别特别慢，所以需要搞一个慢慢等待的效果，就是接口一个单词一个单词的返回，然后前端收到一个展示一个，提升用户体验。

看其他文档都说使用EventSource即可，就是传说中的sse【server-send-events】。记录下使用方法。

import { fetchEventSource } from '@microsoft/fetch-event-source'

  getStream(payload: any, url: string) {
    const token = access_token;

    let that = this;

    let headers: any = {
      Authorization: `Bearer ${token}`,
    };
    if (url == 'content') {
      headers = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      };
    }
    try {
      this.fetchSource = fetchEventSource(
        `${serviceUrl}/api/v1/${url}`,
        {
          method: 'POST',
          headers: headers,
          signal: this.ctrl.signal,
          openWhenHidden: true,
          body: url == 'summarize-content' ? JSON.stringify(payload) : payload,
          async onopen(response) {
            that.output = '';
            if (