环信的Vue Demo 使用说明，里面是空白的，作为一个商业公司... emmm， 我还是帮他写吧。。
环信即时通讯融合到项目，例子用的是vue，但是这并不影响你使用其他框架，因为我不会讲环信Vue Demo里面的的具体多美妙和如何使用，而是解析里面的代码，并应用到项目当中。
其实环信我并不觉得他有多优秀，甚至觉得还没有腾讯IM好，但是因为公司其他端使用了，没有办法，web端也要使用。
数据并不会保存起来，默认没这个功能，也就是说刷新页面，数据就没了，需要的话需要花钱，然后再去写一大堆代码。咩？
简介
https://github.com/easemob/webim-vue-demo/blob/master/src/utils/WebIM.js
在我使用的时候commitId是62365d6714a9c19a3ef50de25e638ff3fc8d4114
三个依赖
import websdk from "easemob-websdk";
import emedia from "easemob-emedia";
import webrtc from "easemob-webrtc";
import { Message } from "element-ui";
18行,有一个注入window的WebIM对象
WebIM = window.WebIM = websdk;
实践
WebIMConfig.js,修改appkey
就算完成初始化
登录
\src\pages\login\index.vue
methods: {
...mapActions(["onLogin"]),
toLogin(){
this.onLogin({
username: this.username.toLowerCase(),
password: this.password
});
},
...
}
(注册一样的逻辑，只讲登录，业务住逻辑就这些，toLogin就可以登录，我们看他们写的逻辑是啥)
state
mutations: {
setUserName(state, username) {
state.username = username;
},
setRegisterFlag(state, flag) {
state.isRegister = flag;
}
},
actions: {
onLogin: function (context, payload) {
context.commit("setUserName", payload.username);
var options = {
apiUrl: WebIM.config.apiURL,
user: payload.username,
pwd: payload.password,
appKey: WebIM.config.appkey
};
WebIM.conn.open(options);
localStorage.setItem("userInfo", JSON.stringify({ userId: payload.username, password: payload.password }));
},
}
持续登录
APP.vue
beforeMount(){
const userInfo = localStorage.getItem("userInfo") && JSON.parse(localStorage.getItem("userInfo"));
if(userInfo){
const userName = userInfo.userId;
const password = userInfo.password;
var options = {
apiUrl: WebIM.config.apiURL,
user: userName,
pwd: password,
appKey: WebIM.config.appkey,
error: function (e) {
alert('异常', e)
}
};
WebIM.conn.open(options);
}
}
如果使用的是nuxt，那么我建议新建一个文件, 可以命名成keepLogin.js
let run = () => {
const userInfo = localStorage.getItem("IM_userInfo") && JSON.parse(localStorage.getItem("IM_userInfo"));
if(userInfo){
const userName = userInfo.userId;
const password = userInfo.password;
var options = {
apiUrl: WebIM.config.apiURL,
user: userName,
pwd: password,
appKey: WebIM.config.appkey,
error: function (e) {
alert('IM异常', e)
}
};
WebIM.conn.open(options);
}
}
window.addEventListener('load', () => {
window.Vue = $nuxt
window.setTimeout(() => {
run()
}, 0)
})
这里的window.Vue = $nuxt， 是为了在nuxt里面拿到vue的实例，又因为他们的demo需要用到Vue的实例，所以把$nuxt赋值给Vue，以供全局使用。
