4dkankan-components/docs/examples/daikan/customer.vue

<script setup lang="ts">
import { onMounted, onUnmounted, provide, ref } from 'vue'
import { KkDaikan } from 'kankan-components'
import type { DaikanUserInfoType } from 'kankan-components'
const loading = ref(false)

const userInfo = ref<DaikanUserInfoType>({
  userId: 'test-user-222',
  roomId: 'test-roomid-1',
  avatar: '',
  nickName: 'customer',
  role: 'customer',
})
const socketUrl = ref('wss://testws.4dkankan.com')
const socketUrlLib = ref(
  'https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js'
)

onMounted(() => {
  const __win = window as any
  if (!__win.__sdk) {
    const __sdk = (__win.__sdk = new __win.KanKan({
      num: 'KJ-t-wOXfx2SDFy',
      server: '#DEMOSEVER#',
    }))
    provide('__sdk', __sdk)
    __sdk.Scene.on('ready', () => (loading.value = true))
    __sdk.mount('#scene').render()
  }
})
onUnmounted(() => {
  const __win = window as any
  if (__win.__sdk) {
    __win.__sdk = null
  }
})
</script>

<template>
  <div id="scene" class="scene">
    <Teleport v-if="loading" to=".kankan-plugins">
      <div xui_daikan_view>
        <kk-daikan
          :socket-lib="socketUrlLib"
          :user-info="userInfo"
          :socket-url="socketUrl"
        />
      </div>
    </Teleport>
  </div>
</template>
<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.scene {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>