微信聊天，即时聊天，im通讯

1、先上图

微信聊天，即时聊天，im通讯

2、联系人列表和聊天页面

3、上代码。

<template id="conversationList">
    <div class="conversationList">
        <!--header-->
        <header class="header">
            <h2 class="title">我的联系人</h2>
            <h2 class="title"  id="allremove" >清空消息</h2>
        </header>
        <!--header-->
        <!--chat-list-->
        <ul class="chat-list">
            <li class="chat-item" v-for="(item,index) in stat.conversationList" >

                <div class="chat-item-portrait" v-if="item.messageDirection === 1"  @click="gochart(item.toGid)">
                    <img :src="item.toUserHeadimg" class="rong-avatar-bd">
                </div>

                <div class="chat-item-portrait" v-if="item.messageDirection === 2"  @click="gochart(item.fromGid)">
                    <img :src="item.fromUserHeadimg" class="rong-avatar-bd">
                </div>

                <div class="chat-item-name" v-if="item.messageDirection === 1" @click="gochart(item.toGid)">
                    {{item.toUserNickname}}
                    {{item.latestMessage  ||
                    '' }}
                </div>

                <div class="chat-item-name" v-if="item.messageDirection === 2" @click="gochart(item.fromGid)">
                    {{item.fromUserNickname}}
                    {{item.latestMessage  ||
                    '' }}
                </div>

                <div class="unread-count unread-count2"  v-if="item.messageDirection === 1" :id="item.toRongId" style="display:none"></div>
                <div class="unread-count unread-count2"  v-if="item.messageDirection === 2" :id="item.fromRongId" style="display:none"></div>

                <div class="unread-count"  v-if="item.unreadMessageCount === 1" style="">1</div>

                <div class="remove-conversation"
                     @click="removeConversation(item.conversationType,item.id , index, item.toRongId)">&times;</div>
            </li>
        </ul>
        <!--chat-list-->
    </div>
</template>

4、需要的js ： vue、 jquery 、RongIMLib-2.3.3.js

5 、聊天页面 html 如下：

<template id="chat">
    <div class="chat">
        <!--header-->
        <header class="header">
            <a href="../conversation-list/conversation-list.html" style="font-size: 20px;"> &nbsp
                <i class="post-back"></i>
            </a>
            <!--<a href="javascript:void(0);" onclick="window.history.go(-1);"><i class="post-back"></i>返回</a>-->
            <h2 class="title">{{stat.targetUserInfo.nickname}}</h2>
        </header>
        <!--header-->

        <!--chat-content-->
        <div class="chat-content">
            <div class="message-wrapper">
                <div class="message-item" v-for="msg in stat.messageList"
                     :class="[msg.messageDirection == 1 ? 'my-msg' : 'your-msg']">

                    <div v-if="msg.messageType == 'TextMessage'" class="message-text">
                        <div class="rong-avatar" >
                            <a :href="[msg.messageDirection == 1 ? '../../user_center/other_user_index.html?uid='+stat.currentUserInfo.userid : '../../user_center/other_user_index.html?uid='+stat.targetUserInfo.userid]">
                                <img v-if="msg.messageDirection == 1" :src="stat.currentUserInfo.portraitUri"
                                     class="rong-avatar-bd">
                                <img v-else :src="stat.targetUserInfo.portraitUri" class="rong-avatar-bd">
                            </a>
                        </div>

                        <div class="message-body">
                            <pre class="user-msg" v-if="msg.content.messageName == 'TextMessage'" v-html="msg.content.content"></pre>
                            <img class="image-message" :src="msg.content.imageUri" alt="image"
                                 v-if="msg.content.messageName == 'ImageMessage'">
                        </div>
                    </div>

                    <div v-if="msg.messageType == 'ImageMessage'" class="message-img">
                        <div class="rong-avatar">
                            <a :href="[msg.messageDirection == 1 ? '../../user_center/other_user_index.html?uid='+stat.currentUserInfo.userid : '../../user_center/other_user_index.html?uid='+stat.targetUserInfo.userid]">
                                <img v-if="msg.messageDirection == 1" :src="stat.currentUserInfo.portraitUri"
                                     class="rong-avatar-bd">
                                <img v-else :src="stat.targetUserInfo.portraitUri" class="rong-avatar-bd">
                            </a>
                        </div>
                        <div class="message-body">
                            <img class="image-message" :src="msg.content.imageUri" alt="image">
                        </div>
                    </div>

                    <div v-if="msg.messageType == 'FileMessage'" class="message-file">
                        <div class="rong-avatar">
                            <a :href="[msg.messageDirection == 1 ? '../../user_center/other_user_index.html?uid='+stat.currentUserInfo.userid : '../../user_center/other_user_index.html?uid='+stat.targetUserInfo.userid]">
                                <img v-if="msg.messageDirection == 1" :src="stat.currentUserInfo.portraitUri"
                                     class="rong-avatar-bd">
                                <img v-else :src="stat.targetUserInfo.portraitUri" class="rong-avatar-bd">
                            </a>
                        </div>
                        <div class="message-body">
                            <div class="file-ava">
                                <img ng-src="assets/img/undefined.png"
                                     src="http://web.sealtalk.im/assets/img/undefined.png"></div>
                            <div class="file-info">
                                <p class="file-name">{{msg.content.name}}</p>
                                <p class="file-size">{{msg.content.size/1000}} K</p>
                            </div>
                            <a class="file-download" :href="msg.content.fileUrl" target="_blank">下载</a>
                        </div>
                    </div>

                    <!--时间-->
                    <div class="rongcloud-Messages-date" v-if="msg.messageType == 'TimeMessage'">
                        <b>{{msg.sentTime}}</b>
                    </div>
                </div>
            </div>
        </div>
        <!--chat-content-->

        <!--footer-->
        <footer class="footer">
            <div class="message-wrap">
                <textarea v-model="stat.sendMsgVal" id="message-content" placeholder="请输入文字..."
                                                class="message-content">

                </textarea>
            </div>


            <!--//表情-->
            <div class="rongcloud-MessageForm-tool" id="expressionWrap" style="overflow: visible;">
                <i class="rongcloud-sprite rongcloud-iconfont-smile" onclick="showemoji(event)"></i>&nbsp;

                <div class="rongcloud-expressionWrap"  onclick="chooseEmoji(event)"  style="display: none;">
                    <div class="rongcloud-expressionContent"></div>
                </div>
            </div>

            <span class="rongcloud-MessageForm-tool" >
                <i class="rongcloud-sprite rongcloud-iconfont-smile2"></i>&nbsp;

                <input type="file" id="upload-img" value="upload-file" >
            </span>

            <!--<span class="rongcloud-MessageForm-tool">-->
                <!--<i class="rongcloud-sprite rongcloud-iconfont-smile3"></i>&nbsp;-->

                <!--<input type="file" id="upload-file" value="upload-file" class="upload-file">-->
            <!--</span>-->

            <span class="send-btn" @click="sendMsg">发送</span>
        </footer>
        <!--footer-->
    </div>
</template>

6、演示网站： http://yuecao.cc:8088/jiaoyou/im/chat/chat.html?uid=1536

7、不懂的联系丘丘： 823627970