即时聊天：前端react+极光IM

首先在官网下载极光IM的SDK

下载地址：https://docs.jiguang.cn/jmessage/resources

由于我开发app时用的是react，所以为了方便开发，SDK优先选择使用Web Sdk

下载解压完之后，将文件直接复制到项目中，然后在网页中引入

<script src='./static/jmessage-sdk-web.2.6.0.min.js'></script>

这个文件里面有demo，基本把极光IM当前可以用的功能全都展示出来了，大家可以把这个文件里网页直接打开试试看，然后花点时间看看这个demo。

实际开发中我习惯把需要用到的功能统一写在一个方法里面方便调用，
下面就是一个即时聊天的实现，在实际开发中大家可以按照自己的需求来完善需要的功能，下面的写法可以参考一下，写的有什么问题也希望可以指出

开发

这里我创建了一个jmessage-method.js文件，把需要用到的jmessage功能统一写在这里， 由于都是这些API都是异步的，我们就采用promose的方式来返回结果

/**
 * 用来整理JIM的公共方法
 */
let JIM = new JMessage()
export default {
}

初始化（鉴权）

    init() {
       return new Promise((resolve, reject) => {
            JIM.init({
                "appkey": '4f7aef34fb361292c566a1cd',
                "random_str": "404",
                "signature": '7db047a67a9d7293850ac69d14cc82bf',
                "timestamp": 1507882399401,
                "flag": 1
            }).onSuccess((data) => {
                resolve({code:1})
            }).onFail((e) => {
                reject({message:e})
            });
        })
    },

参数说明:

• appkey : 开发者在极光平台注册的 IM 应用 appkey
• random_str : 20-36 长度的随机字符串, 作为签名加 salt 使用
• timestamp : 当前时间戳，用于防止重放攻击，精确到毫秒
• signature : 签名，10 分钟后失效（只针对初始化操作，初始化成功则之后的操作跟签名无关）

签名生成算法如下:

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

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

如果只是测试阶段的话，可以且先用上面代码块的参数，但是由于这是官方提供的，所以很容易账号重复。
在初始化成功之后就可以开始正式开发了

我这里要先写两个页面：一个登录页面，一个聊天页面

下面就是基本两人对聊的时候需要用到的API

import {AM} from "./index"; import PubSub from "pubsub-js"; /**  * 用来整理JIM的公共方法  */ let JIM = new JMessage() let appKey = '4f7aef34fb361292c566a1cd'

export default {

    //初始化
    init() {
        return new Promise((resolve, reject) => {
            JIM.init({
                "appkey": appKey,
                "random_str": "404",
                "signature": '7db047a67a9d7293850ac69d14cc82bf',
                "timestamp": 1507882399401,
                "flag": 1
            }).onSuccess((data) => {
                resolve({code:1})
            }).onFail((e) => {
                reject({message:e})
            });
        })
    },
    //注册
    register(data){
        return new Promise((resolve, reject) => {
            JIM.register({
                'nickname' : data.nickname,//昵称
                'username' : data.username,//账号
                'password': data.password,//密码
            }).onSuccess(function(data) {
                resolve('注册成功')
            }).onFail(function(e) {
                reject(e)
            });
        })
    },
    //登录
    login(AccountData){
        return new Promise((resolve, reject) => {
            JIM.login({
                'username': AccountData.username,
                'password': AccountData.password,
            }).onSuccess(function(data) {
                //登录成功之后直接获取账号的历史记录
                JIM.onSyncConversation((res)=> {
                    //先把获取到的历史数据简化成我们要的数据（这里按需而变）
                    let dataSource = res[0]
                    let chatList = []
                    for(let item of dataSource.msgs){
                        let content = item.content
                        let chatItem = {
                            name: content.from_name,
                            type:content.from_id === AccountData.username ? 'sent' : 'received',//判断是谁说的话
                            text: content.msg_body.text,
                            avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg',
                        }
                        chatList.push(chatItem)
                    }
                    let data ={userName:dataSource.from_username,chatList:chatList}
                    resolve(data)
                })
            })
        })
    },

    //实时监听收到的数据
    onMsgReceive(){
        JIM.onMsgReceive((data)=> {
            // 利用PubSub把新数据发送到订阅的组件上（该插件前面的文章有写）
            PubSub.publish('newMessage',data)
        })
    },

    //发送单聊消息
    sendSingleMsg(data){
        return new Promise(((resolve, reject) => {
            JIM.sendSingleMsg({
                'target_username' : data.target,//发送目标
                'appkey' :  appKey,
                'content' : data.value,
                'no_offline' : false,
                'no_notification' : false,
                need_receipt:true
            }).onSuccess(function(data,msg) {
                // 发送成功之后返回发送结果
                resolve(data)
            }).onFail(function(data) {

            });
        }))

    },

}

测试的时候我们需要先调用两次上文中的注册方法，先获得两个可供测试的账号，然后再使用

下面就是我写的小demo实操展示
这里还有很多功能包括好友、群组等都没写，有需求的话可以尝试着把里面的功能都一一试过。