IM即时通信多房间聊天室仿微信聊天(三)

IM即时通信多房间聊天室仿微信聊天(页面消息展示)

效果图

在

IM即时通信多房间聊天室仿微信聊天(一)
IM即时通信多房间聊天室仿微信聊天(二)

中我们已经搭建了基本的通信架构，接下来重点就是发送的消息在页面的展示效果了

消息发送box(文字、语音、图片、表情等)

很明显这里需要使用v-show控制不同按钮的显示/隐藏

<div class="sendbox">
	<div class="left-icon" @click="changeAudioButton">
		<img src="../assets/img/jianpan.png" v-if="isAudio"/>
		<img src="../assets/img/audio.png" v-if="!isAudio"/>
	</div>
	<div class="sendinput" >
		<van-field
			v-model="message"
			rows="1"
			autosize
			type="textarea"
			placeholder="说点什么吧"
			v-if="!isAudio"
		/>
	</div>
	<div class="sendbutton">
		<van-button icon="smile-comment" type="primary" block @click="send" v-if="this.message">
		发送
		</van-button>
		<van-button icon="photograph" type="primary" block @click="cameraTakePicture">
		图片
		</van-button>
	</div>
</div>

语音消息的发送稍微复杂有点我们后面在讲，先搭建一个简单的文字和图片发送的sendbox
css样式：

.sendbox {
	position: fixed;
	height: 60px;
	width: 100%;
	display: flex;
}
.left-icon{
	width: 30px;
	margin-top: 5px;
	margin-left: 5px;
}
.sendinput{
	height: 60px;
	width: 66%;
	float: left;
}
.sendbutton{
	height: 60px;
	width: 25%;
	float: right;
}

这样子简单的一个sendbox效果就出来了

消息主窗口展示

消息的展示主要分为以下两种我的消息和Ta的消息，一开始的思路是将GatWay广播过来的消息直接拼成一整个html字符串然后利用v-html渲染在页面上。后续开发中发现需要实现禁言、点击图片消息预览图片、@等点击事件功能，所以弃用了这种方式采用消息分开部分渲染。

1、我的消息
将我自己发送的消息展示在窗口的右边显示

<!-- 我的消息 -->
<!-- 普通消息 -->
<div class="message message-right" v-if="msgitem.uid == uid && msgitem.msgtype == 0">
	<div class="img-box"></div>
	<div class="message-text my-message">{{msgitem.content}}</div>
	<div class="right-arrow-box">
		<div class="right-arrow"></div>
	</div>
	<div class="img-box">
		<img class="img-box" :src="msgitem.photo" alt="">
	</div>
</div>
<!-- 图片消息 -->
<div class="message message-right" v-if="msgitem.uid == uid && msgitem.msgtype == 1">
	<img id="messageimg" :src="msgitem.content" class="messageimg" @click="Preview(msgitem)"/>
	<img :src="msgitem.photo" alt="" class="img-box"/>
</div>

2、Ta的消息
将别的用户发送的消息展示在主窗口的左边显示

<!-- Ta的消息 -->
<!-- 图片消息 -->
<div class="message message-left" v-if="msgitem.uid != uid && msgitem.msgtype == 1">
	<img :src="msgitem.photo" alt="" class="touxiang" @click="atsomeone(msgitem.username)">
	<div class="content">
		<div class="username" @click="shutup(msgitem)">{{msgitem.username}}</div>
		<img id="messageimg" :src="msgitem.content" class="messageimgleft" @click="Preview(msgitem)"/>
	</div>
</div>
<!-- 普通消息 -->
<div class="message message-left" v-if="msgitem.uid != uid && msgitem.msgtype == 0">
	<img :src="msgitem.photo" alt="" class="img-box" @click="atsomeone(msgitem.username)"/>
	<div class="content">
		<div class="username" @click="shutup(msgitem)">{{msgitem.username}}</div>
		<div class="left-arrow-box">
			<div class="left-arrow"></div>
		</div>
		<div class="message-text">{{msgitem.content}}</div>
	</div>
</div>

语音消息

这里我们重点讲一下语音消息

按住说话：利用@touchstart和@touchend事件来实现

页面代码：

<div 
	class="audioinput"
	id="bt_recoding"
	ref="tag"
	v-if="isAudio"
	@touchstart="beginRecordAction"
	@touchend="stopRecordAction" 
	@touchmove="moveRecordAction" 
	@touchcancel="cancleAction"
	@click="audioCapture"
	>
	按住 说话
</div>

js代码：

beginRecordAction(event) {
	this.isSend = false;
	this.longClick = 0;
	this.loop = setTimeout(function() {
		this.longClick = 1;
		// event.preventDefault(); //阻止浏览器默认行为
		this.posStart = 0;
		this.posStart = event.touches[0].pageY; //获取起点坐标
		//显示录音 隐藏暂停
		this.showBlackBoxSpeak();
		}.bind(this), 500);
		this.recordAudio();
},
stopRecordAction(event) {
	clearTimeout(this.loop);
	event.preventDefault(); //阻止浏览器默认行为
	this.posEnd = 0;
	this.posEnd = event.changedTouches[0].pageY; //获取终点
	if (this.longClick == 0) {
		this.isShowYuyin = false;
		this.isSend = false;
		this.mediaRec.stopRecord();
		Toast.fail("按住时间太短!")
	} else {
		if (this.posStart - this.posEnd < 100) {
		this.isSend = true;
		this.mediaRec.stopRecord();
		this.initStatus();
		this.showBlackBoxNone();
		} else {
			this.isSend = false;
			this.mediaRec.stopRecord();
		    this.initStatus();
		    this.showBlackBoxNone();
		}
	}
},

上滑取消：@touchmove和@touchcancel事件

js代码：

moveRecordAction() {
	clearTimeout(this.loop);
	this.loop = 0;
	this.posMove = event.targetTouches[0].pageY; //获取滑动实时坐标
	console.log(this.posStart - this.posMove)
	if (this.posStart - this.posMove < 100) {
		//隐藏录音 显示暂停
		this.showBlackBoxSpeak();
	} else {
		//显示录音 隐藏暂停
		this.showBlackBoxPause();
	}
},
cancleAction(){
	this.mediaRec.stopRecord();
	clearTimeout(this.loop);
},

总结：

本项目由于是利用Cordova封装成最终的ios和Android app的，所以发送图片(访问用户手机相册)和录制语音都是通过Cordova插件来实现的，以发语音为例：首先调用Cordova插件录制手机语音，然后将语音消息文件上传服务器进行转码处理保存到服务器返回给客户端访问url，客户端拿到url后将url作为语音消息发送给GatWay然后再广播给所有的客户端，其实整个语音消息就是语音文件的url在传递，当我们页面需要展示用户的语音消息的时候再通过语音消息的url访问服务器获得语音文件播放源。