v-md-editor和SSE实现ChatGPT的打字机式输出

概述

不论是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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

页面引用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44