本文主要介绍如何在ionic项目中集成极光IM的WebSDK,详细文档可参考官方介绍

一、准备

1. 注册激光账号,进入开发者服务页面创建应用

2. 创建应用后须完成对应平台的推送设置,进行应用或证书绑定。

二、集成

1. 在资源下载页面下载Web SDK,解压缩后将sdk的js文件复制到项目中

2. 在src目录下的index.html中添加引用

3. home.ts

  1. import { Component } from '@angular/core';
  2. import { NavController, AlertController } from 'ionic-angular';
  3. import { Md5 } from 'ts-md5/dist/md5';
  4.  
  5. declare let JMessage: any;
  6.  
  7. @Component({
  8. selector: 'page-home',
  9. templateUrl: 'home.html'
  10. })
  11. export class HomePage {
  12. JIM: any;
  13. constructor(
  14. public navCtrl: NavController,
  15. private alertCtrl: AlertController
  16. ) {}
  17.  
  18. ionViewDidLoad() {
  19. let time = new Date().getTime(); // 获取时间戳
  20. let sign = `appkey=7e42e869baa2fbca8ccb823c&timestamp=${time}&random_str=022cd9fd995849b58b3ef0e943421ed9&key=022cd9fd995849b58b3ef0e943421ed9`; // 签名明文
  21. let _signature = Md5.hashStr(sign); // 使用md5加密
  22. // 开始初始化
  23. this.JIM = new JMessage();
  24. this.JIM.init({
  25. appkey: '7e42e869baa2fbca8ccb823c', // 在极光平台注册的 IM 应用 appkey
  26. random_str: '022cd9fd995849b58b3ef0e943421ed9', // 20-36 长度的随机字符串, 作为签名加 salt 使用
  27. signature: _signature, // 签名,10 分钟后失效(只针对初始化操作,初始化成功则之后的操作跟签名无关)
  28. timestamp: time.toString() // 当前时间戳,用于防止重放攻击,精确到毫秒
  29. })
  30. .onSuccess(function(data) {
  31. console.dir(data);
  32. })
  33. .onFail(err => {
  34. console.dir(err);
  35. });
  36. this.JIM.onMsgReceive(data => {
  37. console.dir(data);
  38. });
  39. }
  40.  
  41. login() {
  42. this.JIM.login({
  43. username: 'jim01',
  44. password: 'a19881122a'
  45. }).onSuccess(data => {
  46. this.alertCtrl
  47. .create({
  48. message: '登录成功!'
  49. })
  50. .present();
  51. });
  52. }
  53. }

PS:

签名生成算法如下:

  1. signature = md5(appkey={appkey}&timestamp={timestamp}&random_str={random_str}&key={secret})

其中 secret 为开发者在极光平台注册的 IM 应用 masterSecret。

4. home.html

  1. <ion-header>
  2. <ion-navbar>
  3. <ion-title>
  4. Ionic Blank
  5. </ion-title>
  6. </ion-navbar>
  7. </ion-header>
  8.  
  9. <ion-content padding>
  10. <button block ion-button (click)="login()">登录</button>
  11.  
  12. </ion-content>

另,文中用到的md5加密可参考这篇文章

ionic2中使用极光IM的WebSDK实现即时聊天的更多相关文章

  1. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

  2. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  3. Ionic2系列——在Ionic2中使用高德地图

    之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译.好在大多数的第三方库已经有了定义文件 ...

  4. Ionic2中集成腾讯Bugly之自定义插件

    Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...

  5. Ionic2中集成第三方控件Sweetalert

    Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...

  6. Ionic2中腾讯Bugly异常捕获以及上报

    Ionic2混合开发,入坑系列:Ionic2中腾讯Bugly异常捕获以及上报 1.Ionic2中处理全局异常,直接继承IonicErrorHandler即可,代码如下 import { IonicEr ...

  7. ionic2中使用自定义图标

    在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...

  8. Ionic2中使用第三方插件极光推送

    不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方 ...

  9. 在ionic/cordova中使用极光推送插件(jpush)

    Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容:

随机推荐

  1. codeforces721C

    Journey CodeForces - 721C Recently Irina arrived to one of the most famous cities of Berland — the B ...

  2. 【JVM】关于类加载器准备阶段的一道面试题目

    一个经典的延伸问题 我们来看一个经典的延伸问题,准备阶段谈到静态变量,那么对于常量和不同静态变量有什么区别? 需要明确的是,没有人能够精确的理解和记忆所有信息,如果碰到这种问题,有直接答案当然最好:没 ...

  3. CF209C Trails and Glades

    题目链接 题意 有一个\(n\)个点\(m\)条边的无向图(可能有重边和自环)(不一定联通).问最少添加多少条边,使得可以从\(1\)号点出发,沿着每条边走一遍之后回到\(1\)号点. 思路 其实就是 ...

  4. jenkins系列之插件配置(二)

    第一步:下面来安装nodejs插件 第二步:可以看到,Jenkins提供了丰富的插件供开发者使用,找到需要的[NodeJS Plugin],勾选后点击安装即可 我的是已经安装了 第三步: 安装完毕后, ...

  5. WEB-INF 目录

    WEB-INF 目录是必须的,其中包括: web.xml 文件,该 Web 基本配置,必须. classes 目录,存放 .class 文件,当然也可以将 .java 文件一并放进去. lib 目录, ...

  6. dubbo核心要点及下载(dubbo二)

    一.dubbo核心要点 1):服务是围绕服务提供方和服务消费方的,服务提供方实现服务,服务消费方调用服务. 2):服务注册 对于服务提供方它需要发布服务,而由于应用系统的复杂性,服务的数量.类型不断的 ...

  7. qsort()函数详解

    一 写在开头1.1 本节内容学习C语言中的qsort()函数. 二 qsort()2.1 函数原型 void qsort( void *base, size_t nmemb, size_t size, ...

  8. fedora make: gcc:命令未找到(解决方法)

    安装C开发环境 由于gcc包需要依赖binutils和cpp包,另外make包也是在编译中常用的,所以一共需要9个包来完成安装,因此我们只需要执行9条指令即可: yum install cpp yum ...

  9. 第六节:WebApi的部署方式(自托管)

    一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...

  10. [物理学与PDEs]第2章第1节 理想流体力学方程组 1.1 预备知识

    1.  理想流体: 指忽略粘性及热传导的流体. 2.  流体的状态 (运动状态及热力学状态) 的描述 (1)   速度向量 $\bbu=(u_1,u_2,u_3)$: 流体微元的宏观运动速度. (2) ...