环信Vue Demo 使用说明

环信的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，以供全局使用。

相关链接

即时通讯
即时通讯文档
即时通讯 Web IM集成 文档