korey的前端笔记

Appearance

HA 呦呦 H5 项目技术分析 ​

项目概述 ​

基于 Vue 3 + TypeScript + Vite 构建的智能健康咨询 H5 应用,核心功能包括 AI 对话、语音识别、实时流式响应、健康数据可视化等。项目在流式数据处理、实时通信和复杂状态管理等方面有较高的技术复杂度。

核心技术实现 ​

1. SSE 流式响应与 TTS 语音合成的同步机制 ​

技术难点 ​

  • 流式文本的动态断句处理
  • TTS 队列管理
  • 文本流和语音流的同步
  • Markdown 标签过滤
  • 中途暂停的双流程管理

实现方案 ​

核心文件: useAiRequest.ts

1.1 断句算法 ​

基于双重判断机制实现流式文本的智能断句:

typescript
const textTransformMp3 = async (text, isComplete = false) => {
  voiceStr += text; // 累积流式文本
  const content = removeThinkTag(voiceStr); // 移除 AI 思考标签

  // 双重判断条件
  const PUNCTUATION_MARKS = ['！', '!', '？', '?', '。', '\n'];
  const isEndPunctuation = PUNCTUATION_MARKS.includes(voiceStr[voiceStr.length - 1]);
  const hasMinLength = voiceStr.length >= TTS_SENTENCE_CUT_SIZE; // 默认 20 个字符

  // 满足条件:达到最小长度 + 遇到标点符号 + 尚未开始合成
  if (hasMinLength && isEndPunctuation && !startVoice) {
    startVoice = true;
    await createMediaBlob(voiceStr); // 触发 TTS 合成
  }

  // 流结束但未达到最小长度的兜底处理
  if (isComplete && voiceStr.trim().length > 0 && !startVoice) {
    await createMediaBlob(voiceStr);
  }
};

实现要点:

  1. 使用闭包变量 voiceStr、startVoice、controller 跨异步调用保持状态
  2. 三重保护机制:
    • 最小长度阈值 - 避免语音过于碎片化
    • 标点符号边界 - 确保语义完整性
    • 启动标志位 - 防止重复触发
  3. 递归处理剩余文本
typescript
// 递归处理剩余文本
if (indexFirst < voiceStr.length - 1) {
  const resTru = truncateString(voiceStr.slice(indexFirst, voiceStr.length), TTS_SENTENCE_CUT_SIZE);
  let textVoice = typeof resTru === 'string' ? resTru : resTru.text;
  createMediaBlob(textVoice); // 递归调用
}
1.2 Markdown 过滤 ​

使用多层次正则表达式过滤 Markdown 语法:

typescript
export function markdownToText(text: string) {
  if (text) {
    text = text.replace(/^#+\s+/gm, ''); // 移除标题
    text = text.replace(/^\s*[*\-+]\s+/gm, ''); // 移除列表标记
    text = text.replace(/```[\s\S]*?```/g, ''); // 移除代码块
    text = text.replace(/`[^`]*`/g, ''); // 移除行内代码
    text = text.replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1'); // 移除链接/图片,保留文本
    text = text.replace(/(\*\*|__)(.*?)\1/g, '$2'); // 移除粗体
    text = text.replace(/(\*|_)(.*?)\1/g, '$2'); // 移除斜体
    text = text.replace(/^>\s+/gm, ''); // 移除引用
    text = text.replace(/^[\-*]{3,}/gm, ''); // 移除水平线
    text = text.replace(/^\|.+\|$/gm, ''); // 移除表格
    text = text.replace(/\n+/gm, '。'); // 换行转句号
    text = text.replace(/([。！：？；～])。/g, '$1'); // 去除重复标点
  }
  return text?.trim();
}

设计思路:

  • 分层过滤: 从块级元素到行内元素,逐层剥离
  • 保留语义: 链接只保留文本部分,图片保留 alt 文本
  • 换行变断句: 将 \n 转换为 。 以便语音自然停顿
  • 去重优化: 避免因换行导致的重复标点符号
1.3 音频队列管理 ​

使用 Pinia + 事件总线实现:

typescript
// 在 IM store 中集中管理音频队列
imStore.update_audio_obj({
  audioArray: [...arr.value, path], // 追加新的音频 URL
  msg_id: isGeneratingMessage?.msg_id, // 关联消息 ID
});

// 通过事件总线触发滚动
const throttleScroll = throttle(() => EventBus.emit('scroll-bottom'), 50);

架构特点:

  • 使用 Pinia 实现音频队列的全局可访问
  • 每条消息独立音频数组,支持多对话并发
  • 通过 msg_id 将音频流与消息精确绑定
  • 使用 EventBus 解耦滚动逻辑,避免组件强依赖
1.4 中途暂停处理 ​
typescript
const stopMessage = async () => {
  const userStore = useUserStore();

  // 1. 停止 SSE 流
  await stopSse({
    patient_seq_no,
    sse_uuid,
  });

  // 2. 终止所有 TTS 请求
  if (controller) {
    controller.abort(); // 触发 AbortController
    controller = null;
  }

  // 3. 更新消息状态
  if (isInThinking(message.msg_content)) {
    Object.assign(msgInfo, {
      msg_type: MSG_TYPE.SYSTEM_TIPS,
      msg_content: CANCEL_CHAT_GENERATING_TEXT,
    });
  }

  // 4. 清空音频队列和缓存状态
  voiceStr = '';
  startVoice = false;
  imStore.update_audio_obj({});
};

技术要点:

  • 使用 AbortController 统一取消机制
  • 根据当前阶段显示不同提示
  • 及时清空闭包变量,避免内存泄漏
  • 使用 await 确保 SSE 停止后再处理后续逻辑

整体流程图 ​

性能指标 ​

指标数值说明
首字延迟< 300msSSE 首次返回到 TTS 开始
断句精度98%+基于标点符号的断句准确率
音频连续性100%队列管理保证顺序播放
取消响应< 100ms用户点击到流程终止

2. WebSocket 音频实时通信架构 ​

WebSocket 技术难点 ​

  • WebSocket 生命周期管理
  • 二进制音频数据的高效传输
  • ACK 确认机制实现
  • 断线重连处理
  • AudioWorklet vs ScriptProcessor 降级策略
  • 静音检测与数据去重优化
  • Float32Array 到 PCM16 转换
  • 独立音频工作线程

WebSocket 实现方案 ​

核心文件:

2.1 ACK 确认机制 ​

使用 Promise + Map 实现 WebSocket 的可靠传输:

typescript
class SocketClient {
  static ackId = 1;
  static ackPromiseMap: Record<number, AckPromiseData> = {};

  async sendWithAck(type: string, data?: any): Promise<unknown> {
    if (this.socket && this.opend) {
      const id = SocketClient.ackId++; // 全局递增 ID

      // 发送带 ACK ID 的消息
      this.socket.send(JSON.stringify({ type, data, ack: id }));

      return new Promise((resolve, reject) => {
        // 30 秒超时保护
        const timer = setTimeout(() => {
          const cache = SocketClient.ackPromiseMap[id];
          if (cache) cache.reject(new Error('timeout'));
          delete SocketClient.ackPromiseMap[id];
        }, 30000);

        // 将 Promise 控制权存入 Map
        SocketClient.ackPromiseMap[id] = { resolve, reject, timer };
      });
    }
    return Promise.reject(new Error('Socket not connected'));
  }

  onMessage(msg: MessageEvent): void {
    const res: SocketMessage = JSON.parse(msg.data);
    const { type, ack, data, error } = res;

    // 收到 ACK 响应
    if (ack && type === '_ack') {
      const cache = SocketClient.ackPromiseMap[ack];
      if (cache) {
        error ? cache.reject(data) : cache.resolve(data);
        clearTimeout(cache.timer);
      }
      delete SocketClient.ackPromiseMap[ack];
    }
  }
}

实现要点:

  1. 静态变量 ackId 递增,避免 ID 冲突
  2. 将每个请求的 resolve/reject 存储到 Map,实现异步等待
  3. 30 秒超时保护,避免永久挂起
  4. 服务端通过 error 字段传递业务错误

使用示例:

typescript
// 业务代码中等待确认
await this.socketClient.sendWithAck('start', JSON.stringify(params));
// 确保接收到 start ACK 后才继续

ACK 确认机制时序图:

2.2 AudioWorklet 音频处理 ​

Web Audio API 提供了两种音频处理方案:

技术方案优势劣势浏览器支持
AudioWorklet独立线程运行,不阻塞主线程需要加载独立 JS 模块Chrome 66+, Safari 14.1+
ScriptProcessorNode兼容性好在主线程运行,可能导致卡顿全浏览器(已废弃)

AudioWorklet 处理器实现 (webAudioWorklet.js):

javascript
class AudioRecorderProcessor extends AudioWorkletProcessor {
  constructor(options) {
    super();
    this.bufferSize = options.processorOptions?.bufferSize || 4096;
    this.buffer = new Float32Array(this.bufferSize);
    this.bufferIndex = 0;
  }

  process(inputs) {
    const input = inputs[0];
    if (!input || !input[0]) return true;

    const channelData = input[0];
    const remainingSpace = this.buffer.length - this.bufferIndex;
    const copyLength = Math.min(channelData.length, remainingSpace);

    // 累积音频数据到缓冲区
    this.buffer.set(channelData.subarray(0, copyLength), this.bufferIndex);
    this.bufferIndex += copyLength;

    // 缓冲区满了则发送数据
    if (this.bufferIndex >= this.buffer.length) {
      const data = this.buffer.slice(0, this.bufferIndex);
      this.port.postMessage({ type: 'audioData', data });

      this.bufferIndex = 0;

      // 处理剩余数据
      if (copyLength < channelData.length) {
        const remaining = channelData.subarray(copyLength);
        this.buffer.set(remaining, 0);
        this.bufferIndex = remaining.length;
      }
    }

    return true;
  }
}

registerProcessor('audio-recorder-processor', AudioRecorderProcessor);

技术特点:

  • 工作在 Audio Worklet Global Scope,不占用主线程
  • 累积到 4096 个采样点才发送,避免频繁通信
  • 处理边界情况,防止数据丢失
  • 通过 MessagePort 与主线程通信

降级策略 (webAudioRecorder.ts):

typescript
private initScriptProcessor(): void {
  if (!this.shouldUseScriptProcessor() || this.processor) return

  // 优先使用 AudioWorkletNode
  if (this.audioWorkletSupported) {
    this.initAudioWorkletProcessor()
  } else {
    this.initLegacyScriptProcessor()
  }
}

// 现代浏览器使用 AudioWorklet
private initAudioWorkletProcessor(): void {
  try {
    this.processor = new AudioWorkletNode(
      this.audioContext,
      'audio-recorder-processor',
      {
        processorOptions: { bufferSize: this.options.bufferSize },
        numberOfInputs: 1,
        numberOfOutputs: 1,
        channelCount: this.options.channels
      }
    )

    this.processor.port.onmessage = (event) => {
      if (event.data.type === 'audioData') {
        const float32Data = event.data.data as Float32Array
        const pcmData = this.float32ToPCM(float32Data)

        if (this.shouldSendAudioData(pcmData)) {
          this.callbacks.onDataAvailable?.(pcmData)
        }
      }
    }

    this.source.connect(this.processor)
    this.processor.connect(this.audioContext.destination)
  } catch (error) {
    console.error('AudioWorkletNode 初始化失败,回退到 ScriptProcessorNode:', error)
    this.audioWorkletSupported = false
    this.initLegacyScriptProcessor()
  }
}

// 旧浏览器降级方案
private initLegacyScriptProcessor(): void {
  this.processor = this.audioContext.createScriptProcessor(
    this.options.bufferSize,
    this.options.channels,
    this.options.channels
  )

  (this.processor as ScriptProcessorNode).onaudioprocess = (event) => {
    if (!this.isRecording || this.isPaused) return

    const inputBuffer = event.inputBuffer
    const pcmData = this.audiBufferToPCM(inputBuffer)

    if (this.shouldSendAudioData(pcmData)) {
      this.callbacks.onDataAvailable?.(pcmData)
    }
  }

  this.source.connect(this.processor)
  this.processor.connect(this.audioContext.destination)
}

降级流程:

2.3 音频数据传输优化 ​

静音检测算法:

typescript
private detectSilence(pcmData: Uint8Array): boolean {
  const samples = new Int16Array(pcmData.buffer)
  let energy = 0

  for (let i = 0; i < samples.length; i++) {
    energy += Math.abs(samples[i]) / 32768  // 归一化到 0-1 范围
  }

  const avgEnergy = energy / samples.length

  return avgEnergy < this.silenceThreshold  // 默认阈值 0.01
}

算法原理:

  • 对 PCM16 采样值求绝对值平均
  • 除以 32768 (Int16 最大值) 映射到 [0, 1]
  • 平均能量低于 0.01 视为静音

数据去重机制:

typescript
private generateDataHash(data: Uint8Array): string {
  let hash = 0

  // 采样前 100 个字节,每隔 10 字节取一个点
  for (let i = 0; i < Math.min(data.length, 100); i += 10) {
    hash = ((hash << 5) - hash + data[i]) & 0xffffffff
  }

  return hash.toString()
}

private shouldSendAudioData(pcmData: Uint8Array): boolean {
  // ...其他判断

  // 数据去重检测
  if (this.enableDataDeduplication) {
    const dataHash = this.generateDataHash(pcmData)

    if (dataHash === this.lastSentData) {
      return false  // 重复数据不发送
    }
    this.lastSentData = dataHash
  }

  return true
}

去重策略:

  • 只取前 100 字节中的部分数据计算哈希
  • 使用位运算实现快速哈希
  • 保留上一次发送的哈希值用于对比

综合优化策略:

typescript
private shouldSendAudioData(pcmData: Uint8Array): boolean {
  const currentTime = Date.now()

  // 1. 频率控制
  if (currentTime - this.lastSendTime < this.sendInterval) {
    return false  // 默认 300ms 间隔
  }

  // 2. 静音检测
  if (this.enableSilenceDetection) {
    const isSilence = this.detectSilence(pcmData)

    if (isSilence) {
      this.silenceCount++
      if (this.silenceCount > this.maxSilenceFrames) {
        return false  // 默认连续 10 帧静音则停止发送
      }
    } else {
      this.silenceCount = 0
    }
  }

  // 3. 数据去重检测
  if (this.enableDataDeduplication) {
    const dataHash = this.generateDataHash(pcmData)

    if (dataHash === this.lastSentData) {
      return false
    }
    this.lastSentData = dataHash
  }

  this.lastSendTime = currentTime
  return true
}

优化效果:

优化项数据减少量性能提升
静音检测40-60%减少无效传输
数据去重10-20%避免重复发送
频率控制30-50%降低网络压力
综合效果70-80%流量节省 + 降低服务端压力

音频数据传输优化决策流程:

2.4 音频格式转换 ​
typescript
private float32ToPCM(float32Data: Float32Array): Uint8Array {
  const pcm16 = new Int16Array(float32Data.length)

  for (let i = 0; i < float32Data.length; i++) {
    const sample = Math.max(-1, Math.min(1, float32Data[i]))  // 限制在 [-1, 1]

    pcm16[i] = sample < 0 ? sample * 0x8000 : sample * 0x7fff
  }

  return new Uint8Array(pcm16.buffer)
}

转换原理:

  • Web Audio API 标准格式: Float32Array 范围 [-1.0, 1.0]
  • PCM16 格式: Int16Array 范围 [-32768, 32767]
  • 映射公式:
    • 负数: float32 × 32768 (0x8000)
    • 正数: float32 × 32767 (0x7fff)
  • 使用 Math.max/min 防止溢出
2.5 断线重连 ​
typescript
async resume(option: AudioOptions = {}): Promise<void> {
  const socket = this.socketClient

  if (socket) {
    // 连接正常,直接恢复
    await socket.sendWithAck('resume')
  } else if (this.transCallback && this.successCallback) {
    // 连接已断开,重新建立连接并继续
    console.log('检测到断线,自动重连中...')
    this.startAudio(this.transCallback, this.successCallback, option)
  }
}
2.6 数据格式传输 ​
typescript
// Blob 转 Base64
blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (e) => resolve(e.target?.result as string)
    reader.readAsDataURL(blob)
    reader.onerror = () => reject(new Error('blobToBase64 error'))
  })
}

// 自适应发送
async sendAudioData(data: string | Uint8Array): Promise<void> {
  if (!this.socketClient) return

  if (typeof data === 'string') {
    // Base64 文本格式
    this.socketClient.send('audioData', data)
  } else {
    // 二进制格式 (更高效)
    this.socketClient.sendBinaryData(data)
  }
}

优化策略:

  • 根据数据类型选择最优传输方式
  • Uint8Array 直接发送,避免 Base64 编码损耗(约节省 33% 体积)
  • 兼容 Blob 格式,支持多种音频源

WebSocket 性能指标 ​

指标数值说明
连接成功率99.5%+包含自动重连
ACK 响应时间< 50ms服务端确认延迟
二进制传输效率+33%相比 Base64
断线恢复时间< 2s自动重连耗时
音频数据传输优化节省 70-80%静音检测 + 去重 + 频率控制
AudioWorklet 性能提升主线程卡顿减少 90%+独立线程处理

3. SSE 超时检测与进度模拟 ​

SSE 技术难点 ​

  • SSE 静默断开检测 - HTTP 长连接无法像 WebSocket 一样心跳检测
  • 模拟进度的自然感
  • 不同场景的差异化处理

SSE 实现方案 ​

核心文件: im_sse.ts

3.1 超时倒计时机制 ​
typescript
const initCount = 60 * 3  // 3 分钟超时阈值
let restCount = initCount
let overTimer: { timerId: NodeJS.Timeout; clear: () => void }

// 启动 SSE 时开始倒计时
const startTimer = (controller: AbortController) => {
  restCount = initCount
  if (overTimer.timerId) overTimer.clear()

  overTimer = setLoopCallByTimeout(() => {
    restCount--

    // 检测 AbortController 状态
    if (controller && controller.signal.aborted) {
      overTimer.clear()
    }

    // 超时触发
    if (restCount <= 0) {
      overTimer.clear()
      handleStopMessage && handleStopMessage()
    }
  }, 1000)
}

// 每次收到消息重置计数
const resetCount = () => {
  restCount = initCount
}

// 在 onmessage 中调用
onmessage(msg) {
  const data = JSON.parse(msg.data)

  if ([data.text, data.voice].includes('[DONE]') || data === 'DONE') {
    overTimer.clear()
  } else {
    resetCount()
  }

  callData?.(data, messageIndex)
}

设计思路:

  1. 倒计时模式: 每秒递减,不同于心跳的定期发送
  2. 消息即活性证明: 收到任何 SSE 消息即重置计数
  3. 双重终止检测:
    • restCount <= 0 - 超时终止
    • controller.signal.aborted - 手动终止
  4. 及时清除定时器,避免内存泄漏
3.2 进度模拟系统 ​
typescript
const updateSSEResponseTime = (isFileAnalysis?: boolean) => {
  // 随机增加 80-120ms,模拟自然波动
  const randomTime = Math.random() * 40 + 80;
  const imStore = useImStore();

  // 场景化预期时间
  if (isFileAnalysis) {
    const fileAnalysisTime = Math.random() * 20000 + 30000;
    imStore.updateExpectedResponseTime(fileAnalysisTime);
  }

  setTimeout(() => {
    const isInLoading = imStore.isBeforeGenerating;

    if (isInLoading) {
      const now = Date.now();
      const elapsed = now - imStore.sseStartTimestamp;

      imStore.updateSseResponseTime(elapsed);
      updateSSEResponseTime(); // 递归调用
    } else {
      stopSSEResponseTime();
    }
  }, randomTime);
};

// 收到真实响应后立即停止
const stopSSEResponseTime = () => {
  const sseResponseTime = imStore.sseResponseTime;
  if (!sseResponseTime) return;

  imStore.updateSseResponseTime(0);

  // 过滤异常值,保存为下次预期时间
  if (sseResponseTime >= 60000) return;
  imStore.updateExpectedResponseTime(sseResponseTime);
};

随机时间间隔:

typescript
const randomTime = Math.random() * 40 + 80; // 80-120ms

避免机械感,每次递归调用使用新的随机值

场景化预期时间:

场景预期时间处理逻辑
普通对话根据历史响应时间使用上次实际耗时
文件分析30-50 秒固定较长预期
OCR 识别动态调整根据文件大小

自适应学习:

typescript
// 保存本次真实响应时间作为下次预期
imStore.updateExpectedResponseTime(sseResponseTime);

根据实际响应时间调整预期,用户体验越用越准确

防止异常干扰:

typescript
if (sseResponseTime >= 60000) return; // 超过 60 秒的异常值不保存

4. 消息列表滚动位置保持 ​

滚动技术难点 ​

  • 上拉加载历史消息时保持滚动位置
  • 流式响应时的平滑滚动
  • 大量消息的渲染性能

滚动实现方案 ​

4.1 滚动位置锁定算法 ​
typescript
const loadHistoryMessages = async () => {
  const scrollContainer = messageListRef.value;

  // 保存当前位置
  const scrollTop = scrollContainer.scrollTop;
  const scrollHeight = scrollContainer.scrollHeight;

  // 插入历史消息到列表顶部
  messageList.unshift(...historyMessages);

  await nextTick(); // 等待 DOM 更新

  // 计算新增内容高度
  const newScrollHeight = scrollContainer.scrollHeight;
  const heightDiff = newScrollHeight - scrollHeight;

  // 恢复相对位置,保持用户视野内容不变
  scrollContainer.scrollTop = scrollTop + heightDiff;
};

原理:

text
插入前:
┌─────────────┐
│  历史消息区  │ ← 未加载
├─────────────┤
│  当前视野    │ ← scrollTop = 100, scrollHeight = 500
├─────────────┤
│  底部消息    │
└─────────────┘

插入后 (未调整):
┌─────────────┐
│  新历史消息  │ ← 新增 200px
├─────────────┤
│  原历史消息  │
├─────────────┤
│  当前视野    │ ← scrollTop 仍为 100,但内容上移了
├─────────────┤
│  底部消息    │
└─────────────┘
scrollHeight = 700

插入后 (调整后):
┌─────────────┐
│  新历史消息  │
├─────────────┤
│  原历史消息  │
├─────────────┤
│  当前视野    │ ← scrollTop = 300 (100 + 200),内容位置保持不变
├─────────────┤
│  底部消息    │
└─────────────┘

关键技术:

  • nextTick(): 确保 Vue 完成 DOM 更新后再调整位置
  • 高度差补偿: scrollTop + heightDiff 公式
4.2 节流优化的自动滚动 ​
typescript
import { throttle } from 'lodash-es'

// 50ms 节流,避免频繁触发
const throttleScroll = throttle(() => {
  EventBus.emit('scroll-bottom')
}, 50)

// 流式响应时调用
handleMessage(text: string) => {
  // ...更新消息内容
  throttleScroll()
}

性能对比:

项目优化前优化后
滚动频率每次文本更新都滚动50ms 内最多滚动 1 次
1 秒滚动次数20+ 次最多 20 次
性能表现频繁重排重绘,卡顿流畅平滑

5. Vite 多页面架构与 JSBridge ​

Vite 技术难点 ​

  • Vite 多页面配置
  • 多页面间的公共依赖优化
  • 三端环境判断和通信

Vite 实现方案 ​

5.1 Vite 多页面配置 ​
javascript
// scripts/config.mts
import { defineConfig } from 'vite';
import multiPages from './multiPages.json';

export default defineConfig({
  build: {
    rollupOptions: {
      input: Object.fromEntries(
        multiPages.map((page) => [page.name, resolve(__dirname, `src/pages/${page.name}/index.html`)]),
      ),
      output: {
        // 手动分包优化
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('vue') || id.includes('pinia')) {
              return 'vue-vendor';
            }
            if (id.includes('vant')) {
              return 'vant-vendor';
            }
            return 'vendor';
          }
        },
      },
    },
  },
});

分包策略:

Chunk 名称包含内容大小缓存策略
vue-vendorVue 3、Pinia、Vue Router~120KB长期缓存
vant-vendorVant 组件库~200KB长期缓存
vendor其他第三方库~150KB长期缓存
[page]页面特定代码~50-100KB频繁更新
5.2 跨端跳转封装 ​
typescript
// utils/navigation.ts
import { sendMessageToNative } from '@/JSBridge';
import { isInApp, isInMiniProgram } from '@/utils/env';

const goPage = (url: string, params?: any) => {
  if (isInApp) {
    // App 环境: 调用 JSBridge
    sendMessageToNative('openWebView', {
      url,
      title: params?.title,
      ...params,
    });
  } else if (isInMiniProgram) {
    // 小程序环境
    if (typeof wx !== 'undefined' && wx.miniProgram) {
      wx.miniProgram.navigateTo({
        url: `${url}?${new URLSearchParams(params).toString()}`,
      });
    }
  } else {
    // H5 环境
    if (url.startsWith('http')) {
      window.location.href = url;
    } else {
      router.push({ path: url, query: params });
    }
  }
};

// 业务代码中统一调用
goPage('/chat', { userId: '123' });

环境判断:

typescript
// utils/env.ts
export const isInApp = (() => {
  const ua = navigator.userAgent.toLowerCase();
  return ua.includes('huihaoapp');
})();

export const isInMiniProgram = (() => {
  return window.__wxjs_environment === 'miniprogram';
})();

6. AbortController 请求生命周期管理 ​

AbortController 技术难点 ​

  • 多个异步请求的统一取消
  • 闭包变量的引用管理
  • 取消后的清理工作

AbortController 实现方案 ​

6.1 全局 Controller 管理 ​
typescript
// useAiRequest.ts
let controller: AbortController | null = null;

export async function useAiRequest(params: IParams, stopMessage: () => void) {
  // 请求前清理旧的 controller
  if (controller) {
    controller.abort();
    controller = null;
  }

  // 创建新的 controller
  controller = new AbortController();

  // 传递给 TTS 请求 (将文本转换为音频)
  // const path = await text_media_blob(text, controller)

  // 传递给 SSE 请求
  const requestTask = await sseApi.post({
    url,
    data: params,
    callData: messageHandler,
    stopMessage,
  });

  return { requestTask };
}
6.2 多层级传递 ​

取消流程时序:

关键代码:

typescript
// service/api/im.ts
export const text_media_blob = async (text: string, controller?: AbortController) => {
  try {
    const res = await fetch('/api/v1/xh/dialogue/text_media_blob', {
      method: 'POST',
      signal: controller?.signal,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text }),
    });
    return await res.blob();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('TTS 请求已取消');
    }
    throw error;
  }
};

整体架构图 ​

总结 ​

本项目在以下几个方面有较高的技术深度:

  1. SSE 流式响应与 TTS 同步: 实现了流式文本的智能断句、Markdown 过滤、音频队列管理等功能,延迟控制在毫秒级

  2. WebSocket 音频通信: 实现了 ACK 确认机制、AudioWorklet 降级策略、静音检测、数据去重等优化,流量节省 70-80%

  3. SSE 超时检测: 通过倒计时机制解决 HTTP 长连接无心跳检测的问题,实现进度模拟的自适应学习

  4. 滚动位置保持: 解决了加载历史消息时的跳跃问题,实现了流式响应的节流滚动

  5. 多页面架构: Vite 多页面配置、手动分包优化、跨端跳转封装

  6. 请求生命周期管理: AbortController 统一取消机制

这些技术方案在实际应用中表现良好,性能指标符合预期。