概述

不論是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 = 0clearInterval(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 = thisconst 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>