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

一、准备

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

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

二、集成

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

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

3. home.ts

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Md5 } from 'ts-md5/dist/md5'; declare let JMessage: any; @Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
JIM: any;
constructor(
public navCtrl: NavController,
private alertCtrl: AlertController
) {} ionViewDidLoad() {
let time = new Date().getTime(); // 获取时间戳
let sign = `appkey=7e42e869baa2fbca8ccb823c&timestamp=${time}&random_str=022cd9fd995849b58b3ef0e943421ed9&key=022cd9fd995849b58b3ef0e943421ed9`; // 签名明文
let _signature = Md5.hashStr(sign); // 使用md5加密
// 开始初始化
this.JIM = new JMessage();
this.JIM.init({
appkey: '7e42e869baa2fbca8ccb823c', // 在极光平台注册的 IM 应用 appkey
random_str: '022cd9fd995849b58b3ef0e943421ed9', // 20-36 长度的随机字符串, 作为签名加 salt 使用
signature: _signature, // 签名,10 分钟后失效(只针对初始化操作,初始化成功则之后的操作跟签名无关)
timestamp: time.toString() // 当前时间戳,用于防止重放攻击,精确到毫秒
})
.onSuccess(function(data) {
console.dir(data);
})
.onFail(err => {
console.dir(err);
});
this.JIM.onMsgReceive(data => {
console.dir(data);
});
} login() {
this.JIM.login({
username: 'jim01',
password: 'a19881122a'
}).onSuccess(data => {
this.alertCtrl
.create({
message: '登录成功!'
})
.present();
});
}
}

PS:

签名生成算法如下:

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

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

4. home.html

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header> <ion-content padding>
<button block ion-button (click)="login()">登录</button> </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. 【XSY2988】取石子 博弈论

    题目描述 有 \(n\) 堆石子,每堆石子的个数是 \(c_i\). Alice 和 Bob 轮流取石子(先后手未定),Alice 每次从一堆中取 \(a\) 个,Bob每次从一堆中取 \(b\) 个 ...

  2. 2.5 time 模块

  3. purge旧的ubuntu 的linux内核

    https://www.sysgeek.cn/remove-old-kernels-ubuntu-16-04/

  4. 2733: [HNOI2012]永无乡 线段树合并

    题目: https://www.lydsy.com/JudgeOnline/problem.php?id=2733 题解: 建n棵动态开点的权值线段树,然后边用并查集维护连通性,边合并线段树维护第k重 ...

  5. 从零开始学习微信小程序

    1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...

  6. Django 中使用kindeditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

  7. 使用Eclipse创建动态的web工程

    使用Eclipse创建动态的web工程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改工作区的编码 1>.点击Window选择Preferences 2>.将默 ...

  8. CMDB服务器管理系统【s5day89】:采集资产之汇报信息

    1.服务器端收到的数据和客户端的数据不一样 print(request.post) 少发了,还是少取了,说明根本没有把数据全发过来 print(request.body) 1.只把字典的key给我发过 ...

  9. expprt与环境变量

    一.Windows 环境变量 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似 ...

  10. 前端面试题整理—Vue篇

     1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...