ionic2中使用极光IM的WebSDK实现即时聊天
本文主要介绍如何在ionic项目中集成极光IM的WebSDK,详细文档可参考官方介绍。
一、准备
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×tamp=${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}×tamp={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实现即时聊天的更多相关文章
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- Ionic项目中使用极光推送
Ionic项目中使用极光推送-android 对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...
- Ionic2系列——在Ionic2中使用高德地图
之前讲过了如何在Ionic2中使用第三方库,因为第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件,才能被TypeScript正确识别并编译.好在大多数的第三方库已经有了定义文件 ...
- Ionic2中集成腾讯Bugly之自定义插件
Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...
- Ionic2中集成第三方控件Sweetalert
Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...
- Ionic2中腾讯Bugly异常捕获以及上报
Ionic2混合开发,入坑系列:Ionic2中腾讯Bugly异常捕获以及上报 1.Ionic2中处理全局异常,直接继承IonicErrorHandler即可,代码如下 import { IonicEr ...
- ionic2中使用自定义图标
在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...
- Ionic2中使用第三方插件极光推送
不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方 ...
- 在ionic/cordova中使用极光推送插件(jpush)
Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容:
随机推荐
- 【XSY2988】取石子 博弈论
题目描述 有 \(n\) 堆石子,每堆石子的个数是 \(c_i\). Alice 和 Bob 轮流取石子(先后手未定),Alice 每次从一堆中取 \(a\) 个,Bob每次从一堆中取 \(b\) 个 ...
- 2.5 time 模块
- purge旧的ubuntu 的linux内核
https://www.sysgeek.cn/remove-old-kernels-ubuntu-16-04/
- 2733: [HNOI2012]永无乡 线段树合并
题目: https://www.lydsy.com/JudgeOnline/problem.php?id=2733 题解: 建n棵动态开点的权值线段树,然后边用并查集维护连通性,边合并线段树维护第k重 ...
- 从零开始学习微信小程序
1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...
- Django 中使用kindeditor
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
- 使用Eclipse创建动态的web工程
使用Eclipse创建动态的web工程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改工作区的编码 1>.点击Window选择Preferences 2>.将默 ...
- CMDB服务器管理系统【s5day89】:采集资产之汇报信息
1.服务器端收到的数据和客户端的数据不一样 print(request.post) 少发了,还是少取了,说明根本没有把数据全发过来 print(request.body) 1.只把字典的key给我发过 ...
- expprt与环境变量
一.Windows 环境变量 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似 ...
- 前端面试题整理—Vue篇
1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...