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]修改下图内容:
随机推荐
- codeforces721C
Journey CodeForces - 721C Recently Irina arrived to one of the most famous cities of Berland — the B ...
- 【JVM】关于类加载器准备阶段的一道面试题目
一个经典的延伸问题 我们来看一个经典的延伸问题,准备阶段谈到静态变量,那么对于常量和不同静态变量有什么区别? 需要明确的是,没有人能够精确的理解和记忆所有信息,如果碰到这种问题,有直接答案当然最好:没 ...
- CF209C Trails and Glades
题目链接 题意 有一个\(n\)个点\(m\)条边的无向图(可能有重边和自环)(不一定联通).问最少添加多少条边,使得可以从\(1\)号点出发,沿着每条边走一遍之后回到\(1\)号点. 思路 其实就是 ...
- jenkins系列之插件配置(二)
第一步:下面来安装nodejs插件 第二步:可以看到,Jenkins提供了丰富的插件供开发者使用,找到需要的[NodeJS Plugin],勾选后点击安装即可 我的是已经安装了 第三步: 安装完毕后, ...
- WEB-INF 目录
WEB-INF 目录是必须的,其中包括: web.xml 文件,该 Web 基本配置,必须. classes 目录,存放 .class 文件,当然也可以将 .java 文件一并放进去. lib 目录, ...
- dubbo核心要点及下载(dubbo二)
一.dubbo核心要点 1):服务是围绕服务提供方和服务消费方的,服务提供方实现服务,服务消费方调用服务. 2):服务注册 对于服务提供方它需要发布服务,而由于应用系统的复杂性,服务的数量.类型不断的 ...
- qsort()函数详解
一 写在开头1.1 本节内容学习C语言中的qsort()函数. 二 qsort()2.1 函数原型 void qsort( void *base, size_t nmemb, size_t size, ...
- fedora make: gcc:命令未找到(解决方法)
安装C开发环境 由于gcc包需要依赖binutils和cpp包,另外make包也是在编译中常用的,所以一共需要9个包来完成安装,因此我们只需要执行9条指令即可: yum install cpp yum ...
- 第六节:WebApi的部署方式(自托管)
一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...
- [物理学与PDEs]第2章第1节 理想流体力学方程组 1.1 预备知识
1. 理想流体: 指忽略粘性及热传导的流体. 2. 流体的状态 (运动状态及热力学状态) 的描述 (1) 速度向量 $\bbu=(u_1,u_2,u_3)$: 流体微元的宏观运动速度. (2) ...