公司最近使用第三方环信SDK的进行通信聊天,基本已完成。记录下填坑之路

1、可以通过以下方式引用 WebSDK

1.安装

npm install easemob-websdk --save

2. 先 require ,再访问 Web IM 。

require('easemob-websdk'); 

注:该方式只引用了 Web SDK ,仍需在项目里配置 WebIMConfig 文件内的参数,用于实例化 websdk。
配置在 webim.config.js 文件内进行以下配置:

xmppURL: 'im-api.easemob.com',            // xmpp Server地址,对于在console.easemob.com创建的appKey,固定为该值

apiURL: 'http://a1.easemob.com',          // rest Server地址,对于在console.easemob.com创建的appkey,固定为该值

appkey: 'easemob-demo#chatdemoui',        // App key

https : false,                            // 是否使用https

isHttpDNS: true,                         //防止DNS劫持从服务端获取XMPPUrl、restUrl

isMultiLoginSessions: false,              // 是否开启多页面同步收消息,注意,需要先联系商务开通此功能

isAutoLogin: true,                        // 自动出席,(如设置为false,则表示离线,无法收消息,需要在登录成功后手动调用conn.setPresence()才可以收消息)

isDebug: false,                           // 打开调试,会自动打印log,在控制台的console中查看log

autoReconnectNumMax: 2,                   // 断线重连最大次数

autoReconnectInterval: 2,                 // 断线重连时间间隔

heartBeatWait: 4500,                       // 使用webrtc(视频聊天)时发送心跳包的时间间隔,单位ms

delivery: true,                           // 是否发送已读回执

2、组件中使用(群聊)

这里以群聊为例子

注册

regeister(id,name) {
var options = {
username: id,//用户名
password: md5(id),//密码
nickname: name,//昵称
appKey: WebIM.config.appkey,//appkey
success: e => {
console.log('注册成功', e);
if (e) {
localStorage.setItem("liveUser", id);//注册成功将id保存
this.login()//去登录
}
},
error: e => {
console.log("注册异常",e);
if(e.type == 17){//如果已注册 则登录
console.log("注册异常去登陆",e);
localStorage.setItem("liveUser", id);
this.login();
}
},
apiUrl: WebIM.config.apiURL
};
WebIM.conn.registerUser(options);
},

1、这里如果注册异常的type==17则代表已注册,那就直接去登录

2、这里id是依据是否在应用内已登录(自己应用,非环信),

如果是未登录(游客状态)则随机一个

Math.ceil(Math.random() * 100000);

如果登录,则用登录后返回的user_id

登录

//环信登录
login() {
var userName = localStorage.getItem("liveUser");
var options = {
apiUrl: WebIM.config.apiURL,
user: userName,
pwd: md5(userName),
appKey: WebIM.config.appkey,
success: e => {
console.log('登录成功', e);
if (e) {
this.addGroup()
}
},
fail: e => {
console.error('登录失败', e);
}
};
WebIM.conn.open(options);
},

登录成功后就可以加入群组

加入群组

//加入群组
addGroup() {
var options = {
groupId: "xxxx", // 群组ID
success: function (resp) {
console.log("Response: ", resp);
},
error: function (e) {
console.error("加入群聊异常", e, JSON.parse(e.data));
if (e.type == 17) {
console.error("您已经在这个群组里了");
}
}
};
WebIM.conn.joinGroup(options);
},

这里群id是你购买环信后创建应用分配的群id

加群成功,就可以获取群历史消息了

获取历史消息

getMessList() {
var options = {
queue: "xxxx",//群组id
isGroup: true,//是否是群聊
count: 20,//返回多少条
success: data => {
this.$store.dispatch('receive_livemsglist',data)//这里把消息加到vuex中存储 this.messList = this.$store.state.liveMsgList console.log("获取历史消息", data)
},
fail: e => {
console.log("获取群聊异常", e)
}
}; WebIM.conn.fetchHistoryMessages(options);
},

1、不能依据页码获取数据

这里环信有个bug(也不能说bug,一个不足吧),就是获取历史消息竟然不是依据页码去拉取,也就是我拉取哪一页就获取哪一页。没办法,环信没有提供这个参数。

给环信提供了工单,他那边反馈

解决

先说下,上面这个问题,就是用本地vuex存储了.

vuex的state中

export default {
liveMsgList:[],//消息记录
}

mutations.js中

//消息记录
[RECEIVE_LIVEMSGLIST](state,{liveMsgList}){
if(state.liveMsgList.length){
state.liveMsgList.unshift(...liveMsgList)
}else{
state.liveMsgList = liveMsgList
}
},

actions.js中

receive_livemsglist({commit},liveMsgList){
commit(RECEIVE_LIVEMSGLIST,{liveMsgList})
},

2、获取历史消息时,会触发监听接收消息事件

解决

这个是3.0.7 版本 SDK 的已知bug,建议您更新下SDK

监听消息

//环信接收消息
_IMListen() {
WebIM.conn.listen({
onOpened: () => { //连接成功回调
console.log("连接成功!")
},
//文本消息
onTextMessage: text => {
console.log("接收到了文本消息", text);
if (!text.error && text.type != "chat") {
this.messList.push(text);
}
},
//连接关闭回调
onClosed: function ( message ) {
console.log("连接关闭!",message)
},
//收到表情消息
onEmojiMessage: emj => {
console.log("接收到了表情消息", emj)
if (!emj.error && emj.type != "chat") {
this.messList.push(emj);
}
},
//cmd消息
onCmdMessage: ( message ) => {
console.log(message,"cmd")
},
//收到自定义消息
onCustomMessage: ( message ) => {
console.log(message,"Custom")
},
onError: e => {
console.log("接收消息错误", JSON.stringify(e));
},
onRecallMessage:(e)=>{
console.log("消息撤回",e)
},
});
},

发送消息

sendMess() {
var id = WebIM.conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message("txt", id); // 创建文本消息
var option = {
msg: this.message, // 消息内容
to: "xxx", // 接收消息对象(聊天室id)
roomType: false, // 群聊类型,true时为聊天室,false时为群组
ext: {}, // 扩展消息
success: (id, serverMsgId) => {
console.log("发送消息成功",serverMsgId)
},
fail: e => {
console.error("发送消息异常", e)
}
};
msg.set(option);
msg.setGroup("groupchat"); // 群聊类型
WebIM.conn.send(msg.body);
}
},

大致流程就这样,不懂的可以评论能解决就会回答。

基于环信SDK的IM即时通讯填坑之路(vue)的更多相关文章

  1. 基于环信的仿QQ即时通讯的简单实现

    代码地址如下:http://www.demodashi.com/demo/11645.html 我的博客地址 之前一直想实现聊天的功能,但是感觉有点困难,今天看了环信的API,就利用下午的时间动手试了 ...

  2. 环信SDK集成

    利用环信SDK可以实现即时通讯,但在集成的过程中碰到了不少的坑. 注意 选择项目路径,这里以最新版环信demo为例 注意:环信的ChatDemoUI这个demo里边因为研发的同事为了照顾老版本的And ...

  3. mui初级入门教程(五)— 聊聊即时通讯(IM),基于环信 web im SDK

    文章来源:小青年原创发布时间:2016-06-15关键词:mui,环信 web im,html5+,im,页面传值,缓存转载需标注本文原始地址: http://zhaomenghuan.github. ...

  4. android-使用环信SDK开发即时通信功能及源代码下载

    近期项目中集成即时聊天功能.挑来拣去,终于选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁.说明文档清楚易懂.文档有android.ios.和后台server端.还是非常全的. 环信官网: ...

  5. 李洪强iOS开发之-环信02.2_环信官网下载环信 SDK

    李洪强iOS开发之-环信02.2_环信官网下载环信 SDK 移动客服即时通讯云 iOS SDK 当前版本:V3.1.4 2016-07-08 [ 版本历史 ] | 开发指南 | 知识库 | Demo源 ...

  6. 集成IOS 环信SDK

    集成IOS SDK 在您阅读此文档时,我们假定您已经具备了基础的 iOS 应用开发经验,并能够理解相关基础概念. 下载SDK 通过Cocoapods下载地址 不包含实时语音版本SDK(EaseMobC ...

  7. 环信SDK与Apple Watch的结合(2)

    这一篇主要是介绍怎么拖apple watch上的相关页面,附源码EMWatchOCDemo. 需要在工程中的“EMWatchOCDemo WatchKit App”中进行操作,该文件夹的结构如图 Wa ...

  8. 环信SDK与Apple Watch的结合(1)

    该系列是记录在apple watch上开发IM,用到了最近挺流行的环信IM SDK. 一.先来一段网上随处可查到的信息: 1.两种分辨率 1.65寸 312*390 1.5寸 272*340 2.开发 ...

  9. 李洪强iOS开发本人集成环信的经验总结_01环信SDK的导入

    李洪强iOS开发本人集成环信的经验总结_01环信SDK的导入 01 - 直接在项目中导入SDK和一些静态库 这个时候,没有错误的编译没有错误的话,就说明SDK已经配置成功 还有一种方法是用cocoap ...

随机推荐

  1. DNA sequence HDU - 1560(IDA*,迭代加深搜索)

    题目大意:有n个DNA序列,构造一个新的序列,使得这n个DNA序列都是它的子序列,然后输出最小长度. 题解:第一次接触IDA*算法,感觉~~好暴力!!思路:维护一个数组pos[i],表示第i个串该匹配 ...

  2. Laravel中使用JWT

    Laravel 版本: Laravel Framework 6.18.3 查看版本命令: php artisan -V 1.安装JWT扩展包: composer require tymon/jwt-a ...

  3. 成员指针与mem_fn

    本文是<functional>系列的第4篇. 成员指针是一个非常具有C++特色的功能.更低级的语言(如C)没有类,也就没有成员的概念:更高级的语言(如Java)没有指针,即使有也不会有成员 ...

  4. 6. 浅谈super

    this和super: super( ) EX6类的继承, 在react中官方固定应用 在java面向对象思想中这样定义: this表示当前对象,this()为当前对象的其他构造函数 super表示父 ...

  5. selemiun 下拉菜单、复选框、弹框定位识别

    一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进 ...

  6. SpringCloud-Hystrix 服务降级、熔断

    Hystrix 是什么? Hystrix 是一个用于处理分布式系统的延迟和容错的开源库,在分布式系统里,许多依赖不可避免的会调用失败,比如超时.异常等,Hystrix 能够保证在一个依赖出问题的情况下 ...

  7. Python自学从入门到就业之函数基础(小白必看)

    函数介绍 <1>什么是函数 请看如下代码: print(" _ooOoo_ ") print(" o8888888o ") print(" ...

  8. php json接口demo

    <?php class Student { public $no; public $username; public $password; } $student=new Student(); $ ...

  9. 为什么要你们现在要学习python

    说学习python之前,我们先来聊聊其他的.我们都认为成功靠的是勤奋和努力,但是事实是只靠勤奋和努力是不一定会成功的,而且很大一部分都不会成功. 你有没有想过,同样是做企业,有些公司年收入百万,而腾讯 ...

  10. java基于OpenCV的人脸识别

    基于Java简单的人脸和人眼识别程序 使用这个程序之前必须先安装配置OpenCV详细教程见:https://www.cnblogs.com/prodigal-son/p/12768948.html 注 ...