本文主要介绍如何在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. servlet篇 之 跳转问题

    servlet中的跳转: 跳转本质上是对文件传输操作 进行 封装. 例如:客户端访问一个servlet,在servlet中需要把已经写好的页面hello.html返回给客户端浏览器,需要用io来实现这 ...

  2. linux中的&&,|| 与 () 命令

    用&&连接两个命令,前一命令执成功(返回0)下一命令才会执行, 如 date && echo 1 会打印1,而data && echo 2不会打印2 & ...

  3. Yii2.0 安装使用报错:yii\web\Request::cookieValidationKey must be configured with a secret key.

    下载了Yii2.0的basic版,配置好apache之后,浏览器访问,出现如下错误: Invalid Configuration – yii\base\InvalidConfigException y ...

  4. C++:位操作基础篇之位操作全面总结

    位操作篇共分为基础篇和提高篇,基础篇主要对位操作进行全面总结,帮助大家梳理知识.提高篇则针对各大IT公司如微软.腾讯.百度.360等公司的笔试面试题作详细的解答,使大家能熟练应对在笔试面试中位操作题目 ...

  5. Python 操作集合

    Python 操作集合 集合,set,主要用于数据的关系测试和去重处理,和列表类似,可以存储数据,列表中可以存储重复的数据,但是如果转化为集合之后,数据就会进行去重,然后保留唯一值:关系测试就是求多个 ...

  6. node.js的基础知识

    第一部分知识: .命令行窗口(小黑屏).CMD窗口.终端.shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令: dir 列出当前目录下的所有文件 c ...

  7. jenkins拉源码设置参数化构建选项为tagname

    安装插件:https://mirrors.tuna.tsinghua.edu.cn/jenkins/plugins/jquery/1.12.4-0/jquery.hpi 安装插件:https://mi ...

  8. 2017-12-19python全栈9期第四天第二节之列表的增删查改之删除的pop和del和remove和clear

    #!/user/bin/python# -*- coding:utf-8 -*-li = ['zs','ls','ww','zl']# name = li.pop(1) #按索引位置删除有返回值# n ...

  9. Pandas系列(二)- DataFrame数据框

    一.初识DataFrame dataFrame 是一个带有索引的二维数据结构,每列可以有自己的名字,并且可以有不同的数据类型.你可以把它想象成一个 excel 表格或者数据库中的一张表DataFram ...

  10. 浏览器录宏重放软件-iMacros

    iMacros https://imacros.net/ iMacros v12 Now Available The world's most popular web automation, data ...