小程序WebSocket打印文字兼自动滚动（chatgpt）

• 建立WebSocket连接
• 使用队列存储
• 通过队列shift方法来打印消息内容

<template>
  <view class="create-story__wrap">
    <view class="create-story__wrap--desc"
      >将根据故事参数和宝贝信息生成故事。如需修改，请前往“首页”的“故事参数设置”和“我的”中的“宝贝信息”进行设置。</view
    >
    <up-textarea
      :customStyle="{
        fontSize: '30rpx'
      }"
      v-model="storyTextare"
      maxlength="40"
      placeholder="请输入你的故事描述"
      count
    ></up-textarea>
    <!-- 生成故事按钮 -->
    <submitBtn
      :textValue="storyTextare"
      :content="'生成故事'"
      @handleSubmit="sendMsg"
    />
  </view>
  <!-- 故事生成弹窗 -->
  <view
    :class="{ 'is-active': isShow }"
    class="popup-container"
  >
    <view
      class="popup-bg"
      @click="closePopup"
    ></view>
    <view class="popup-content">
      <view class="flex-div-between">
        <view v-if="createStoryLoading">故事生成中...</view>
        <view v-else="createStoryLoading">故事生成完成</view>
        <view class="close-button">
          <up-icon
            name="close"
            size="24"
            @click="closePopup"
          ></up-icon>
        </view>
      </view>
      <!-- 这里放置弹窗内容 -->
      <scroll-view
        :scroll-top="scrollTops"
        scroll-y
        class="popup-content__desc"
        @scroll="handleUserScroll"
      >
        <view
          v-for="(item, index) in messageList"
          :key="index"
          class="popup-content__message"
        >
          <text
            class="popup-content__message-text"
            user-select
            >{{ item.displayedText }}</text
          >
        </view>
      </scroll-view>
      <view
        v-if="!createStoryLoading"
        class="popup-content__btn"
      >
        <view
          class="popup-content__btn--repeat"
          @click="sendMsg"
          >再次生成</view
        >
        <view
          class="popup-content__btn--send"
          @click="onSend"
          >推送至设备</view
        >
      </view>
    </view>
  </view>
  <!-- 蓝牙提示弹窗 -->
  <popBluetooth
    v-if="isShowPop"
    :popAuthTipType="popAuthTipType"
    :isShow="isShowPop"
    @closePop="closePop"
    @hanldeConnect="initConnectBluetooth"
  />
</template>

<script setup>
import { onShow, onUnload } from '@dcloudio/uni-app'
import { ref, nextTick } from 'vue'
import { useBluetoothStore } from '@/stores/bluetoothStore.js'
import { useStoryStore } from '@/stores/storyStore.js'
import { useUserStore } from '@/stores/userStore.js'
import { storeToRefs } from 'pinia'
import { productDevicesObj } from '@/utils/config-data.js'
import { iotDeviceActivateApi } from '@/api/xiaoice.js'

// pinia获取故事实例
const storyStore = useStoryStore()
const { deviceSecret } = storeToRefs(storyStore)
const { setdeviceSecret } = storyStore
// pinia获取蓝牙实例
const bluetoothStore = useBluetoothStore()
const { isShowPop, popAuthTipType, wifi_state, isConnectBle, bindDeviceModel } =
  storeToRefs(bluetoothStore)
const {
  setPopState,
  setIsConnectBle,
  connectBluetooth,
  checkBluetooth,
  notifyBLECharacteristicValueChange,
  writeBLECharacteristicValue
} = bluetoothStore
// pinia获取宝宝信息
const userStore = useUserStore()
const { babayState } = storeToRefs(userStore)

// 宝贝信息
const babyInfoStr = ref('')
// 用户的uuid
const uuid = uni.getStorageSync('userInfo').uuid
// IOT设备的productId
const productId = productDevicesObj[bindDeviceModel.value].productId
// IOT设备的SN
const deviceId = uni.getStorageSync('serialNo')
// 鉴权失败，重新获取密钥secret
let secretFlag = false
// 生成故事的描述
const storyTextare = ref('喜羊羊故事')
// 生成故事的内容数组
const messageList = ref([])
// 生成故事的音频数组
const messageAudioList = ref([])
// 用于存储接收到的消息队列
const messageQueue = ref([])
// 用于标记当前是否正在打印消息
const isTyping = ref(false)
// 故事生产中的loading
const createStoryLoading = ref(true)
// 设置竖向滚动条位置
const scrollTops = ref(0)
// 用户是否滚动的标志
const userScrolled = ref(false)

onShow(() => {
  // 小程序与设备建立蓝牙连接
  initConnectBluetooth()
})

// 初始化蓝牙与设备建立蓝牙连接
const initConnectBluetooth = () => {
  if (productDevicesObj[bindDeviceModel.value]?.isBluetoothControl) {
    connectBluetooth(true).then(() => {
      console.log('蓝牙connect')
      // IOT设备激活
      iotDeviceActivate()
      // 获取宝贝信息
      getBabyInfo()
      // 开始监听特征值uuid的变化
      listenCharacterUuid()
    })
  }
}

// 设置加载动画状态
const setLoadingStatus = (payload) => {
  if (payload) {
    uni.showLoading({
      title: '推送中...',
      mask: true
    })
  } else {
    uni.hideLoading()
  }
}

// 是否开启了蓝牙监听
let isOpenNotify = ref(false)
// 开启监听，监听蓝牙发送的内容
const listenCharacterUuid = (packetValue, packetType) => {
  try {
    isOpenNotify.value = true
    // 监听特征值的变化
    notifyBLECharacteristicValueChange().finally(() => {
      // 接收蓝牙数据
      onBLECharacteristicValueChange()
    })
  } catch (error) {
    console.log('listenCharacterUuid error', error)
  }
}

// 接收蓝牙数据
const onBLECharacteristicValueChange = () => {
  uni.onBLECharacteristicValueChange((res) => {
    console.log('接收设备数据', res)
    const resHex = ab2hex(res.value)
    console.log('接收回来的值', resHex)
    // 最后将16进制转换为ascii码，就能看到对应的结果
    const packetType = fromCharCode(resHex[1])
    const result = fromCharCode(resHex[2])
    console.log('接收到的包类型', packetType)
    console.log('接收到的设备的消息', result)

    // 更新设备配置
    unpdateDeviceConfig(packetType, result)
  })
}

// 更新设备控件状态
const unpdateDeviceConfig = (packetType, result) => {
  if (packetType === 22) {
    // 数据校验成功0x01、播放中0x21
    if (result === 1 || result === 33) {
      // 关闭loading状态
      closeLoadingStatus(false)
      // 关闭弹窗并toast提示
      isShow.value = false
      uni.navigateBack({
        delta: 1
      })
      const timer = setTimeout(() => {
        uni.$u.toast('已推送至设备')
        clearTimeout(timer)
      }, 500)
    }
    if (result === 2 || result === 37) {
      console.log('数据校验失败')
      // 关闭loading状态
      closeLoadingStatus(false)
      // 推送失败
      uni.$u.toast('推送失败')
    }
    if (result === 3) {
      console.log('数据校验中')
      // 开启loading状态
      setLoadingStatus(true)
    }
  }
}

// 向蓝牙发送数据
const HeartSubmit = (packetValue, packetType) => {
  // 检查用户是否授权了蓝牙
  checkBluetooth()
    .then((res) => {
      // 蓝牙已开启
      if (res.available) {
        // 如果未开启蓝牙监听功能，则开启
        if (!isOpenNotify.value) {
          listenCharacterUuid(packetValue, packetType)
        }

        // 传递给蓝牙json格式的字符串
        console.log('包的值：', packetValue)
        console.log('包类型：', packetType)

        const bufferData = textToBinaryAgreement(packetValue)
        console.log('bufferData', bufferData)
        bufferData.forEach((item, index) => {
          const packetItemData = assemblePacket(
            packetType,
            index,
            bufferData.length,
            item
          )
          console.log('分发的数据：', packetItemData)

          // 向设备发送数据
          writeBLECharacteristicValue(packetItemData)
            .then(() => {
              // 发送数据成功
              console.log('发送数据成功')
            })
            .catch((error) => {
              console.log('HeartSubmit发送失败', error)
              // 处理当前点击控件与设备蓝牙连接断开弹窗提示开启，并自动重连蓝牙
              checkDeviceBlueState(packetValue, packetType)
            })
        })
      } else {
        // 蓝牙未开启
        console.log('蓝牙未开启')
        setIsConnectBle(false)
        // 用户未授权手机蓝牙权限
        if (!isShowPop.value) {
          setPopState(true, 0)
        }
      }
    })
    .catch((error) => {
      console.error('获取蓝牙状态失败', error)
      // 用户未授权小程序蓝牙权限
      setPopState(true, 1)
      setIsConnectBle(false)
    })
}

// 检查设备的蓝牙状态，若开启了蓝牙则直接执行控件指令，未开启则弹窗提示
const checkDeviceBlueState = (value, controlType) => {
  // 连接蓝牙设备
  connectBluetooth(true)
    .then(() => {
      console.log('蓝牙connect', value, controlType)
      // 开始监听特征值uuid的变化
      listenCharacterUuid(value, controlType)
    })
    .catch((error) => {
      console.error('checkDeviceBlueState error', error)
    })
}

// 关闭蓝牙提示弹出
const closePop = () => {
  setPopState(false, -1)
  // 进行初始化和连接蓝牙
  if (isConnectBle.value) {
    // 小程序与设备建立蓝牙连接
    initConnectBluetooth()
  }
}

// IOT设备激活
const iotDeviceActivate = async (type) => {
  // 当前设备没有激活则激活
  if (!deviceSecret.value) {
    const params = {
      productId,
      deviceId
    }
    const res = await iotDeviceActivateApi(params)
    console.log('res', res)
    if (res.statusCode === 200) {
      setdeviceSecret(res.data.secret)

      // 鉴权失败，重连激活并生成故事
      if (type === 'sendMsg') {
        initWebSocket(type)
      }
    }
  }
}

// 宝贝信息
const getBabyInfo = () => {
  // 使用 for...in 循环遍历对象的键和值
  for (const key in babayState.value.babyUserInfo) {
    if (babayState.value.babyUserInfo.hasOwnProperty(key)) {
      console.log(`${key}: ${babayState.value.babyUserInfo[key]}`)
      if (babayState.value.babyUserInfo[key]) {
        if (key === 'name') {
          babyInfoStr.value += `#宝贝昵称：${babayState.value.babyUserInfo[key]}`
        }
        if (key === 'sex') {
          babyInfoStr.value += `#宝贝性别：${babayState.value.babyUserInfo[key]}`
        }
        if (key === 'birthday') {
          babyInfoStr.value += `#出生年月：${babayState.value.babyUserInfo[key]}`
        }
        if (key === 'chineseAbillity') {
          babyInfoStr.value += `#中文能力：${babayState.value.babyUserInfo[key]}`
        }
        if (key === 'themePreferences') {
          babyInfoStr.value += `#主题偏好：${babayState.value.babyUserInfo[key]}`
        }
      }
    }
  }
  console.log('宝贝信息：', babyInfoStr.value)
}

// WebSocket是否处于连接状态
let socketOpen = false
// WebSocket重连状态
let lockReconnect = false
// 初始化WebSocket
const initWebSocket = (type) => {
  websocketConnect()
  websocketOnopen(type)
  websocketOnmessage()
  websocketOnclose()
  websocketOnerror()
}

// 连接WebSocket
const websocketConnect = () => {
  console.log(import.meta.env.VITE_XIAOICE_BASE_WS_URL)
  uni.connectSocket({
    url: `${
      import.meta.env.VITE_XIAOICE_BASE_WS_URL
    }/openapi/v1/iot-ws/characters/xiyangyang/sessions/story-${uuid}`, // WebSocket 服务器地址
    success: () => {
      console.log('WebSocket连接成功')
      socketOpen = true
    },
    fail: () => {
      socketOpen = false
      reConnect()
    }
  })
}

// 监听WebSocket连接打开事件
const websocketOnopen = (type) => {
  uni.onSocketOpen(() => {
    console.log('WebSocket连接已打开')
    if (type === 'sendMsg') {
      sendMsg()
    }
  })
}

// 向后端发送命令(发送数据,需要先uni.connectSocket,并在uni.onSocketOpen回调之后才能发送)
const sendMsg = (type) => {
  console.log('连接状态', socketOpen)
  // 如果WebSocket未连接或者无设备则直接不做任何处理
  if (!socketOpen) {
    initWebSocket('sendMsg')
    return
  }

  // 打开生成故事弹窗并设置生成故事动画状态
  isShow.value = true
  messageList.value = []
  messageAudioList.value = []
  createStoryLoading.value = true

  // 发送数据
  const params = {
    context: {
      productId,
      deviceId,
      deviceSecret: deviceSecret.value
    },
    header: {
      name: 'chat.text_in',
      requestId: 'test123',
      ttsConfig: {
        outputType: 'OSS_LINK'
      }
    },
    payload: {
      text: storyTextare.value + babyInfoStr.value
    }
  }
  // 处理发送数据
  const data = JSON.stringify(params)
  console.log('发送的数据：', data)
  // 通过 WebSocket 连接发送数据
  uni.sendSocketMessage({
    data,
    success: (res) => {
      console.log('res', res)
    },
    fail: (error) => {
      console.log('sendSocketMessage', error)
    }
  })
}

// 监听WebSocket接收消息事件
const websocketOnmessage = () => {
  uni.onSocketMessage((res) => {
    const receiveMsg = JSON.parse(res.data)
    console.log('收到消息：', receiveMsg)
    // 鉴权失败，请核对context信息
    if (receiveMsg.payload?.errno === '400403' && !secretFlag) {
      secretFlag = true
      isShow.value = true
      setdeviceSecret('')
      iotDeviceActivate('sendMsg')
    }
    // 故事生成中，接收故事内容
    if (receiveMsg.payload?.text?.text) {
      const newMessage = {
        fullText: receiveMsg.payload.text.text + '\n\n',
        displayedText: '',
        audioUrl: receiveMsg.payload.audio?.audioUrl || null
      }
      messageQueue.value.push(newMessage)
      processMessageQueue()
    }
  })
}

// 监听WebSocket关闭事件
const websocketOnclose = () => {
  uni.onSocketClose((res) => {
    console.log('连接已关闭：', res)
    socketOpen = false
    if (res?.code !== 1000) {
      console.log('WebSocket 非正常断开重连...')
      reConnect()
    }
  })
}

// 监听WebSocket错误事件
const websocketOnerror = () => {
  uni.onSocketError((res) => {
    console.error('WebSocket出现错误：', res)
    socketOpen = false
    if (res?.code !== 1000) {
      console.log('WebSocket 非正常断开重连...')
      reConnect()
    }
  })
}

// 尝试重连WebSocket
const reConnect = () => {
  if (lockReconnect) return
  lockReconnect = true
  // 没连接上会一直重连，设置延迟避免请求过多
  const websocketTimer = setTimeout(async () => {
    console.log('尝试重连...')
    // WebSocket断开时需要重新连接
    initWebSocket()
    lockReconnect = false
    clearTimeout(websocketTimer)
  }, 5000)
}

// 关闭WebSocket连接
const closeWebSocket = () => {
  uni.closeSocket({
    code: 1000,
    reason: 'close reason from client',
    success: (res) => {
      console.log('uni.closeSocket success', res)
    },
    fail: (error) => {
      console.log('uni.closeSocket fail', error)
    },
    complete: () => {
      console.log('uni.closeSocket complete')
    }
  })
}

// 处理内容打印样式
const startTypingEffect = (message, callback) => {
  message.displayedText = ''
  let charIndex = 0

  const intervalId = setInterval(() => {
    if (charIndex < message.fullText.length) {
      message.displayedText += message.fullText[charIndex]
      charIndex++
      nextTick(() => {
        if (!userScrolled.value) {
          scrollToBottom()
        }
      })
    } else {
      clearInterval(intervalId)
      callback()
    }
  }, 100) // 调整打字速度
}

// 队列循环打印队列中的消息
const processMessageQueue = () => {
  // 故事生成完成
  if (messageQueue.value.length === 0) {
    createStoryLoading.value = false
    console.log('音频列表：', messageAudioList.value)
    return
  }

  if (messageQueue.value.length > 0 && !isTyping.value) {
    isTyping.value = true
    const newMessage = messageQueue.value.shift()
    messageList.value.push(newMessage)

    // 如果有 audioUrl，添加到 messageAudioList 数组中
    if (newMessage.audioUrl) {
      messageAudioList.value.push(newMessage.audioUrl)
    }

    startTypingEffect(newMessage, () => {
      isTyping.value = false
      processMessageQueue()
    })
  }
}

// 监听用户滚动事件
const handleUserScroll = (event) => {
  // 如果不是打印自动触发的滚动，则认为是用户滚动
  if (!Number.isInteger(event.detail.scrollTop)) {
    userScrolled.value = true
  }
}

// 打印自动滚动功能
const scrollToBottom = () => {
  nextTick(() => {
    const query = uni.createSelectorQuery().select('.popup-content__desc')
    query
      .boundingClientRect((rect) => {
        if (rect) {
          // 无滚动条方式自动滚动方式
          // uni.pageScrollTo({
          //   scrollTop: rect.bottom,
          //   duration: 300
          // })
          // 有滚动条自动滚动方式
          scrollTops.value += rect.bottom
        }
      })
      .exec()
  })
}

// 弹窗显隐状态
const isShow = ref(false)
// 关闭生成故事弹窗
const closePopup = () => {
  isShow.value = false
  messageList.value = []
  messageAudioList.value = []
  createStoryLoading.value = false
}

// 推送至设备
const onSend = () => {
  // 向设备发送数据
  HeartSubmit(
    JSON.stringify(messageAudioList.value),
    blePacketTypeObj['play_url']
  )
}

onUnload(() => {
  console.log('返回上一页')
  // 生成故事完成后关闭WebSocket连接
  closeWebSocket()
})
</script>

<style lang="scss" scoped>
:deep(.u-button) {
  height: 80rpx !important;
}

:deep(.u-textarea__field) {
  font-size: 30rpx !important;
}

.create-story__wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 220rpx;
  padding: 0 40rpx;
  color: #000000;
  font-size: 30rpx;

  &--desc {
    margin-top: 30rpx;
    margin-bottom: 60rpx;
    color: var(--text-color);
    font-size: 26rpx;
  }
}

.theme-performance-box {
  margin-bottom: 20px;
}

.temme-performance-box--tag {
  display: flex;
  flex-wrap: wrap;
  padding-left: 20rpx;
}

.common-text__style {
  font-size: 30rpx;
  color: var(--text-color);
  margin-bottom: 20px;
}

.tag-item__theme {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26%;
  height: 60rpx;
  background: var(--common-color);
  border: 2rpx solid var(--common-color);
  color: var(--text-color);
  border-radius: 8rpx;
  font-size: 30rpx;
  margin: 15rpx 20rpx;
}

.active-tag {
  background: var(--XYY--light--theme-color);
  color: var(--XYY--theme-color);
  border: 2rpx solid var(--XYY--theme-color);
}

.popup-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 19999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.popup-container.is-active {
  opacity: 1;
  pointer-events: auto;
}

.popup-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 19999;
}

.popup-content {
  position: relative;
  z-index: 20000;
  width: 100%;
  background-color: white;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding: 40rpx;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;

  &__desc {
    box-sizing: border-box;
    margin: 40rpx 0;
    padding: 0 20rpx;
    border-radius: 16rpx;
    color: #1d2129;
    font-size: 28rpx;
    max-height: 600rpx;
    overflow-y: scroll;
  }

  &__message-text {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  &__btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20rpx;

    &--repeat {
      box-sizing: border-box;
      padding: 15rpx 30rpx;
      border: 2rpx solid var(--XYY--theme-color);
      color: var(--XYY--theme-color);
      font-size: 28rpx;
      border-radius: 8rpx;
    }

    &--send {
      box-sizing: border-box;
      padding: 15rpx 30rpx;
      background: var(--XYY--theme-color);
      color: #fff;
      font-size: 28rpx;
      border-radius: 8rpx;
    }
  }
}

.popup-container.is-active .popup-content {
  transform: translateY(0);
}

.close-button {
  display: flex;
  justify-content: flex-end;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.flex-div-between {
  display: flex;
  justify-content: space-between;
  font-size: 30rpx;
}
</style>