webscoket 渲染AI返回流式 markdown 格式数据

干翻全岛蛙蛙  金牌会员 | 2025-3-12 13:28:10 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 987|帖子 987|积分 2961

背景

        去年的时候做了一个对接ai 模块的业务，当时因为那个模块说的返回的都是文章纯文本，所以没有分析markdown，今年来了就弄一个PC H5的ai版本 本文章重要就写 写这次ai的心路进程。
重要就三个问题
1. 对话框
2. websocket 发消息/接消息
3. markdown 的渲染
OK 开始
重要是写在vue里面的  去年的是写在blade模板里面的，但是思路都大致差不多
页面结构这个样子

问答完这样 

和市面上的AI 问答基本上差不多（测试环境 请忽略思考用时）
渲染地区分为思考的地区 和 正式回答的地区，因为之前的时候是在php里面写的blade模板，所以利用的innerHtml 现在是在vue里面所以利用v-html 关于这俩后面还有个问题，后面再提,
基础页面都很好处理 重要就是textarea 的问题 下面是处理好的textarea结构
  1. <div :class="['footer', focusText ? 'borderi' : '']">
  2.   <div class="chat-input">
  3.     <span>{{ message }}</span>
  4.     <textarea
  5.       ref="textarea"
  6.       v-model="message"
  7.       inputmode="text"
  8.       placeholder="试试输入关键词引导AI生成点评 shift + enter 换行"
  9.       rows="1"
  10.       @keydown.enter.exact.prevent="sendMessage"
  11.       @keydown.shift.enter.prevent="insertLineBreak"
  12.       @blur="blurTeaxarea"
  13.       @focus="focusTeaxarea"
  14.     />
  15.     <div class="uplaod" @click="sendMessage">
  16.       <img
  17.         :style="{ cursor: message ? 'pointer' : 'not-allowed' }"
  18.         :src="
  19.           message
  20.             ? require('@/assets/images/ai-submit-active.png')
  21.             : require('@/assets/images/ai-submit.png')
  22.         "
  23.         alt=""
  24.       >
  25.     </div>
  26.   </div>
  27. </div>
复制代码

js部门
  1. sendMessage() {
  2.   if (this.isComposing) return // 中文输入法组合期间不发送
  4.   if (this.message == '' && !this.fileList.length) {
  5.     this.$message.warning('请输入后提问')
  6.     return
  7.   }
  8.   // 判断wss 的连接状态
  9.   this.$refs.textarea.blur()
  10.   this.focusText = false
  11.   this.state = 2
  12.   this.startChat()
  13. },
  14. insertLineBreak(event) {
  15.   if (this.message.trim() == '') {
  16.     this.$message.warning('请输入后再换行')
  17.     event && event.preventDefault()
  18.     return
  19.   }
  20.   document.execCommand('insertLineBreak') // 更好的换行兼容性
  21.   this.updateMessage()
  22. },
  24. this.$refs.textarea.addEventListener(
  25.   'compositionstart',
  26.   this.handleComposition
  27. )
  28. this.$refs.textarea.addEventListener(
  29.   'compositionend',
  30.   this.handleComposition
  31. )
  32. // 中文输入法状态处理
  33. handleComposition(e) {
  34.   this.isComposing = e.type !== 'compositionend'
  35. },
复制代码

insertLineBreak 重要是处理huan
css样式 原来UI图是渐变的边框但是和border-radius 冲突了，这里就不写怎么实现的了
  1. .footer {
  2.       margin: 10px 0;
  3.       border: 1px solid #f0f1f4;
  4.       border-radius: 10px;
  5.       overflow: hidden;
  6.       padding: 6px 10px;
  7.       .chat-input {
  8.         position: relative;
  9.         display: flex;
  10.         align-items: flex-end;
  11.         background: #ffffff;
  12.         max-height: 200px;
  13.         span {
  14.           display: block;
  15.           min-height: 42px;
  16.           white-space: pre-wrap;
  17.           word-wrap: break-word;
  18.           visibility: hidden;
  19.           padding: 10px;
  20.           width: calc(100% - 62px);
  21.           box-sizing: border-box;
  22.           font-size: 14px;
  23.           line-height: 1.5;
  24.         }
  25.         textarea {
  26.           font-size: 14px;
  27.           width: calc(100% - 62px);
  28.           background: #ffffff;
  29.           padding: 10px;
  30.           border: none;
  31.           box-sizing: border-box;
  32.           resize: none;
  33.           overflow-y: auto;
  34.           scrollbar-width: none; /* 隐藏滚动条（Firefox） */
  35.           -ms-overflow-style: none; /* 隐藏滚动条（IE 10+） */
  36.           resize: none;
  37.           height: 100%;
  38.           position: absolute;
  39.           left: 0;
  40.           top: 0;
  41.           line-height: 1.5;
  42.           &::-webkit-scrollbar {
  43.             display: none;
  44.           }
  45.         }
  46.         textarea::placeholder {
  47.           color: #999;
  48.           text-align: left;
  49.           // text-align: center; /* 水平居中 */
  50.           vertical-align: middle; /* 垂直居中 */
  51.         }
  52.         .uplaod {
  53.           // width: 42px;
  54.           height: 42px;
  55.           z-index: 1;
  56.           background: #fff;
  57.           display: flex;
  58.           align-items: center;
  59.           cursor: pointer;
  60.         }
  61.         img {
  62.           width: 60px;
  63.           height: 36px;
  64.         }
  65.       }
  66.     }
  67.     .borderi {
  68.       border-color: #ff9327;
  69.       // border-image: linear-gradient(0deg, #FF9327 0%, #FF5627 100%) 1;
  70.       border-radius: 10px;
  71.       // border-radius: 20px;
  72.       // background-clip: padding-box, border-box;
  73.       // background-origin: padding-box, border-box;
  74.       // background-image: linear-gradient(to right, #222, #222),
  75.       //   linear-gradient(90deg, #8f41e9, #578aef);
  76.     }
复制代码
 关于websocket ，当初想的是想用sse的但是 小程序不支持sse所以后面都选websocket了，
  1. initWebsocket(msg) {
  2.   // 初始化 WebSocket 连接
  3.   this.websocket = new WebSocket(process.env.VUE_APP_WEBSOCKETBASE_URL)
  4.   // 连接成功建立的回调方法
  5.   const cb = () => {
  6.     this.websocket.send(JSON.stringify(msg))
  7.   }
  8.   this.websocket.addEventListener('open', () => {
  9.     let content
  10.     if (this.sessionId) {
  11.       const obj = {}
  12.       obj.sessionId = this.sessionId
  13.       obj.token = getToken()
  14.       content = obj
  15.     } else {
  16.       content = {
  17.         sessionId: null,
  18.         token:getToken()
  19.       }
  20.     }
  21.     const msgToken = { type: 'auth', content: content }
  22.     this.websocket.send(JSON.stringify(msgToken))
  23.     this.callbackWebSocket(cb)
  24.   })
  25. },
  26. callbackWebSocket(cb) {
  27.   // 收到消息事件
  28.   this.websocket.onmessage = (msg) => {
  29.     // 如果返回对象里面有结束标志的话 就把对象存起来
  30.     const res = JSON.parse(msg.data)
  31.     // console.log("msg", msg);
  33.     if (res.type == 'connected') {
  34.       // 开启会话，返回websocketid
  35.       if (cb) {
  36.         cb()
  37.       }
  38.       this.qaData[this.indexUse].socketId = res.content
  39.       this.socketId = res.content
  40.       //
  41.     } else if (res.type == 'new_session') {
  42.       // 创建会话，返回会话id、title
  43.       //
  44.       // if (res.content.length > 19) {
  45.       const content = JSON.parse(res.content)
  46.       this.qaData[this.indexUse].sessionId = content.sessionId
  47.       this.sessionId = content.sessionId
  48.       this.qaData[this.indexUse].id = content.id
  49.       // }
  50.     } else if (res.type == 'finish' || res.type == 'stop') {
  51.       // 有可能超时
  52.       this.$set(this.qaData[this.indexUse].data.answer, 'id', res.content)
  53.       // 停止或回答完
  54.       this.doingAnswer = false
  55.       this.$set(this.qaData[this.indexUse].data.answer, 'status', 2)
  56.       const loading = document.querySelector('#loading')
  57.       if (loading && loading.parentNode) {
  58.         loading.parentNode.removeChild(loading)
  59.       }
  60.       this.scrollTop = false
  61.       this.scrolltoBottom()
  62.     } else if (res.type == 'answer') {
  63.       // 答案
  64.       if (res.thinking == 1) {
  65.         this.$set(this.qaData[this.indexUse].data.answer, 'thinkFlag', true)
  67.         // 计算时间
  68.         this.thinkingTime = +new Date()
  69.         this.thinking = true
  70.         this.$forceUpdate()
  71.       } else if (res.thinking == 3) {
  72.         // 计算时间
  73.         const thinkingTime = Math.ceil(
  74.           (+new Date() - this.thinkingTime) / 1000
  75.         )
  76.         this.$set(
  77.           this.qaData[this.indexUse].data.answer,
  78.           'thinkingTime',
  79.           thinkingTime
  80.         )
  81.         this.thinking = false
  82.         console.log(2)
  83.       } else if (res.thinking == 2) {
  84.         // 正在思考中
  85.         if (!this.qaData[this.indexUse].data) return
  86.         if (res.content.length) {
  87.           const thinkContent =
  88.             this.qaData[this.indexUse].data.answer.thinkContent || ''
  89.           this.$set(
  90.             this.qaData[this.indexUse].data.answer,
  91.             'thinkContentCopy',
  92.             thinkContent + res.content
  93.           )
  94.           this.$set(
  95.             this.qaData[this.indexUse].data.answer,
  96.             'thinkContent',
  97.             thinkContent + res.content
  98.           )
  99.           this.$forceUpdate()
  100.           this.scrolltoBottom()
  101.         }
  102.       } else {
  103.         if (!res.content) return
  104.         const answerCopy =
  105.           this.qaData[this.indexUse].data.answer.answerCopy || ''
  106.         this.$set(
  107.           this.qaData[this.indexUse].data.answer,
  108.           'answerCopy',
  109.           answerCopy + res.content
  110.         )
  112.         this.streamBuffer += res.content + ''
  113.         const elImg = '![diy-loading-img](/img/loading.gif)'
  114.         this.rawMarkdown += this.streamBuffer
  115.         console.log('this.rawMarkdown', this.rawMarkdown)
  117.         const mdSring = this.md.render(this.rawMarkdown + elImg)
  118.         this.$set(this.qaData[this.indexUse].data.answer, 'answer', mdSring)
  119.         this.$forceUpdate()
  121.         this.streamBuffer = ''
  123.         // 需要the-main 滚动到底部
  124.         console.log(4)
  125.         this.scrolltoBottom()
  126.       }
  127.     } else if (res.type == 'error') {
  128.       console.log('error', res, this.indexUse)
  129.       this.doingAnswer = false
  130.       this.thinking = false
  131.     } else if (res.type == 'timeout') {
  132.       // 超时
  133.       const answer = this.qaData[this.indexUse].data.answer.answer || ''
  134.       this.$set(
  135.         this.qaData[this.indexUse].data.answer,
  136.         'answer',
  137.         answer + res.content
  138.       )
  139.       this.$set(this.qaData[this.indexUse].data.answer, 'status', 3)
  140.       this.$refs['a' + this.indexUse][0].innerHTML = res.content || ''
  141.       this.doingAnswer = false
  142.       this.streamBuffer = ''
  143.       this.rawMarkdown = ''
  144.       this.scrolltoBottom()
  145.     }
  146.   }
  147.   // 连接关闭事件
  148.   this.websocket.onclose = function () {
  149.     console.log('Socket已关闭')
  150.     this.doingAnswer = false
  151.   }
  152.   // 发生了错误事件
  153.   this.websocket.onerror = function () {
  154.     // alert('Socket发生了错误')
  155.   }
  156. },
  157. startChat() {
  158.   const msg = { type: 'chat', content: q }
  159.   if (typeof WebSocket == 'undefined') {
  160.     console.log('遗憾：您的浏览器不支持WebSocket')
  161.     this.$message.warning('遗憾：您的浏览器不支持WebSocket')
  162.   } else {
  163.     if (this.websocket && this.websocket.readyState == 1) {
  164.       // 已经连接 了
  165.       console.log('===', msg)
  167.       this.websocket.send(JSON.stringify(msg))
  168.     } else {
  169.       this.initWebsocket(msg)
  170.     }
  171.   }
  172. }
复制代码
 如果有seesionId的话 就可以继承毗连websockt利用，如果状态不是毗连状态的话 就去重新毗连，对返回的数据类型 举行归纳重新渲染数据 ，我是把他存在了一个qaData里面 ，qaData的数据结构如下
  1. this.qaData[index + 1] = {
  2.   socketId: '',
  3.   sessionId: item.sessionId,
  4.   id: item.id,
  5.   listIndex: index + 1,
  6.   data: {
  7.     question: item.question,
  8.     imageList,
  9.     answer: {
  10.       id: item.answerList && item.answerList[0].id,
  11.       status: item.status,
  12.       answer:
  13.         item.answerList && this.md.render(item.answerList[0].answer),
  14.       answerCopy: item.answerList && item.answerList[0].answer,
  15.       thinkContent: item.answerList && item.answerList[0].think,
  16.       thinkContentCopy: item.answerList && item.answerList[0].think,
  17.       thumbsUp: item.answerList ? item.answerList[0].thumbsUp : null,
  18.       thinkingTime:
  19.         item.answerList &&
  20.         item.answerList[0].thinkTime &&
  21.         Math.ceil(item.answerList[0].thinkTime / 1000),
  22.       thinkFlag: item.answerList && item.answerList[0].thinkTime,
  23.     },
  24.   },
复制代码
 这样可以兼顾回显，新建和回显都用同一套数据结构，比较方便
第三点markdown的渲染
先说上面innerHtml和v-html  因为最开始的时候是利用的innerHtml 然后这个版本是利用的v-html,最开始写的时候 我没有直接改变v-html 绑定的值而是利用innerHtml改变的，然后就出现了渲染中如果往上滚动的话 markdown格式就是丢失，我查了之后才发现 如果改变v-html 的innerHtml的话 就会有渲染问题，
我利用了markdown-it 插件 但是 直接引入有问题，这个项目没支持.mjs 的引入，所以利用dist/index.js 或者直接把min.js 复制一份放到项目标静态资源里面 ，我看了两种方式的打包后的结果巨细基本都是一样的。
在利用Markdown-it之前先要做些设置特殊处理一些 样式，例如表格，毗连。。。
  1. initMd() {
  2.   this.md = markdownit()
  3.   // 自定义代码块渲染器
  4.   this.md.renderer.rules.code_block = function (
  5.     tokens,
  6.     idx,
  7.     options,
  8.     env,
  9.     self
  10.   ) {
  11.     const token = tokens[idx]
  12.     const content = token.content
  13.     const lang = token.info ? token.info.trim() : ''
  15.     return `<div class="code-block"><pre><code class="language-${lang}" style="white-space: pre-wrap;">${content}</code></pre></div>`
  16.   }
  18.   this.md.renderer.rules.table_open = function () {
  19.     return '<div class="table-wrapper" style="overflow:auto;"><table border>'
  20.   }
  22.   this.md.renderer.rules.table_close = function () {
  23.     return '</table></div>'
  24.   }
  25.   this.md.renderer.rules.link_open = function (
  26.     tokens,
  27.     idx,
  28.     options,
  29.     env,
  30.     self
  31.   ) {
  32.     // 获取链接的 href 和 title 属性
  33.     const hrefIndex = tokens[idx].attrIndex('href')
  34.     const href = hrefIndex > -1 ? tokens[idx].attrs[hrefIndex][1] : null
  35.     const titleIndex = tokens[idx].attrIndex('title')
  36.     const title = titleIndex > -1 ? tokens[idx].attrs[titleIndex][1] : null
  38.     // 返回一个禁止点击的链接
  39.     return `<a href="${href}" class="no-href" data-link="a" title="${title}">`
  40.   }
  42.   this.md.renderer.rules.image = function (
  43.     tokens,
  44.     idx,
  45.     options,
  46.     env,
  47.     self
  48.   ) {
  49.     const token = tokens[idx]
  50.     const aIndex = token.attrIndex('src')
  51.     if (token.content == 'diy-loading-img') {
  52.       return `<img
  53.           id="loading"
  54.           src="/img/loading.gif"
  55.           style="width:20px;height:20px;vertical-align: middle;margin:0;"
  56.         />`
  57.     } else {
  58.       return `<img src="${token.attrs[aIndex][1]}" alt="${token.content}" />`
  59.     }
  60.   }
  61. }
复制代码
天生表格的时候外面加了一层 div 防止表格过于宽 ，链接 加了一个禁止点击 根据data-link="a" 事件委托举行处理

然后每次返回的数据 拼接渲染就行了
  1. this.streamBuffer += res.content + ''
  2. const elImg = '![diy-loading-img](/img/loading.gif)'
  3. this.rawMarkdown += this.streamBuffer
  4. console.log('this.rawMarkdown', this.rawMarkdown)
  6. const mdSring = this.md.render(this.rawMarkdown + elImg)
  7. this.$set(this.qaData[this.indexUse].data.answer, 'answer', mdSring)
  8. this.$forceUpdate()
复制代码
elImg 是每次文本后面的loading，this.forceUpdate() 因为是深层的对象，所以须要利用 逼迫渲染，大概就是这些，当然 还有更细节的处理方式

下面是一个对markdown流的处理
  1. // import MarkdownIt from 'markdown-it/dist/markdown-it.js'
  3. export class MarkdownStateMachine {
  4.   constructor() {
  5.     this.state = {
  6.       inCodeBlock: false,    // 是否在代码块内
  7.       codeBlockLanguage: '', // 代码块语言
  8.       inList: false,         // 是否在列表项中
  9.       listDepth: 0,          // 列表嵌套深度
  10.       inBlockquote: false,   // 是否在引用块中
  11.       tableStage: 0,          // 表格解析阶段 (0: 未开始, 1: 表头, 2: 分隔线, 3: 表体)
  12.       table: {
  13.         stage: 0,
  14.         header: [],
  15.         body: [],
  16.         buffer: []
  17.       },
  18.       activeBlock: null,
  19.     };
  20.     this.buffer = '';        // 原始未处理文本
  21.     this.openBlocks = [];    // 未闭合块堆栈
  22.     this.renderedHtml = '';  // 已安全渲染的HTML
  23.   }
  24.   getMd(md) {
  25.     this.md = md
  26.   }
  27.   // 更新状态机
  28.   updateState(chunk) {
  29.     const lines = chunk.split('\n');
  30.     lines.forEach(line => {
  31.       if (this.state.inCodeBlock) {
  32.         if (line.startsWith('```')) this.state.inCodeBlock = false;
  33.         return; // 代码块内的内容不触发其他状态变化
  34.       }
  36.       if (line.startsWith('```')) {
  37.         this.state.inCodeBlock = true;
  38.         // this.state.codeBlockLanguage = line.replace('```', '').trim();
  39.         // 处理代码块
  41.       } else if (/^(\*|\-|\+)\s/.test(line)) {
  42.         this.state.inList = true;
  43.         this.state.listDepth = line.match(/^\s*/)[0].length / 2; // 假设缩进为2空格
  44.       } else if (line.startsWith('> ')) {
  45.         this.state.inBlockquote = true;
  46.       } else if (line.includes('|') && line.includes('-')) {
  47.         this.state.tableStage = this.state.tableStage < 2 ? 2 : 3;
  48.         this.state.table.stage = this.state.tableStage
  49.       }
  50.     });
  51.   }
  54.   // 判断当前缓冲区是否可安全渲染
  55.   isSafeToRender(buffer) {
  56.     // if (this.state.inCodeBlock) return false;
  57.     // if (this.state.tableStage % 2 !== 0) return false; // 表格需要成对渲染
  58.     return true;
  59.   }
  61. }
复制代码
isSafeToRender() 可以判断 现在正在举行的是什么表格 或者 代码块啦，这样 就可以根据具体的需求来处理，例如，天生表格的时候加一个处理进度什么之类的。
大概就是这些，每年都有提升，还不错，加油！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

干翻全岛蛙蛙

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表