互動SDK UI元件載入不出來

問題詳述

整合互動SDK的UI元件後，如：簽到、問卷、抽獎、公告、答題卡等，在講師端發起對應的功能操作後，觀看端無法展示對應的互動UI元件

解決方案與排查思路

1、檢查控制台的socket是否建立，並且能收到對應的事件通知，使用快捷鍵 F12 開啟開發者工具 => network => 點擊 ws => 查看 socket 連線。

2、需要確保互動初始化配置**updateConfig**後，才能載入互動UI元件。

<template v-if="interactInit">
    <!-- 签到 -->
    <check-in />
</template>
<script>
    import { updateConfig } from '@polyv/interactions-receive-sdk' // 初始化加载互动模块
    import checkIn from '@polyv/interactions-receive-sdk-ui-default/lib/MobileCheckIn'// 签到UI组件
    export default {
        components: {
            checkIn
        },
        data () {
            return {
                ...
                interactInit: false // 用来加载互动SDK组件时机问题，因为互动组件加载前必须初始化互动SDK配置
            }
        },
        methods: {
            createPolyvLiveSdk () {
                // 创建直播
                this.liveSdk = new PolyvLiveSdk({
                    ...
                })
                this.liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
                    ...
                    this.loadInteractionsReceive() // 初始化互动SDK配置
                   this.interactInit = true // 加载互动UI组件
                })
            },
            loadInteractionsReceive () {
                const appSecret = '';// 账号 appSecret
                const appId = '';// 账号 appId
                const userInfo = {
                  nick: '观众昵称',// 昵称
                  pic: '',// 头像
                  userId: '123456',// 观众id
                };
                const channelInfo = {
                  channelId: '',// 频道号
                  roomId: '',// 房间号
                  sessionId: '', // 频道场次id
                };
                updateConfig({
                  userInfo: userInfo, // 观众信息
                  channelInfo: channelInfo, // 频道信息
                  socket: socket,// 此处传入 socketio 实例
                  getViewerApiToken: (callback) => {// viewerApiToken 更新函数
                      ...
                  },
                })
            }
        }
    }
</script>