当前位置:首页 » 《关注互联网》 » 正文

JuggleIM Web 集成示例

23 人参与  2024年09月15日 08:01  分类 : 《关注互联网》  评论

点击全文阅读


基于 JuggleIM IMSDK 集成 Web 应用的 QuickStart 示例,方便广大开发者参考使用,希望能给大家带来一些帮助。

前期准备

1、在 JuggleIM 开发者后台 创建应用获取 AppKeySecret

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>

点击全文阅读


本文链接:http://zhangshiyu.com/post/160108.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 杜伟的发现祠堂的秘密后,全村无一活口书荒冯若琳杜伟全书在线
  • 川隐逢归客人气列表_川隐逢归客人气(顾临川沈霜音)
  • 攻略失败后,我一心求死章节彩蛋限时释出‌_林兆川顾雪爸爸妈妈全文免费无弹窗阅读_笔趣阁
  • 无端却被春风误免费赏析(孟南汐宋祁钰)_无端却被春风误免费赏析孟南汐宋祁钰
  • 岁岁不渡春风谢列表_岁岁不渡春风谢(季华厉朝圣宗)
  • [妻子出去旅游,在大山里失联了]无弹窗阅读_[赵颖孟志泽云云]节选角色羁绊特辑‌
  • 女儿死后,爸妈为我老公和凶手举办婚礼全书+后续+结局(周明昊)列表_女儿死后,爸妈为我老公和凶手举办婚礼全书+后续+结局(周明昊)女儿死后,爸妈为我老公和凶手举办婚礼全书+后续+结局在线
  • 全文老公为佛女的狗点天灯后,我死遁离开全书在线(江梵音桃星)列表_全文老公为佛女的狗点天灯后,我死遁离开全书在线
  • 当爱恨如潮生乔若梨全(裴叙白乔若梨)全书浏览_当爱恨如潮生乔若梨全全书浏览
  • 宁安不归后续全文免费阅读_[顾云舟宝云沈渊]限时免费***章节速览
  • 重生后,我逆光而行在线赏析(沈墨寒陆瑶光)全书免费_(沈墨寒陆瑶光)重生后,我逆光而行在线赏析后续(沈墨寒陆瑶光)
  • 盛景太匆匆精心打造(宁若曦沈砚舟)全书浏览_盛景太匆匆精心打造全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1