JuggleIM Web 集成示例-CSDN博客

本文链接：https://blog.csdn.net/JuggleIM/article/details/142104436

基于 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>