独立开发：高效集成大模型，看这篇就够了

目录

• 一、简介
  
• 二、集成原理
  
• 三、提示词管理
  
• 四、数据库设计
  
• 五、接口设计
  
  
  
  • 1、大模型API基础
    
  • 2、阻塞响应
    
  • 3、Flux流式响应
    
  • 4、WebSocket会话
    
  
  
• 六、前端对接
  
  
  
  • 1、接口对接思路
    
  • 2、WebSocket对接和设计
    
    
    
    • 使用方式
      
      
      
      • 简单使用
        
      • 检查连接状态
        
      • 发送消息
        
      
      
    • 架构优势
      
      
      
      • 性能优化
        
      • 代码简化
        
      • 扩展性强
        
      
      
    
    
  • 3、websocket的设计优化
    
    
    
    • 连接的断开时机
      
      
      
      • 1. 应用进入后台时断开
        
      • 2. 用户登出时断开
        
      • 3. 长时间无活动时断开
        
      
      
    • 不断开的情况
      
      
      
      • 1. 页面切换时
        
      • 2. 应用回到前台时
        
      • 3. 网络恢复时
        
      
      
    
    
  • 4、WebSocket最后总结
    
  
  
• 七、写在最后
  

个人能力：会限制大模型发挥？
一、简介

七月初全职独立开发，忙忙碌碌中已经过了四周，最近两个星期在做产品集成大模型的功能，所以在节奏上偏重开发这条线。
开发前感觉复杂，完成后感觉更复杂。
之前对于多款大模型的集成，更多是从技术角度调研文档，再加上重要的前端编程，自己也是半吊子水平，对时间把握上心里没底，所以准备用两周的时间，先把基础能力封装搭建好，方便后续的迭代扩展。
整体流程：【1】熟悉几款模型的接入文档，【2】集成文本模式的对话功能，【3】封装提示词动态管理。
为什么接入完成后感觉更复杂？
在接入并适配业务的过程中，不断的调整和优化提示词，见识到大模型各种场景下的文本能力，也让自己反思AI方向的能力不足，更是缺乏比较系统的知识和经验。
个人能力会限制大模型发挥，我成了AI的那什么猪队友。
为什么只接入文本能力？
在大模型的使用中，感觉最核心的是文本能力，即信息输入的理解和输出的效果，把有限的时间先放在这一块，争取在不断的提问和回复中，找到更加准确高效的对话方式。
遵循熟能生巧的思路，积累一定的文本能力之后，在此基础上挖掘应用场景。
虽然产品只集成了4款模型，但是开发却至少用了7款AI工具，涉及产品和前后端的全部环节，大模型在其他行业使用，效果如何不清楚。
在研发领域，绝对已成气候。
下面将从：集成原理、提示词、数据库、后端接口、前端对接，这5个维度总结整个开发流程。
二、集成原理

看了不少开源仓库的教程，以及各个模型的官方文档，这里更多是为了开阔思路，最终还是决定采用稳妥的方式，前端调用后端API，后端处理大模型对接和数据存储。

交互层面看，主要分为3段过程：【1】前后端，【2】后端和大模型，【3】后端和数据库。即产品本身的对话交互，对话调用第三方模型，对话消息的存储管理。
流程层面看，主要分为5段过程：【1】接收用户消息，【2】会话记录管理，【3】对话流程管理，【4】大模型调用，【5】前端输出回复。
三、提示词管理

在开始具体的代码编程之前，必须先了解提示词的基本用法，即不同身份角色所发出的消息类型。

1. public enum MessageType {
2.         /**
3.          * A {@link Message} of type {@literal user}, having the user role and originating
4.          * from an end-user or developer.
5.          * @see UserMessage
6.          */
7.         USER("user"),
9.         /**
10.          * A {@link Message} of type {@literal assistant} passed in subsequent input
11.          * {@link Message Messages} as the {@link Message} generated in response to the user.
12.          * @see AssistantMessage
13.          */
14.         ASSISTANT("assistant"),
16.         /**
17.          * A {@link Message} of type {@literal system} passed as input {@link Message
18.          * Messages} containing high-level instructions for the conversation, such as behave
19.          * like a certain character or provide answers in a specific format.
20.          * @see SystemMessage
21.          */
22.         SYSTEM("system"),
23. }

复制代码

• 用户类型的消息，具有用户角色，来自最终用户或开发人员，也就是产品中输入的文本。
  
• 系统类型的消息，是相对高级的指令，要求模型扮演的角色或身份以及约束行为，比在用户消息中设定的效果好。
  
• 助手类型的消息，模型响应用户生成的消息，也可以在对话的上下文中传递，可以聚焦会话的主题。
  

产品集成大模型的对话能力，最常用的就是三种消息类型，具体的场景可以具体的组合设计，AI的本质在追求智能，所以可以做一些跳脱的尝试挖掘模型能力。
四、数据库设计

目前开发的进度，数据库的设计只有4张关键的表，管理模型和提示词，以及对话数据的存储。

• 大模型配置表：统一封装API调用，可以动态添加和禁用集成的模型和版本，前面的内容已经写过。
  
• 提示词配置表：给大模型和使用场景，动态配置系统提示词，用户消息末尾加限制，参考的是LastSQL方式。
  
• 会话和消息表：这种就是常见设计，会话就是保存每轮对话用户的第一条消息，列表存放不同角色的输出。
  

对话模块表结构设计，问过几款主流的模型，给出的结构都很类似，只围绕产品需求做了小部分调整；模型和提示词表结构，是抽取模型组件的API参数。
五、接口设计

1、大模型API基础

使用的核心组件是spring-ai-openai的依赖包，主流的模型基本都适配了，该组件定义的模型API接口规范，这样有利于模型统一管理和切换。

1. <dependencies>
2.   <dependency>
3.     <groupId>org.springframework.ai</groupId>
4.     spring-ai-openai-spring-boot-starter</artifactId>
5.     <version>${spring-ai-openai.version}</version>
6.   </dependency>
7. </dependencies>

复制代码

• 消息（Message）：用来封装一条具体的消息，结构涉及具体的角色和相应的内容。
  
• 提示词（Prompt）：不同角色的文本指令或者问题，用来引导大模型的响应内容。
  
• 客户端（ChatClient）：聊天客户端，与大模型交互的工具，封装了模型配置和调用的各种方法。
  

在具体的使用场景中，通常在提示词中设定系统和用户消息，用来引导模型的回复，通过客户端工具把指令发给具体的模型。
2、阻塞响应

在上篇内容SpringBoot3集成大模型中，使用的就是「阻塞」模式，请求发出后等大模型响应完成，再把结果回传给用户，这种在长文本中体验很差，比较适用内容简短的对话。

1. @GetMapping(value = "/client")
2. public String chatClient() {
3.     String message = "讲个笑话，最好能把我听哭的那一种。";
4.     return  chatClient.prompt(new Prompt(message)).call().content();
5. }

复制代码

3、Flux流式响应

后端最初设计的是Flux接口，但是最终没有采用，用的是WebSocket会话方式，具体原因前端对接模块会细说。
大模型不会一次输出完整结果，而是逐步返回中间内容，需要完整的拼接起来才是全部内容，这样可以减少用户等待时间，也降低超时的风险。

1. @PostMapping(value = "/flux-chat",produces = MediaType.TEXT_EVENT_STREAM_VALUE)
2. public Flux<ChatTextVO> fluxChat (@RequestBody UserTextDTO dto){
3.     // 1、参数校验，模型ID和消息
4.     if (ObjectUtil.hasNull(dto.getMsgText(),dto.getModelId())){
5.         throw new BizExe(RepCode.PARAM_ERROR);
6.     }
7.     // 2、模型校验获取
8.     ModelConfig model = modelConfigService.checkGetModel(dto.getModelId());
9.     ChatClient myClient = ModelFactory.getModel(model.getModelVersion());
10.     // 3、构建会话进程
11.     chatService.buildUserChat(dto, model, MessageType.USER.getValue());
12.     // 4、模型对话与本地业务
13.     return myClient.prompt(new Prompt(dto.getMsgText())).stream().chatResponse()
14.             .map(chunk -> {
15.                 // 消息响应片段
16.                 Generation generation = chunk.getResult();
17.                 AssistantMessage msg = generation.getOutput();
18.                 // 对话响应
19.                 ChatTextVO chatTextVO = new ChatTextVO();
20.                 chatTextVO.setBlockId(msg.getMetadata().get(ChatParamEnum.MSG_BLOCK_ID.getParam()).toString());
21.                 chatTextVO.setMessageType(msg.getMessageType().toString());
22.                 chatTextVO.setTextContent(msg.getContent());
23.                 return chatTextVO;
24.             })
25.             .doOnComplete(() -> {
26.                 log.info("流式响应结束,处理业务===>>>");
27.             })
28.             .doOnCancel(() -> {
29.                 log.info("流式响应取消,处理业务===>>>");
30.             })
31.             .doOnError(error -> {
32.                 log.info("请求失败: {}",error.getMessage());
33.             });
34. }

复制代码

这里值得注意的问题，如果流式响应完整那最好，但用户可能主动结束等待，或者会发生错误，为了保证流程的完整，需要执行相应的中断方法完善业务逻辑。
4、WebSocket会话

此前写过SpringBoot3的系列教程，其中包括如何集成WebSocket组件，源码和案例都已归档在Git仓库，所以这一块就不展开详聊了，重点来看如何集成模型对话。

1. private static final ConcurrentHashMap<String,Disposable> chatFlow = new ConcurrentHashMap<>();
2. public void socketChat(Session session, ChatTextDTO dto) throws Exception {
3.     // 1、参数校验
4.     if (ObjectUtil.hasNull(dto.getMsgText(),dto.getModelId())){
5.         throw new BizExe(RepCode.PARAM_ERROR);
6.     }
7.     // 2、模型校验获取
8.     ModelConfig model = modelConfigService.checkGetModel(dto.getModelId());
9.     ChatClient myClient = ModelFactory.getModel(model.getModelVersion());
10.     // 3、构建会话进程
11.     this.buildUserChat(dto, model, MessageType.USER.getValue());
12.     // 4、调用模型服务获取响应流
13.     Disposable disposable = myClient.prompt(new Prompt(dto.getMsgText()))
14.             .stream()
15.             .chatResponse()
16.             .doOnCancel(() -> {
17.                 log.info("会话结束，处理取消业务");
18.             })
19.             .subscribe(
20.                     chunk -> {
21.                         // 消息响应片段
22.                         Generation generation = chunk.getResult();
23.                         AssistantMessage msg = generation.getOutput();
24.                         // 响应消息主体
25.                         ChatTextVO chatTextVO = new ChatTextVO();
26.                         chatTextVO.setBlockId(msg.getMetadata().get(ChatParamEnum.MSG_BLOCK_ID.getParam()).toString());
27.                         chatTextVO.setMessageType(msg.getMessageType().toString());
28.                         chatTextVO.setTextContent(msg.getContent());
29.                         // 会话中响应数据
30.                         this.sendMessage(session, chatTextVO);
31.                     },
32.                     error -> {
33.                         log.error("流式处理出错", error);
34.                     },
35.                     () -> {
36.                         log.info("流式响应结束,开始处理业务===>>>");
37.                     }
38.             );
39.     // 方便Session中断时取消模型回复
40.     chatFlow.put(session.getId(),disposable);
41. }
43. private void sendMessage(Session session, Object message) {
44.     try {
45.         session.getBasicRemote().sendText(objMapper.writeValueAsString(message));
46.     } catch (Exception e) {
47.         log.error("发送WebSocket消息出错", e);
48.     }
49. }

复制代码

基于WebSocket会话模式，其调用的依旧是流式接口，只不过增加了Session和ChatClient整体协调的复杂度，这种模式前端调用更加丝滑。
六、前端对接

1、接口对接思路

前端跟大模型对话的场景上，需要实现响应内容的分段输出。一是会提高接口的效率，二是减少用户不必要的等待时间，可以看到实时的内容。
前端是基于vue3和uni-app搭建的框架，所以用到了uni-app提供的request函数，调用这个流式接口。经过各种测试，该函数支持H5和小程序端，在app端不支持分段响应。永远都是把所有的响应一起返回。
于是找了其他办法，比如：1、封装XMLHttpRequest来实现SSE；2、使用分页和轮询模拟流；3、使用RenderJS，RenderJS是uni-app提供的一种运行在视图层的脚本技术，它可以直接操作视图层的DOM和BOM，特别适合处理高性能渲染需求。
第一种方式，在IOS运行没生效，第二种方式，觉得效率不高，第三种方式，小程序端不生效。
最后，左思右想，也参考了很多资料。还是采用websocket。
2、WebSocket对接和设计

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它实现了浏览器与服务器之间的实时双向数据交换。
uni-app官方文档上就有专门支持WebSocket的函数，不管是H5端，小程序端，APP端都支持。所以果断采用了这个方案。
不过还是用后端的套路，避免过多的连接和断开连接，这样比较耗费资源，所以将用户的连接采用单例的方式进行管理。
展示一下完整的全局WebSocket管理器集成方案：

1. interface WebSocketConfig {
2.   url: string
3.   headers?: Record<string, string>
4.   protocols?: string | string[]
5. }
7. interface WebSocketCallbacks {
8.   onOpen?: (event: any) => void
9.   onMessage?: (event: any) => void
10.   onError?: (event: any) => void
11.   onClose?: (event: any) => void
12. }
14. class WebSocketManager {
15.   private static instance: WebSocketManager
16.   private socketTask: any = null
17.   private config: WebSocketConfig | null = null
18.   private callbacks: WebSocketCallbacks = {}
19.   private isConnecting = false
20.   private reconnectTimer: any = null
21.   private reconnectAttempts = 0
22.   private maxReconnectAttempts = 5
23.   private reconnectInterval = 3000
25.   private constructor() {}
27.   // 获取单例实例
28.   static getInstance(): WebSocketManager {
29.     if (!WebSocketManager.instance) {
30.       WebSocketManager.instance = new WebSocketManager()
31.     }
32.     return WebSocketManager.instance
33.   }
35.   // 检查是否已连接
36.   isConnected(): boolean {
37.     return this.socketTask && this.socketTask.readyState === 1
38.   }
40.   // 连接WebSocket
41.   async connect(config: WebSocketConfig, callbacks: WebSocketCallbacks = {}): Promise<boolean> {
42.     // 如果已经连接且配置相同，直接返回
43.     if (this.isConnected() && this.isSameConfig(config)) {
44.       console.log('WebSocket已连接，复用现有连接')
45.       this.updateCallbacks(callbacks)
46.       return true
47.     }
49.     // 如果正在连接中，等待连接完成
50.     if (this.isConnecting) {
51.       console.log('WebSocket正在连接中，等待连接完成')
52.       return this.waitForConnection()
53.     }
55.     // 关闭现有连接
56.     if (this.socketTask) {
57.       this.disconnect()
58.     }
60.     this.config = config
61.     this.callbacks = callbacks
62.     this.isConnecting = true
64.     return new Promise((resolve) => {
65.       console.log('开始连接WebSocket:', config.url)
67.       this.socketTask = uni.connectSocket({
68.         url: config.url,
69.         header: config.headers || {},
70.         protocols: config.protocols,
71.         success: () => {
72.           console.log('WebSocket连接请求发送成功')
73.         },
74.         fail: (error) => {
75.           console.error('WebSocket连接请求失败:', error)
76.           this.isConnecting = false
77.           this.callbacks.onError?.(error)
78.           resolve(false)
79.         }
80.       })
82.       // 连接打开
83.       this.socketTask.onOpen((event: any) => {
84.         console.log('WebSocket连接已打开')
85.         this.isConnecting = false
86.         this.reconnectAttempts = 0
87.         this.clearReconnectTimer()
88.         this.callbacks.onOpen?.(event)
89.         resolve(true)
90.       })
92.       // 接收消息
93.       this.socketTask.onMessage((event: any) => {
94.         this.callbacks.onMessage?.(event)
95.       })
97.       // 连接错误
98.       this.socketTask.onError((event: any) => {
99.         console.error('WebSocket连接错误:', event)
100.         this.isConnecting = false
101.         this.callbacks.onError?.(event)
102.         this.scheduleReconnect()
103.         resolve(false)
104.       })
106.       // 连接关闭
107.       this.socketTask.onClose((event: any) => {
108.         console.log('WebSocket连接已关闭:', event)
109.         this.isConnecting = false
110.         this.callbacks.onClose?.(event)
111.         
112.         // 如果不是主动关闭，尝试重连
113.         if (event.code !== 1000) {
114.           this.scheduleReconnect()
115.         }
116.         
117.         if (!this.isConnected()) {
118.           resolve(false)
119.         }
120.       })
121.     })
122.   }
124.   // 发送消息
125.   send(data: string | ArrayBuffer): boolean {
126.     if (!this.isConnected()) {
127.       console.error('WebSocket未连接，无法发送消息')
128.       return false
129.     }
131.     this.socketTask.send({
132.       data: data,
133.       success: () => {
134.         console.log('WebSocket消息发送成功')
135.       },
136.       fail: (error: any) => {
137.         console.error('WebSocket消息发送失败:', error)
138.       }
139.     })
141.     return true
142.   }
144.   // 断开连接
145.   disconnect(): void {
146.     this.clearReconnectTimer()
147.    
148.     if (this.socketTask) {
149.       this.socketTask.close({
150.         code: 1000,
151.         reason: '主动断开连接'
152.       })
153.       this.socketTask = null
154.     }
155.    
156.     this.isConnecting = false
157.     this.config = null
158.     this.callbacks = {}
159.     this.reconnectAttempts = 0
160.     console.log('WebSocket连接已断开')
161.   }
163.   // 更新回调函数
164.   updateCallbacks(callbacks: WebSocketCallbacks): void {
165.     this.callbacks = { ...this.callbacks, ...callbacks }
166.   }
168.   // 获取连接状态
169.   getStatus(): string {
170.     if (this.isConnected()) return 'connected'
171.     if (this.isConnecting) return 'connecting'
172.     return 'disconnected'
173.   }
174. }
176. // 导出单例实例
177. export const websocketManager = WebSocketManager.getInstance()
179. // 导出类型
180. export type { WebSocketConfig, WebSocketCallbacks }

复制代码

使用方式

简单使用

1. // 基本连接
2. const connected = await websocketManager.connect({
3.   url: 'ws://example.com/socket',
4.   headers: {
5.     'Authorization': 'Bearer token'
6.   }
7. }, {
8.   onMessage: (event) => {
9.     console.log('收到消息:', event.data)
10.   }
11. })

复制代码

检查连接状态

1. // 检查是否已连接
2. if (websocketManager.isConnected()) {
3.   // 直接使用现有连接
4.   websocketManager.send('hello')
5. } else {
6.   // 需要先连接
7.   await websocketManager.connect(config, callbacks)
8. }

复制代码

发送消息

1. // 发送消息
2. const success = websocketManager.send(JSON.stringify(data))
3. if (!success) {
4.   console.error('发送失败，连接未建立')
5. }

复制代码

架构优势

性能优化

• 避免重复连接: 页面切换时复用连接
  
• 减少资源消耗: 单例模式减少内存占用
  
• 智能重连: 自动处理网络异常
  

代码简化

• 统一管理: 所有WebSocket逻辑集中管理
  
• 易于维护: 业务代码只需关注配置和回调
  
• 类型安全: 完整的TypeScript类型支持
  

扩展性强

• 多页面支持: 可在任意页面使用
  
• 配置灵活: 支持不同的URL和headers
  
• 回调自定义: 每个页面可定义自己的消息处理逻辑
  

3、websocket的设计优化

基于上面的封装，其实还有一点要考虑，WebSocket连接的断开时机，分了三个维度去考虑这个事情：
连接的断开时机

1. 应用进入后台时断开

• 时机: onHide 应用生命周期
  
• 原因: 节省资源，避免后台保持连接
  
• 优势: 系统资源优化，电池续航
  

2. 用户登出时断开

• 时机: 用户主动登出
  
• 原因: 安全考虑，避免无效连接
  
• 优势: 数据安全，连接清理
  

3. 长时间无活动时断开

• 时机: 设置定时器检测活动
  
• 原因: 避免僵尸连接
  
• 优势: 资源优化
  

所以对上面的WebSocketManager做了调整。

1. class WebSocketManager {
2.   private static instance: WebSocketManager
3.   private socketTask: any = null
4.   private config: WebSocketConfig | null = null
5.   private pageCallbacks: Map<string, WebSocketCallbacks> = new Map()
6.   private currentPageId: string = ''
7.   private connecting = false
8.   private reconnectTimer: any = null
9.   private reconnectAttempts = 0
10.   private maxReconnectAttempts = 5
11.   private reconnectInterval = 3000
12.   
13.   // 连接管理相关
14.   private lastActivityTime: number = Date.now()
15.   private activityTimer: any = null
16.   private inactivityTimeout = 30 * 60 * 1000 // 30分钟无活动自动断开
17.   private isAppInBackground = false
19.   // 发送消息
20.   send(data: string | ArrayBuffer): boolean {
21.     if (!this.isConnected()) {
22.       console.error('WebSocket未连接，无法发送消息')
23.       return false
24.     }
26.     // 记录用户活动
27.     this.recordActivity()
29.     this.socketTask.send({
30.       data: data,
31.       success: () => {
32.         console.log('WebSocket消息发送成功')
33.       },
34.       fail: (error: any) => {
35.         console.error('WebSocket消息发送失败:', error)
36.       }
37.     })
39.     return true
40.   }
42.   // 记录用户活动
43.   recordActivity(): void {
44.     this.lastActivityTime = Date.now()
45.     this.resetActivityTimer()
46.   }
48.   // 重置活动计时器
49.   private resetActivityTimer(): void {
50.     if (this.activityTimer) {
51.       clearTimeout(this.activityTimer)
52.     }
53.    
54.     this.activityTimer = setTimeout(() => {
55.       console.log('WebSocket长时间无活动，自动断开连接')
56.       this.disconnect()
57.     }, this.inactivityTimeout)
58.   }
60.   // 应用进入后台
61.   onAppHide(): void {
62.     console.log('应用进入后台，断开WebSocket连接')
63.     this.isAppInBackground = true
64.     this.disconnect()
65.   }
67.   // 应用回到前台
68.   onAppShow(): void {
69.     console.log('应用回到前台')
70.     this.isAppInBackground = false
71.   }
73.   // 用户登出时断开连接
74.   onUserLogout(): void {
75.     console.log('用户登出，断开WebSocket连接')
76.     this.disconnect()
77.   }
79.   // 断开连接
80.   disconnect(): void {
81.     this.clearReconnectTimer()
82.     this.clearActivityTimer()
83.    
84.     if (this.socketTask) {
85.       this.socketTask.close({
86.         code: 1000,
87.         reason: '主动断开连接'
88.       })
89.       this.socketTask = null
90.     }
91.    
92.     this.connecting = false
93.     this.config = null
94.     this.pageCallbacks.clear()
95.     this.currentPageId = ''
96.     this.reconnectAttempts = 0
97.     console.log('WebSocket连接已断开')
98.   }
100.   // 清理活动计时器
101.   private clearActivityTimer(): void {
102.     if (this.activityTimer) {
103.       clearTimeout(this.activityTimer)
104.       this.activityTimer = null
105.     }
106.   }
107. }

复制代码

增加生命周期管理类

1. /**
2. * 应用生命周期管理
3. * 处理WebSocket连接的智能断开和重连
4. */
6. import { websocketManager } from './websocket'
8. class AppLifecycleManager {
9.   private static instance: AppLifecycleManager
10.   private isInitialized = false
12.   // 初始化应用生命周期监听
13.   init(): void {
14.     if (this.isInitialized) {
15.       console.log('应用生命周期管理已初始化')
16.       return
17.     }
19.     console.log('初始化应用生命周期管理')
21.     // 监听应用隐藏（进入后台）
22.     uni.onAppHide(() => {
23.       console.log('应用进入后台')
24.       websocketManager.onAppHide()
25.     })
27.     // 监听应用显示（回到前台）
28.     uni.onAppShow(() => {
29.       console.log('应用回到前台')
30.       websocketManager.onAppShow()
31.     })
33.     // 监听网络状态变化
34.     uni.onNetworkStatusChange((res) => {
35.       console.log('网络状态变化:', res)
36.       if (!res.isConnected) {
37.         console.log('网络断开，断开WebSocket连接')
38.         websocketManager.disconnect()
39.       }
40.       // 网络恢复时不自动重连，等待用户操作
41.     })
43.     this.isInitialized = true
44.   }
46.   // 用户登出时调用
47.   onUserLogout(): void {
48.     console.log('用户登出，清理WebSocket连接')
49.     websocketManager.onUserLogout()
50.   }
51. }
53. // 导出单例实例
54. export const appLifecycleManager = AppLifecycleManager.getInstance()

复制代码

最后，是断开连接的用法。

1. import { defineStore } from 'pinia';
2. import { appLifecycleManager } from '@/utils/app-lifecycle';
4. export const useUserStore = defineStore('user', {
5.   actions: {
6.     // 退出登录
7.     logout() {
8.       this.userInfo = null;
9.       this.token = '';
10.       this.isLoggedIn = false;
11.       
12.       // 清除本地存储
13.       uni.removeStorageSync('token');
14.       uni.removeStorageSync('userInfo');
15.       
16.       // 断开WebSocket连接
17.       appLifecycleManager.onUserLogout();
18.     }
19.   }
20. });

复制代码

上面贴了部分核心代码，不过都是以自己后端的角度去考虑的。
最后，呼应上面，再列举不断开连接的情况。
不断开的情况

1. 页面切换时

• 保持连接: 在home和square页面间切换
  
• 原因: 提供流畅的用户体验
  
• 优势: 快速响应，无需重新连接
  

2. 应用回到前台时

• 不自动重连: 等待用户主动操作
  
• 原因: 按需连接，节省资源
  
• 优势: 用户控制连接时机
  

3. 网络恢复时

• 不自动重连: 等待用户发送消息时重连
  
• 原因: 避免不必要的连接
  
• 优势: 按需连接
  

4、WebSocket最后总结

这套封装，使WebSocket连接完全抽离为全局管理，首次进入页面会检查连接状态，有连接就复用，没有就初始化，外部只需要定义URL和请求头即可。
并且，连接也具有完整的智能管理策略，能够在合适的时机自动断开连接，既保证了用户体验，又优化了资源使用。
七、写在最后

对于大模型的集成，本质就是第三方API的调用，刚开始做的时候也有点犯难，不过花时间和心思研究文档之后，其实原理并不算复杂。
所谓套壳大模型的产品，体验上的差距更多在于：开发者对模型能力的理解和运用。有句话现在越来越认可，人工智能时代：模型本身即产品。

1. 文档仓库：
2. https://gitee.com/cicadasmile/butte-java-note
4. 源码仓库：
5. https://gitee.com/cicadasmile/butte-mound

复制代码

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除