vue项目集成融云webIM即时通讯

本次平台开发需要集成融云第三方webIM即时通讯实现单点聊天功能，一开始自己在网上找了写资料，但是不全，后来自己通过查看融云官网，自己手写了一份，分享给大家。（融云官网）。 1、请前往<a href="https://developer.rongcloud.cn/signup">融云官方网站</a>注册开发者帐号，获取appkey（注意生产环境和测试环境的appkey不一样）； 2、在vue-cli的index.html中引入相关的js文件；

<!-- 引入融云sdk -->

<script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script>

<!-- 引入融云表情库 -->

<script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>

3、新建了一个RongImCom.vue 4、按照官方文档，定义方法，如连接状态监听器，消息监听器，连接服务器，获取imToken（这个需要项目开发后台提供接口，返回imToken供前端使用），具体代码如下：

<template>
    <div class="im" v-show="imIsShow">
        <div v-show="alertMsgShow">
            <el-alert
                show-icon
                :title="alertMsg"
                type="warning"
                close-text="重新连接"
                @close="toReconnect">
            </el-alert>
        </div>
        <div class="im-left">
            <ul v-if="conversationList.length>0" class="conversation-list">
                <li
                    v-for="(list, index) in conversationList"
                    :key="list.targetId"
                    @click="selectTarget(list,index)"
                    :class="'list'+list.targetId"
                >
                    <div class="im-border" v-bind:class="targetId ==list.targetId?'active':''">
                        <img
                            :src="getAvartar(list.targetId &&　list.targetId.slice(2,list.targetId.length))"
                            @error="function(e){defaultAvartar(e)}"
                            alt
                        >
                        <div style="margin:10px 0;display:inline-block;width:119px;overflow:hidden;vertical-align:middle">
                            <p
                                style="font-size:14px;font-weight:600;"
                            >{
   {list.targetName}}</p>
                        </div>
                    </div>
                </li>
            </ul>
            <p v-if="conversationList.length==0" style="color:white;text-align:center;">暂无会话记录</p>
        </div>
        <span @click="imIsShow = false" class="closeim-btn">
            <i class="el-icon-close"></i>
        </span>
        <div
            style="float:left;width:calc(100% - 217px );border-bottom:1px dashed #ccc;height:440px;box-sizing:border-box;padding:10px;color:#333;overflow-y:auto;"
            class="imMsg-content"
        >
            <p
                style="text-align:center;margin:10px;color:#666;cursor:pointer;"
                @click="getHistoryMsg(false)"
            >{
   {hasHistoryMsg?'查看更多历史记录':'暂无历史记录'}}</p>

            <div
                v-for="list in conversationList"
                :key="list.targetId"
                :class="list.targetId"
                :show="list.targetId==targetId"
                class="all-say"
            ></div>
        </div>
        <div
            style="float:left;width:calc(100% - 216px );height:160px;box-sizing:border-box;padding:5px 10px;"
        >
            <div style="height:20px;cursor:pointer">
                <div
                    v-show="emojiShow"
                    style="position: absolute; bottom: 158px; background-color: white;"
                >
                    <span style="cursor:pointer"
                        v-for="emList in imEmojiList"
                        :key="emList.unicode"
                        v-html="emList.node.outerHTML"
                        @click="selectEmoji(emList)"
                    ></span>
                </div>

                <div @click="emojiShow = !emojiShow">
                    <img src="../../assets/img/emoji.png" alt class="icon">
                </div>
            </div>
            <div style="height:100px;">
                <textarea
                    cols="80"
                    rows="6"
                    style="border:none;color:#333;"
                    v-model="mySendMsg"
                    v-html="selectEmojiHtml"
                    @keyup.ctrl.enter="sendMsg"
                >
                    <span></span>
                </textarea>
            </div>
            <el-button size="mini" type="primary" style="float:right" @click="sendMsg">发送 Ctrl+Enter</el-button>
        </div>
    </div>
</template>

<script>
import bus from "@/components/common/bus.js";
export default {
    data: function() {
        return {
            loaded: false,
            imIsShow: false, // im弹框是否显示
            alertMsgShow: false,//警告提示是否显示
            alertMsg:'',
            conversationList: [],
            mySendMsg: "",
            emojiShow: false, //是否显示表情
            appkey:  '',
            config: {
                size: 24, // 大小, 默认 24, 建议18 - 58
                url: "//f2e.cn.ronghub.com/sdk/emoji-48.png", // Emoji 背景图片
                lang: "zh", // Emoji 对应名称语言, 默认 zh
                // 扩展表情
                extension: {
                    dataSource: {
                        u1F914: {
                            en: "thinking face", // 英文名称
                            zh: "思考", // 中文名称
                            tag: "?", // 原生 Emoji
                            position: "0 0" // 所在背景图位置坐标
                        }
                    },
                    // 新增 Emoji 背景图 url
                    url: "//cdn.ronghub.com/thinking-face.png"
                }
            },
            imEmojiList: "",
            senderId: "",
            senderName: "",
            targetId: "",
            targetName: "",
            targetList: [],
            selectEmojiHtml: "",
            hasHistoryMsg: true,
            totalUnreadNum: 0, // 所有未读计数
            historyMsgLoaded: {
                // 加载过
            },
            firstMsg: {},
            lastMsg: {},
            unreadCount: {},
            imTOkenCount:0,
        };
    },
    computed: {},
    created: function() {
        this.appkey = this.getConfigVal("system", "rong_appkey");
        let that = this;
        this.imClientInit(this.appkey);
        bus.$on("handleTarget", function(val) {
            if (that.$store.state.user.isLogin) {
                that.senderName = that.$store.state.user.user.name;
            } else {
                bus.$emit("needlogin");
            }

            var f = function(){
                if (val != -1) {
                    that.imIsShow = true;
                    that.targetId = val.targetId;
                    that.targetName = val.targetName;
                    that.targetIdInTargetList(val.targetId, val.targetName);
                    setTimeout(() => {
                        that.showTargetMsgBody(val.targetId, val.targetName);
                    }, 100);
                } else {
                    // 切换显示
                    that.imIsShow = !that.imIsShow;
                }
            }

            if (!that.loaded) {
                that.getConversationList(f);
                that.loaded = true;
            } else {
                f();
            }