当前位置：首页 > news >正文

用uniapp 及socket.io做一个简单聊天app 撤回聊天及保留聊天记录 6

news 来源：原创 2024/9/20 10:55:52

撤回的设计

通过聊天，发送一个信息，界面自动将信息撤回，

当时要有时间的限制。同时也要将撤回记录到数据库中。

	async sendMessage(message, type = 'text') {this.$refs.popup.close();const messageData = {sn: uuidv4(),group_name: this.groupName,avatar: this.user.avatar_url,content: message,user_name: this.user.username,type: type,fid: this.user.id,tid: this.tid,created_at: this.getCurrentTimeToMinute(),receiver_type: this.receiver_type};this.socket.emit('sendMessage', messageData);this.inputValue = '';const token = uni.getStorageSync('token');try {const [error, response] = await uni.request({url: `${config.apiBaseUrl}/addmessage`,method: 'POST',header: {Authorization: `Bearer ${token}`},data: messageData});if (error) {throw new Error(`Request failed with error: ${error}`);}} catch (error) {}this.$nextTick(() => {this.setScrollTop();});},

以上是发送信息到websocket, 又将信息写入到数据库。我们用了一个sn,让记录保执唯一，以利于我们撤消。所以也要要求我们收到的信息也有这一个sn.

		this.socket.on('message', (msg) => {if (msg.type == 'broadcast') {return;}let msgs = {sn:msg.sn,avatar: msg.avatar,isMe: msg.fid == this.user.id ? true : false,content: msg.content,type: msg.type,sn: msg.sn,createat: Math.floor(Date.now() / 1000),time: Date.now(),withdraw:0,};this.list.push(msgs);this.setScrollTop();});

注意这时我们加了一个time 为的是进行撤消判断。我们假设5分钟内可以撤消。withdraw表是撤消否，表示没有撤。重写以上代码：

	this.socket.on('message', (msg) => {if (msg.type == 'broadcast') {return;}if (msg.type == 'widthdraw') {//查出 msg.sn 将此记录信息改为撤回this.list.forEach((item, index) => {if (item.sn == msg.content) {this.list[index].content = '[消息已撤回]';this.list[index].type = 'text';this.list[index].withdraw = 1;}});return;}let msgs = {sn:msg.sn,avatar: msg.avatar,isMe: msg.fid == this.user.id ? true : false,content: msg.content,type: msg.type,sn: msg.sn,createat: Math.floor(Date.now() / 1000),time: Date.now(),withdraw:0,};this.list.push(msgs);this.setScrollTop();});},

当然搪消时，我们要写一个方向法：

	withdraw(item) {let _=this;const currentTime = Date.now();const messageTime = parseInt(item.time);const oneMinute = config.minute; // 60 * 1000 millisecondsif (currentTime <( messageTime + oneMinute)) {uni.showModal({title: '提示',content: '确认删除该条信息吗？',success: function (res) {if (res.confirm) {// 执行确认后的操作if(_.canwithdraw(item)){const messageData = {sn: uuidv4(),group_name:  _.groupName,avatar:  _.user.avatar_url,content: item.sn,user_name:  _.user.username,type: 'widthdraw',fid:  _.user.id,tid:  _.tid,created_at:  _.getCurrentTimeToMinute(),receiver_type:  _.receiver_type};_.socket.emit('sendMessage', messageData);}else{uni.showToast({title: '超过一分钟不能撤回',icon: 'none'});}} else {// 执行取消后的操作}}});}},canwithdraw(item){const currentTime = Date.now();const messageTime = parseInt(item.time);const oneMinute = config.minute; // 60 * 1000 millisecondsif (currentTime > (messageTime + oneMinute)) {return false;}else{return true;}},

canwithdraw是判断是不是可以取消聊天。这里我们改一下聊天窗口，将撤消加进去：

<template><view class=""><scroll-viewscroll-y="true"class="scroll-box":style="{ height: windowObj.windowHeight - windowObj.statusBarHeight - 94 + 'px' }":scroll-top="scrollHeight"@scrolltoupper="loadMores"><view class="scroll-view"><view class="news-box" v-for="(item, index) in list" :key="index"><view class="message-type" v-if="['left', 'join', 'kick'].includes(item.type)">{{ item.content }}</view><imageclass="avatar":class="[item.isMe ? 'is-me' : 'avatar-right']":src="item.avatar"mode="aspectFill"v-if="item.type != 'kick' && item.type != 'join' && item.type != 'left'"></image><view class="message-box" :class="{ 'is-me': item.isMe }" v-if="item.type != 'kick' && item.type != 'join' && item.type != 'left'"><text class="message" v-if="item.type == 'text'">{{ item.content || '' }}<image src="../../static/withdraw.png" style="width: 50rpx; height: 50rpx" mode="aspectFill" v-if="item.isMe&&canwithdraw(item)&&item.withdraw==0" @tap="withdraw(item)"></image></text><text class="message_img" v-if="item.type == 'image'"><image class="message-image" :src="item.content" mode="aspectFill" @click="playVoice(item.content)" /><image src="../../static/withdraw.png" style="width: 50rpx; height: 50rpx" mode="aspectFill" v-if="item.isMe&&canwithdraw(item)&&item.withdraw==0" @tap="withdraw(item)"></image></text><text class="message_img" v-if="item.type == 'video'"><video v-if="item.content" :src="item.content" controls></video><image src="../../static/withdraw.png" style="width: 50rpx; height: 50rpx" mode="aspectFill" v-if="item.isMe&&canwithdraw(item)&&item.withdraw==0"  @tap="withdraw(item)"></image></text><text class="message_img" v-if="item.type == 'audio'"><image class="message-image" src="../../static/chat/play.png" mode="aspectFill" /><image src="../../static/withdraw.png" style="width: 50rpx; height: 50rpx" mode="aspectFill" v-if="item.isMe&&canwithdraw(item)&&item.withdraw==0"  @tap="withdraw(item)"></image></text></view></view></view></scroll-view><view class="base-btn" :class="{ 'base-btn-popup-open': isPopupOpen || isPopupAudioOpen }"><view class="base-con unify-flex"><view @tap="more"><image src="../../static/chat/more.png" style="width: 50rpx; height: 50rpx"></image></view><input class="input-text" type="text" :value="inputValue" placeholder="说些什么吧" @input="getInput" @confirm="tapTo(2)" /><view @click="tapTo(2)"><image src="../../static/chat/chat.png" style="width: 50rpx; height: 50rpx"></image></view></view></view><uni-popup ref="popup" type="bottom" :style="{ height: '200rpx' }" @change="onPopupChange"><view :style="{ width: '100%', backgroundColor: '#fff', height: '200rpx', overflowY: 'scroll' }" class="popup-content"><view class="popup-items"><view class="popup-item" v-if="type == 'group'"  @tap="adduserTogroup"><image src="../../static/chat/add.png" style="width: 50rpx; height: 50rpx"></image><text>添加</text></view><view class="popup-item" @click="chooseFile"><image src="../../static/chat/pic.png" style="width: 50rpx; height: 50rpx"></image><text>图片</text></view><view class="popup-item" @tap="audio"><image src="../../static/chat/audio.png" style="width: 50rpx; height: 50rpx"></image><text>音频</text></view><view class="popup-item" @tap="openCamera"><image src="../../static/chat/video.png" style="width: 50rpx; height: 50rpx"></image><text>视频</text></view><view class="popup-item"><image src="../../static/chat/black.png" style="width: 50rpx; height: 50rpx"></image><text>拉黑</text></view><view class="popup-item" v-if="type == 'group'"><image src="../../static/chat/exit-group.png" style="width: 50rpx; height: 50rpx"></image><text>退群</text></view></view></view></uni-popup><uni-popup ref="popupAudio" type="bottom" :style="{ height: '200rpx' }" @change="onPopupAudioChange"><view :style="{ width: '100%', backgroundColor: '#fff', height: '200rpx', overflowY: 'scroll' }" class="popup-content"><view class="popup-item" @click="startRecording"><image src="../../static/chat/beginaudio.png" style="width: 50rpx; height: 50rpx"></image><text>录音</text></view><view class="popup-item" @click="stopRecording"><image src="../../static/chat/stop.png" style="width: 50rpx; height: 50rpx"></image><text>停止</text></view><view class="popup-item" @tap="playRecording"><image src="../../static/chat/play.png" style="width: 50rpx; height: 50rpx"></image><text>播放</text></view><view class="popup-item" @tap="upsong"><image src="../../static/chat/send.png" style="width: 50rpx; height: 50rpx"></image><text>发送</text></view><view class="popup-item" @tap="exitchat"><image src="../../static/chat/exit.png" style="width: 50rpx; height: 50rpx"></image><text>退出</text></view></view></uni-popup></view>
</template>

下面我们还要写一个接口，将撤消记录下来：

app.get('/withdraw', authenticateToken, async (req, res) => {try {const userId = req.user.id;let { sn } = req.query;await Message.update({ is_retracted:1,retracted_at:Date.now() }, { where: { sn:sn } });return res.json({ code:0, message: '撤消成功' });} catch (error) {return res.json({ code:1, message: '获取用户信息时出错' });}
});

接口这里记录。

	if (msg.type == 'widthdraw') {//查出 msg.sn 将此记录信息改为撤回console.log(msg);this.list.forEach((item, index) => {if (item.sn == msg.content) {this.list[index].content = '[消息已撤回]';this.list[index].type = 'text';this.list[index].withdraw = 1;this.widthdrawRow(item.sn)}});return;}async widthdrawRow(sn) {const token = uni.getStorageSync('token');if (!token) return;try {const [error, response] = await uni.request({url: `${config.apiBaseUrl}/withdraw`,method: 'GET',header: {Authorization: `Bearer ${token}`},data: {sn: sn}});if (error) {throw new Error(`Request failed with error: ${error}`);}if (response.data.code === 0) {return true;} else {return false;}} catch (error) {return false;}},