1. 通过 NPM 安装 Web SDK。
npm install easemob-websdk --save
2.main.js中先 import ，再访问 Web IM
import websdk from "easemob-websdk"
注：该方式只引用了 Web SDK ，仍需在项目里配置 WebIMConfig 文件内的参数，用于实例化 websdk。
3.新建webim.config.js文件
webim.config.js.png
在 webim.config.js 文件内进行以下配置：
const config = {
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, // 是否发送已读回执
}
export default config;
4.在main.js中引入webim.config.js
import webimconfig from './common/webim.config'
引入的websdk和webimconfig
5.在main.js中创建环信实例
// 环信
// 环信
let WebIM = window.WebIM = websdk;
WebIM.config = webimconfig;
// 环信实例
var conn = WebIM.conn = new WebIM.connection({
appKey: WebIM.config.appkey,
isHttpDNS: WebIM.config.isHttpDNS,
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: WebIM.config.https,
url: WebIM.config.xmppURL,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
isStropheLog: WebIM.config.isStropheLog,
delivery: WebIM.config.delivery
})
// 账号密码登录配置
var optionsIm = {
apiUrl: WebIM.config.apiURL,
user: '', //换成自己申请的账号就行，密码也需要换
pwd: '',
appKey: WebIM.config.appkey,
success: function (re) {
console.log('登陆成功')
},
error: function (err) {
console.log(err)
}
}
Vue.prototype.$WebIM = WebIM;
Vue.prototype.$imconn = conn
Vue.prototype.$imoption = optionsIm;
6.使用方法
// 登录账号
loginWebIM() {
// 这儿是测试用的账号和密码
this.$imoption.user = this.util.getUser().id;
this.$imconn.open(this.$imoption);
let _this = this;
// 监听回调
this.$imconn.listen({
onOpened: function(message) {
console.log("用户已上线");
},
onClosed: function(message) {
console.log("用户下线");
_this.$emit("isclose", true);
},
// 收到文本消息
onTextMessage: function(message) {
if (message.from == _this.accept) {
_this.chatContent.push({
replyImg: require("./../../src/assets/img/hom/herderservice.png"),
replyContent: message.data
});
_this.keepbottom();
}
}
});
},
//发送文本消息
sendMessage(textMessage) {
let val = textMessage.replace(/[\r\n]/g, "").replace(/[ ]/g, "");
if (val != "") {
var id = this.$imconn.getUniqueId();
let to = this.accept;
// 生成本地消息id
var msg = new WebIM.message("txt", id);
let _this = this; // 创建文本消息
msg.set({
msg: val, // 消息内
to: to, // 接收消息对象（用户id）
roomType: false,
success: function(id, serverMsgId) {
// 追加本地缓存处理
console.log(msg);
_this.chatContent.push({
//把发送者的头像和文本数据push到数组中在页面上展示
askImg: require("./../../src/assets/img/hom/logo_blue.png"),
askContent: msg.value
});
_this.keepbottom();
},
fail: function(e) {
console.log("消息发送失败");
}
});
msg.body.chatType = "singleChat";
this.$imconn.send(msg.body);
this.textMessage = "";
}
},
