<script setup>
import JIM from "jugglechat-websdk";

// 准备基础信息
let appkey = "Your AppKey";
let token = "Your Token";

// 私有化部署后的 WebSocket 域名或 IP
let serverList = [
  'https://demo.im.com',
  'http://demo.im.com',
  'http://10.23.31.111:8080',
];
// 步骤 1: 初始化 SDK, 全局只需初始化一次
let jim = JIM.init({ appkey, serverList: serverList });
let { Event, ConnectionState, ConversationType, MessageType } = JIM;

// 步骤 2: 设置状态监听，全局只需设置一次
jim.on(Event.STATE_CHANGED, ({ state, user }) => {
  if (ConnectionState.CONNECTING == state) {
    console.log("im is connecting");
  }
  if (ConnectionState.CONNECTED == state) {
    // user => { id: 'xxx' }
    console.log("im is connected", user);
  }
  if (ConnectionState.DISCONNECTED == state) {
    console.log("im is disconnected");
  }
});

// 步骤 3: 设置消息监听，全局只需设置一次
jim.on(Event.MESSAGE_RECEIVED, message => {
  console.log(message);
});

// 步骤 4: 连接，全局只需调用一次，消息相关、会话相关接口必须连接成功后才可调用
jim.connect({ token }).then(
  result => {
    console.log(result);
  },
  error => {
    console.log(error);
  }
);
</script>

<template>
  <div class="container">请打开浏览器控制台查看结果</div>
</template>

<style scoped>
.container {
  height: 200px;
  width: 600px;
  background-color: rgb(119, 128, 226);
  margin: auto 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  border-radius: 10px;
}
</style>