点击链接先查看一下apicloud 环信的文档
https://docs.apicloud.com/Client-API/Open-SDK/easeChat
文档中写了很多,但官方给的文档还是有问题,之前做环信就被坑了一把,没有实现自己想要的功能,最后把所有的数据都推翻了以后,重新又写了一番,最终只采用了官方文档中的登录,退出登录,发送消息,与接收消息四个地方,聊天界面学员自己搭建,同时聊天的会话记录,页需要自己搭建,聊天消息的存储,等等
下面我只把精华的部分,登录与退出登录可参考官方文档,重点说一下搭建聊天,晒出,有兴趣的伙伴可以按照步骤去了解,
1.首先需要在apicloud中引模板easeChat,之后再html页面调用
var easeChat = api.require('easeChat');
2.之后我们需要确定的就是,单人聊天,还是多人聊天,在这里我只讲单人聊天
3.单人聊天,如果你有10个好友,那你需要创建11个本地文件,10个好友聊天记录文件,1个会话列表文件
4.本地存储文件看下面
api.writeFile({ path: 'cache://' + this_obj.info.your + '.txt', //this_obj.info.your存储的是对方的环信账号 data: JSON.stringify(ret.message) + ';', //ret.message append: true }, function(res, err) { if (res.status) { } else { api.alert({ msg: JSON.stringify(err) }); } });
5.读取存储文件看下面
api.readFile({ path: 'cache://' + this_obj.info.your + '.txt' //this_obj.info.your读取存储对方的环信账号 }, function(ret, err) { if (ret.status) { var array = []; array = ret.data.substring(0, ret.data.length - 1).split(';') this_obj.imgChat = [] for (i in array) { var objectChat = JSON.parse(array[i]) this_obj.chatMsg.push(objectChat) //将会话截成数组,组成聊天记录 } } else { api.toast({ msg: '没有聊天记录' }); } });
6.聊天记录搭建好了,开始搭建会话列表了,会话列表需要好友头像,本人头像,好友环信名字,本人环信名字,未读消息,最后一条消息的时间,还有最后一条消息,共7点,前5点需要从好友列表的中得到,未读消息需要默认每个好友未读条数都为0,将一个人的数据组成对象,然后好友有多个,需要把这些都放在数组中,
后2点,需要你接收消息的时候将返回的数据,根据环信的名字去判断是你的哪个好友,然后把信息放在会话列表中,这里说的太多了,需要给你们看一下文件
(1) 这个是好友列表本地存储文件common_ajax这个是调用的ajax封装的方法,
var data = {token: this_obj.token,us_id: ''}; var url = "/Info/my_friend"; common_ajax(url,data,function(res){ this_obj.list = res.info for (i in this_obj.list.list) { if (typeof this_obj.newChat_int.your_info === 'undefined') { this_obj.newChat_int.your_info = {} this_obj.newChat_int.your_info = this_obj.list.list[i].info.us_nickname } else { this_obj.newChat_int.your_info = this_obj.list.list[i].info.us_nickname } if (typeof this_obj.newChat_int.your_img === 'undefined') { this_obj.newChat_int.your_img = {} this_obj.newChat_int.your_img = this_obj.list.list[i].info.us_img } else { this_obj.newChat_int.your_img = this_obj.list.list[i].info.us_img } if (typeof this_obj.newChat_int.yourId === 'undefined') { this_obj.newChat_int.yourId = {} this_obj.newChat_int.yourId = this_obj.list.list[i].info.us_hx_username } else { this_obj.newChat_int.yourId = this_obj.list.list[i].info.us_hx_username } if (typeof this_obj.newChat_int.my_Name === 'undefined') { this_obj.newChat_int.my_Name = {} this_obj.newChat_int.my_Name = this_obj.list.list[i].my.us_nickname } else { this_obj.newChat_int.my_Name = this_obj.list.list[i].my.us_nickname } if (typeof this_obj.newChat_int.my_img === 'undefined') { this_obj.newChat_int.my_img = {} this_obj.newChat_int.my_img = this_obj.list.list[i].my.us_img } else { this_obj.newChat_int.my_img = this_obj.list.list[i].my.us_img } if (typeof this_obj.newChat_int.unreadNum === 'undefined') { this_obj.newChat_int.unreadNum = {} this_obj.newChat_int.unreadNum = 0 } else { this_obj.newChat_int.unreadNum = 0 }
if (typeof this_obj.newChat_int.chat=== 'undefined') { this_obj.newChat_int.chat= {} } else { this_obj.newChat_int.chat= {} }
api.writeFile({ path: 'cache://chat_img_txt.txt', data: JSON.stringify(this_obj.newChat_int) + ';', append: true }, function(res, err) { if (res.status) { // alert('好友存储') } else { api.alert({ msg: JSON.stringify(err) }); } }); } },function(res){ api.toast({ msg: res.info }); });
7.接收到消息以后,会得到的消息的messageId,这个id其实就是好友的环信名字,将会话列表循环用每个好友的环信名字与这个消息的id去对比,如果相同,那么就把这个接收到的消息,放在会话列表下这个好友的chat对象中,就可以了,
接收的时候可能在聊天页面,也可能在聊天外的页面,所以需要全局监听这个聊天信息,你可以在app.js中写一个全局的方法,这样方便去使用,还有提醒的是,接收到的消息有可能是一个数组,所以,需要循环去拿到messageId,下面看一下代码
easeChat.addMessageListener({ name: 'receive' }, function(ret) { if (ret.messages) { var firstListTxt = {}; firstListTxt = app.firstListTxt for (var i = 0; i < ret.messages.length; i++) { if (ret.messages[i].from == app.info.your) { api.writeFile({ path: 'cache://' + app.info.your + '.txt', data: JSON.stringify(ret.messages[i]) + ';', append: true }, function(res, err) { if (res.status) { // alert('接收已存储') } else { } }); var objectChat = ret.messages[i] var time = objectChat.timestamp.toString() objectChat.timestamp = formatDate(time.substring(0, time.length - 3)) if (typeof objectChat.body.arr === 'undefined') { objectChat.body.arr = []; objectChat.body.arr = app.emotionFun(objectChat.body.text) } else { objectChat.body.arr = app.emotionFun(objectChat.body.text) } } else { var messages = ret.messages[i] var arrayt = []; arrayt = firstListTxt.data.substring(0, firstListTxt.data.length - 1).split(';') for (j in arrayt) { var objectChat = JSON.parse(arrayt[j]) if (objectChat.yourId == messages.from) { var time = messages.timestamp.toString() messages.timestamp = formatDate(time.substring(0, time.length - 3)) objectChat.unreadNum = objectChat.unreadNum + 1 app.chat_int = objectChat app.newChat_int = objectChat //存储fistlist api.writeFile({ path: 'cache://' + messages.from + '.txt', data: JSON.stringify(messages) + ';', append: true }, function(res, err) { if (res.status) { // alert('存储对方会话成功') app.chatSever(messages) } else { api.alert({ msg: JSON.stringify(err) }); } }); } } } } } });