微信聊天，即时聊天，im通讯
1、先上图
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)">×</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;">  
<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>
<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>
<input type="file" id="upload-img" value="upload-file" >
</span>
<!--<span class="rongcloud-MessageForm-tool">-->
<!--<i class="rongcloud-sprite rongcloud-iconfont-smile3"></i> -->
<!--<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