互动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>