環信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でした
3つの依存

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統合ドキュメント