feat:自动连接ws

张含笑

2026-01-15 bb26cab809a95972e74375b999acb3a22d7fa9d9

feat:自动连接ws

 applications/mobile-web-view/src/appPages/voiceCallDetail/index.vue

@@ -13,7 +13,7 @@
            </div>
        </div>
  
        <div class="button-group">
        <div class="button-group" v-if="false">
            <button @click="connectWS" :disabled="connected" class="btn btn-connect">连接WS</button>
        </div>
      <!--  头像-->
@@ -30,21 +30,21 @@
        </div>
  
        <div class="status-group">
            <strong class="status-text">状态：<span :style="{color: getStateColor(state)}">{{ state }}</span></strong>
<!--            <strong class="status-text">状态：<span :style="{color: getStateColor(state)}">{{ state }}</span></strong>-->
            <strong v-if="state==='in-call'" class="status-text">通话时长：{{ durationText }}</strong>
        </div>
      </div>
  
      <div class="tip-message">
        <small>提示：若 getUserMedia 不可用，请用 https 或 localhost 访问页面。</small>
      </div>
<!--      <div class="tip-message">-->
<!--        <small>提示：若 getUserMedia 不可用，请用 https 或 localhost 访问页面。</small>-->
<!--      </div>-->
  
      <div class="log-container">
        <div class="log-box">
            <div class="log-title">日志信息：</div>
            <pre class="log-content">{{ logText }}</pre>
        </div>
      </div>
<!--      <div class="log-container">-->
<!--        <div class="log-box">-->
<!--            <div class="log-title">日志信息：</div>-->
<!--            <pre class="log-content">{{ logText }}</pre>-->
<!--        </div>-->
<!--      </div>-->
  
      <audio ref="remoteAudio" autoplay class="hidden-audio"></audio>
    </div>
@@ -485,6 +485,8 @@
    console.log('接收参数', receiveParameters)
    // 解析URL参数
    parseUrlParams()
    // 自动连接WebSocket
    connectWS()
})

  onBeforeUnmount(() => {
@@ -495,7 +497,7 @@
  </script>
  <style scoped lang="scss">
    .call-container {
        padding: 20px;
        padding:100px 20px 20px 20px;
        min-height: 100vh;
        font-family: Arial, sans-serif;
    }
@@ -631,6 +633,7 @@
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 200px;
        img{
            width: 172rpx;
            height: 172rpx;