申明：本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

前言

《金融行业前端探索》专题系列文章将构建现代化金融应用的技术与实践，提供理论知识和技术原理，还通过丰富的案例和实例，带大家一步步实现一个简易的金融终端系统，帮助读者将所学知识应用于实际项目中。此系列文章，适用于对金融行业前端感兴趣的同学，以及对前端跨端、可视化、AI技术、大数据等方面感兴趣的同学。需要提前了解技术：electron、vite、vue，Echart和其他前端基础知识等。

本文为《金融行业前端探索》第4篇文章：金融行业大模型前端对话Chat搭建与实现，包含以下内容：

【1】金融行业大模型的能力和意义

【2】金融行业大模型前端Chat对话技术探索

【3】Vue构建的项目如何接入SSE

【4】Vue搭建对话Chat组件思考和一些实现

上一篇：《金融行业前端探索》三、实现Vue3+ECharts可定制化轻量金融图表

本项目完整代码地址：electron-vite-vue-ft(持续更新代码)

一、金融行业大模型的能力和意义

金融行业大模型可以为金融机构的投顾、客服、运营、合规、投研、交易等业务系统注入AI能力，成为金融从业人员的智能助手。它通常具备不限于以下能力：

精准智能洞察客户需求：借助大模型动态调整问题顺序、难度和深度，自动分析总结客户需求、风险偏好和投资目标。
高效提升投顾工作效率：根据会话记录分析客户意图，自动检索信息，包括持仓、资讯研报、产品信息等，提供观点总结能力。
全面提升投顾专业能力：辅助投顾快速生成专业观点和投资建议，给客户推荐适合的金融产品和资讯。
提升客户满意度：帮助投顾及时洞察客户情绪变化，响应客户个性化需求，提供安抚话术及行动建议。
实时市场数据分析：提供实时数据分析功能，使投顾能够随时跟踪市场动态，做出更准确的分析和建议。
智能文章润色：AI创作台不仅可以生成内容，还能智能润色文章，确保语法、风格和专业度符合业务要求。
定制化报告模板：提供多种定制化模板，让投资顾问能够根据需要快速生成不同类型的报告，大幅提升工作效率。
可信度和合规性：AI创作台的内容生成经过精心训练和审核，确保内容高度可信且符合金融法规，内容满足合规要求。

二、金融行业大模型前端Chat对话技术探索

金融行业大模型的结构非常复杂，里面有很多人工智能的知识领域，想要一个前端开发者理解并学习里面的知识显然不太现实，但是从前端这个角度出发，我们最关心的是「对话」层的实现

我们以ChatGPT为例，ChatGPT（基于 GPT-3.5 架构）的网络请求流式输出支持，使用 SSE（Server-Sent Events，服务器推送事件），当然我们也会详情另外一个技术WebSocket似乎也能实现。

SSE 与 WebSocket 相比，有一些区别。WebSocket 提供了双向通信通道，而 SSE 是单向的，仅支持服务器向客户端的推送。SSE 是基于 HTTP 的，使用标准的 HTTP 协议和长连接，而 WebSocket 则使用自定义的协议。因此，SSE 更加适用于服务器向客户端推送实时更新的场景。

什么是流式输出

流式输出是指数据以流的形式逐步生成和传输，而不是一次性生成并完整地发送。数据可以在生成的同时逐步发送给接收方。服务器可以根据数据的生成进度，逐步将数据发送给客户端，而不用等待所有数据生成完毕。这样可以实现实时的数据传输和处理，减少了等待时间，提高了用户体验。在金融行业中实时消息推送、股票行情更新等场景是比较常见的。

为什么大模型LLM需要使用SSE

实时性：LLM通常需要一定时间来生成较长的响应文本。使用SSE，生成的响应可以在生成的同时逐步地传输给客户端，实现实时性的输出。这使得用户能够更早地获取到部分响应文本，而不需要等待所有响应生成完成。
逐步处理：由于LLM的生成过程可能耗时较长，特别是对于复杂的查询和长文本的生成，SSE允许逐步传输生成的响应。这样，服务器可以在生成的同时将部分响应发送给客户端，而不需要等待整个响应生成完毕。这种逐步处理的方式可以减少等待时间，并且在生成过程中可以灵活地控制生成的速度和间隔。
响应流式展示：使用SSE，客户端可以实时地接收到生成的响应文本，并将其逐步展示给用户。这对于长文本的输出或需要长时间生成的任务非常有用，用户可以在生成过程中逐步看到结果，而不需要等待全部生成完成。
减少内存压力：对于大模型的LLM，生成的响应文本可能非常长，完整地将响应保存在内存中并一次性传输给客户端可能会对服务器的内存资源造成很大压力。而使用SSE，服务器可以逐步地生成和传输响应，减少了对内存的需求，使得服务器能够更好地处理大规模和复杂的响应。

三、Vue构建的项目如何接入SSE

封装一个 SSE 服务的方法，来处理 SSE 连接和事件

js 复制代码

// sseService.js

export default class SSEService {
  constructor(endpoint) {
    this.endpoint = endpoint;
    this.eventSource = null;
    this.messageListeners = [];
    this.errorListeners = [];
  }

  connect() {
    this.eventSource = new EventSource(this.endpoint);
    this.eventSource.addEventListener("message", this.handleSSEMessage);
    this.eventSource.addEventListener("error", this.handleSSEError);
  }

  disconnect() {
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
    }
  }

  handleSSEMessage = (event) => {
    this.messageListeners.forEach((listener) => listener(event.data));
  };

  handleSSEError = (event) => {
    this.errorListeners.forEach((listener) => listener(event));
  };

  addMessageListener(listener) {
    this.messageListeners.push(listener);
  }

  removeMessageListener(listener) {
    this.messageListeners = this.messageListeners.filter(
      (l) => l !== listener
    );
  }

  addErrorListener(listener) {
    this.errorListeners.push(listener);
  }

  removeErrorListener(listener) {
    this.errorListeners = this.errorListeners.filter((l) => l !== listener);
  }
}

在上面的示例中，创建了一个 SSEService 类，它接受一个 SSE 端点的 URL 作为参数。该类提供了以下方法：

connect(): 连接到 SSE 服务器，创建 SSE 事件源对象，并注册消息和错误事件的处理程序。
disconnect(): 断开 SSE 连接，关闭事件源对象。
addMessageListener(listener): 添加消息事件的监听器。
removeMessageListener(listener): 移除消息事件的监听器。
addErrorListener(listener): 添加错误事件的监听器。
removeErrorListener(listener): 移除错误事件的监听器

这里重点讲一下，new EventSource(url) 是用于创建一个 SSE（Server-Sent Events）连接的 JavaScript 中的内置对象。它是一种用于接收来自服务器的实时事件和数据的机制。它的兼容性情况如下：

一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件，此连接会一直保持开启直到通过调用 EventSource.close()关闭。

注意：当不使用 HTTP/2 时，服务器发送事件（SSE）受到打开连接数的限制，这个限制是对于浏览器 的，并且设置为非常低的数字（6），打开多个选项卡时可能会特别痛苦。在 Chrome 和 Firefox 中，这个问题已被标记为"不会修复"。这个限制是每个浏览器和域名的，这意味着我们可以在所有标签页中打开 6 个 SSE 连接到 www.example1.com，以及另外 6 个 SSE 连接到 www.example2.com（来源：Stackoverflow）。当使用 HTTP/2 时，最大并发 HTTP 流的数量是由服务器和客户端协商的（默认为 100）

在Vue 项目中，可以按照以下方式使用 SSEService：

js 复制代码

import SSEService from "./sseService.js";

export default {
  data() {
    return {
      myData: ""
    };
  },
  created() {
    this.sseService = new SSEService("/sse-endpoint");
    this.sseService.addMessageListener(this.handleSSEMessage);
    this.sseService.connect();
  },
  beforeDestroy() {
    this.sseService.disconnect();
  },
  methods: {
    handleSSEMessage(data) {
      this.myData = data;
    }
  }
};

四、Vue搭建对话Chat组件思考和一些实现

从布局层面来说，基本上大模型前端对话Chat界面趋向统一，左右结构。即左侧新建对话（或者创建机器人），对话列表，右侧主要显示对话过程列表，以及右侧底部输入框。当然也可以根据实际情况进行做一些拓展

拉取聊天记录

我们可以借助浏览器的持久化存储解决方案 localStorage将数据保存在用户的本地浏览器中和配合接口拉取一起来处理聊天记录

在组件加载时，首先检查是否存在已经缓存的聊天数据
如果存在缓存数据，则从 localStorage 中获取该数据。如果没有缓存数据，通过接口去获取
将获取到的数据填充到 initialChats 属性中，更新新的内容到浏览器缓存中，并在浏览器空闲时间，进行同步到数据库中

其他一些交互

受控思考

当我们在一次交谈的时候，避免SSE在推送过程中，我们继续输入交谈内容，此时需要做个限制，可以通过服务端推送内容的过程，输入框需要做一些等待，不让继续输入交流提问，也可以做到手动取消或者暂停。

有些做了token 使用次数限制，比如每天免费使用多少次，超过次数不让进行输入交流内容

自定义对话内容

金融行业来讲，我们提问的内容，期待回复的内容形式是很多的，比如持仓、资讯研报、产品信息等，这些数据的展现形式基本上涵盖了，图表类、表格类、文本类、图片类、文章等，这些对于前端来说又是可以细分为带金融业务组件，所以我们在设计自定义对话内容组件的时候。自定义对话内容展示区域的组件，可以设计以下几个api:

标题渲染函数
内容渲染函数
操作渲染函数
头像渲染函数
自定义渲染函数

总结

本文主要带大家了解金融行业大模型的能力和意义，从前端的角度去思考金融行业大模型前端Chat对话技术，Vue构建的项目如何接入SSE，Vue搭建对话Chat组件思考和一些实现。