概述

不论是GPT还是文心一言，在回答的时候类似于打字机式的将答案呈现给我们，这样的交互一方面比较友好，另一方面，当答案比较多、生成比较慢的时候也能争取一些答案的生成时间。本文后端使用express和stream，使用SSE将结果逐渐输出，前端使用v-md-editor对返回的结果进行呈现。

实现效果

实现

1. 后端

const stream = require("stream");
const R = require('../utils/result')

let sse = null,
  contentId = 0,
  flag = 0;

function toDataString(data) {
  if (typeof data === "object") return toDataString(JSON.stringify(data));
  return data
    .split(/\r\n|\r|\n/)
    .map((line) => `data: ${line}\n`)
    .join("");
}

const messageStr = `JavaScript中常用的排序算法有以下几种：

1. 冒泡排序

冒泡排序是一种简单的排序算法，它重复地遍历要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。

\`\`\`javascript
function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }
    return arr;
}
\`\`\`

2. 选择排序

选择排序是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排序的数据元素排完。

\`\`\`javascript
function selectionSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        var minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
    }
    return arr;
}
\`\`\`

3. 插入排序

插入排序的工作原理是通过构造一个有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。

\`\`\`javascript
function insertionSort(arr) {
    var len = arr.length;
    for (var i = 1; i < len; i++) {
        var key = arr[i];
        var j = i - 1;
        while (j >= 0 && arr[j] > key) {
            arr[j + 1] = arr[j];
            j--;
        }
        arr[j + 1] = key;
    }
    return arr;
}
\`\`\`

4. 快速排序

快速排序是一种高效的排序算法，它的基本思想是使用分治法。

\`\`\`javascript
function quickSort(arr, left = 0, right = arr.length - 1) {
    if (left < right) {
        let pivotIndex = partition(arr, left, right);
        quickSort(arr, left, pivotIndex - 1);
        quickSort(arr, pivotIndex + 1, right);
    }
    return arr;
}

function partition(arr, left, right) {
    let pivotValue = arr[right];
    let pivotIndex = left;
    for (let i = left; i < right; i++) {
        if (arr[i] <= pivotValue) {
            [arr[i], arr[pivotIndex]] = [arr[pivotIndex], arr[i]];
            pivotIndex++;
        }
    }
    [arr[pivotIndex], arr[right]] = [arr[right], arr[pivotIndex]];
    return pivotIndex;
}
\`\`\`

5. 归并排序

归并排序是建立在归并操作上的一种有效的排序算法，效率为O(nlogn)。

\`\`\`javascript
function mergeSort(arr) {
    if (arr.length < 2) {
        return arr;
    }
    var mid = Math.floor(arr.length / 2);
    var left = arr.slice(0, mid);
    var right = arr.slice(mid);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
    var result = [];
    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }
    while (left.length) {
        result.push(left.shift());
    }
    while (right.length) {
        result.push(right.shift());
    }
    return result;
}
\`\`\`

以上就是JavaScript中常见的几种排序算法，每种算法都有其适用的场景和优缺点，根据实际需求选择合适的排序算法可以提高程序的运行效率。`

const gptController = {
  getAnswer: async function (req, res, next) {
    // 触动定时触发
    let index = 0
    clearInterval(flag)
    flag = setInterval(() => {
      const r = new R();
      if(index < messageStr.length) {
        const message = {
          data: r.ok({
            msg: messageStr.slice(0, index + 1)
          }),
          event: "dynamicUpdate", // 事件类型，需要客户端添加对应的事件监听
          id: ++contentId,
          retry: 2000,
        };
        sse?.write(message);
        index += 1
      } else {
        const message = {
          data: r.ok({
            msg: 'end'
          }),
          event: "dynamicUpdate", // 事件类型，需要客户端添加对应的事件监听
          id: ++contentId,
          retry: 2000,
        };
        sse?.write(message);
        clearInterval(flag)
      }
    }, 60);

    res.writeHead(200, {
      "Content-Type": "text/event-stream; charset=utf-8",
    });
    sse = new stream.Transform({ objectMode: true });

    sse._transform = (message, encoding, callback) => {
      if (message.comment) sse.push(`: ${message.comment}\n`);
      if (message.event) sse.push(`event: ${message.event}\n`);
      if (message.id) sse.push(`id: ${message.id}\n`);
      if (message.retry) sse.push(`retry: ${message.retry}\n`);
      if (message.data) sse.push(toDataString(message.data));
      sse.push("\n");
      callback();
    };
    sse.write(":ok\n\n");
    sse.pipe(res);
  },
};

module.exports = gptController;

2. 前端实现

在主入口引入v-md-editor。

// main.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import '@kangc/v-md-editor/lib/style/preview.css';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
import '@kangc/v-md-editor/lib/plugins/tip/tip.css';
import Prism from 'prismjs';

VMdPreview.use(vuepressTheme, { Prism });
VMdPreview.use(createCopyCodePlugin());
VMdPreview.use(createLineNumbertPlugin());

const app = createApp(App)
app.use(VMdPreview).mount('#app')

页面引用v-md-preview。

<template>
  <div class="app">
    <v-md-preview :text="mdText"></v-md-preview>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mdText: "",
    };
  },
  mounted() {
    const that = this
    const es = new EventSource("http://localhost:8080/gpt/sse");
    es.addEventListener("dynamicUpdate", (e) => {
      const data = JSON.parse(e.data);
      const msg = data.data.msg;
      if (msg === "end") {
        es.close();
      } else {
        that.mdText = msg
      }
    });
    es.onopen = () => {
      console.log("已开启。。。");
    };
    es.onmessage = (e, me) => {
      console.log("默认推送:" + e.data);
    };
    es.onerror = (err) => {
      console.log(err);
    };
  },
};
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
}
</style>