環(huán)信的Vue Demo 使用說(shuō)明丽惶，里面是空白的譬胎，作為一個(gè)商業(yè)公司... emmm差牛， 我還是幫他寫吧。堰乔。
環(huán)信即時(shí)通訊融合到項(xiàng)目偏化，例子用的是vue，但是這并不影響你使用其他框架镐侯，因?yàn)槲也粫?huì)講環(huán)信Vue Demo里面的的具體多美妙和如何使用侦讨，而是解析里面的代碼，并應(yīng)用到項(xiàng)目當(dāng)中。
其實(shí)環(huán)信我并不覺得他有多優(yōu)秀韵卤，甚至覺得還沒有騰訊IM好骗污，但是因?yàn)楣酒渌耸褂昧耍瑳]有辦法沈条，web端也要使用需忿。
數(shù)據(jù)并不會(huì)保存起來(lái)，默認(rèn)沒這個(gè)功能蜡歹，也就是說(shuō)刷新頁(yè)面屋厘，數(shù)據(jù)就沒了，需要的話需要花錢月而，然后再去寫一大堆代碼汗洒。咩？
簡(jiǎn)介
https://github.com/easemob/webim-vue-demo/blob/master/src/utils/WebIM.js
在我使用的時(shí)候commitId是62365d6714a9c19a3ef50de25e638ff3fc8d4114
三個(gè)依賴
import websdk from "easemob-websdk";
import emedia from "easemob-emedia";
import webrtc from "easemob-webrtc";
import { Message } from "element-ui";
18行,有一個(gè)注入window的WebIM對(duì)象
WebIM = window.WebIM = websdk;
實(shí)踐
WebIMConfig.js,修改appkey
就算完成初始化
登錄
\src\pages\login\index.vue
methods: {
...mapActions(["onLogin"]),
toLogin(){
this.onLogin({
username: this.username.toLowerCase(),
password: this.password
});
},
...
}
(注冊(cè)一樣的邏輯景鼠，只講登錄仲翎，業(yè)務(wù)住邏輯就這些痹扇，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 }));
},
}
持續(xù)登錄
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，那么我建議新建一個(gè)文件, 可以命名成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的實(shí)例浓恶，又因?yàn)樗麄兊膁emo需要用到Vue的實(shí)例，所以把$nuxt賦值給Vue结笨，以供全局使用包晰。
