基于 JuggleIM IMSDK 集成 Web 应用的 QuickStart 示例，方便广大开发者参考使用，希望能给大家带来一些帮助。
前期准备
1、在 JuggleIM 开发者后台 创建应用获取 AppKey 和 Secret。
2、自己调用服务端 API 获取 Token 或在开发者后台的 -> 选择应用-> 开发工具 -> API -> 用户相关中，调用用户注册接口，获取两个测试 Token。
3、安装依赖最新版本 JuggleIM Web SDK
4、根据集成文档逐步集成。
备注：如果使用 npm 安装，请将 script 标签引入替换为 import JuggleChat from 'jugglechat-websdk';
代码示例
以下是完整的 Demo 示例，更完整的 Demo 以上传至 Github
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IM</title> <script src="./juggleim-dev-**.js"></script> <style> .container{ height: 200px; width: 600px; background-color: rgb(119, 128, 226); margin: 200px auto; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: bold; border-radius: 10px; } </style></head><body> <div class="container">请打开浏览器控制台查看结果</div> <script> // 准备基础信息 let appkey = 'Your AppKey'; let token = 'Your Token'; // 步骤 1: 初始化 SDK, 全局只需初始化一次 let juggle = JuggleChat.init({ appkey }); let { Event, ConnectionState, ConversationType, MessageType } = JuggleChat; // 步骤 2: 设置状态监听，全局只需设置一次 juggle.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: 设置消息监听，全局只需设置一次 juggle.on(Event.MESSAGE_RECEIVED, (message) => { console.log(message); }); // 步骤 4: 连接，全局只需调用一次，消息相关、会话相关接口必须连接成功后才可调用 juggle.connect({ token }).then((result) => { console.log(result) }, (error) => { console.log(error) }); </script></body></html>