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

news2024/11/24 15:31:29

撤回的设计

通过聊天,发送一个信息,界面自动将信息撤回,
当时要有时间的限制。同时也要将撤回记录到数据库中。
	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 milliseconds
			
			  if (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 milliseconds
					
			 if (currentTime > (messageTime + oneMinute)) {
				 return false;
			 }else{
				 return true;
			 }

		},
		

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

<template>
	<view class="">
		<scroll-view
			scroll-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>
					<image
						class="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;
			}
			
		},

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1984603.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【MySQL】MySQL9.0发布,有点小失望

前言 &#x1f34a;缘由 MySQL一更新&#xff0c;实在有点闹心 &#x1f3c0;事情起因&#xff1a; 大家好&#xff0c;我是JavaDog程序狗 今天跟大家聊一下MySQL9.0新版本发布&#xff0c;仅代表个人观点&#xff0c;大佬DBA轻喷 &#x1f4d8;『你想听的故事 』 本狗在…

【python】Python中实现定时任务常见的几种方式原理分析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

安全主机软件是如何有效应对暴力破解的?

在网络安全日益严峻的今天&#xff0c;暴力破解作为一种常见的攻击手段&#xff0c;时刻威胁着企业和个人的账户安全。为了有效抵御这一威胁&#xff0c;主机安全作为一款集实时监测、智能分析、风险预警于一体的主机安全软件&#xff0c;通过多维度、智能化的防护策略&#xf…

便携式气象监测系统的功能与应用

在科技日新月异的今天&#xff0c;气象监测作为农业生产、城市规划、环境保护及灾害预防等领域不可或缺的一环&#xff0c;正经历着前所未有的变革。其中&#xff0c;便携式气象监测系统的出现&#xff0c;如同一股清新的风&#xff0c;吹散了传统气象观测的种种限制&#xff0…

3.达梦数据库基础运维管理

文章目录 前言一、基础数据库管理权限角色管理1.1 DM 系统管理员的类型1.2 角色责则分类 DM 数据库2.1 数据库评估2.2 状态和模式 参考内容 前言 本篇博客为上一篇博客的进阶版&#xff0c;主要针对常规达梦数据库的基本管理上面 一、基础数据库管理 权限角色管理 1.1 DM 系…

【Git企业级开发实战指南②】分支管理、远程操作

目录 一、分支管理1.1理解分支1.2创建分支1.3切换分支1.4合并分支1.5删除分支1.6合并冲突1.7 分支管理策略1.7.1分支策略 1.8bug分支1.9删除临时分支 二、远程操作2.1理解分布式版本控制系统2.2 远程仓库2.2.1 新建远程仓库2.2.2 克隆远程仓库2.2.3向远端仓库推送2.2.4拉取远端…

ROS2 Humble 学习【openEuler】

ROS2 Humble 学习 1 介绍1.1 概述1.2 ROS2 详细介绍1.3 openEuler 安装 ROS2 Humble1.4 ROS2 系统架构 2 ROS2 基础2.1 节点编写、编译、运行【简单示例】节点编写节点编译 g节点运行节点编译 make节点编译 CMakeLists.txtCMake依赖查找流程Python 依赖查找流程 2.2 节点交互、…

MySQL深分页和浅分页

前言 最近有面试过也遇到了问关于深分页问题&#xff0c;在这里简单从MySQL、ES等方面分享一下自己对该问题认识和总结。 一、深分页定义 可以从ES定义上来划分浅分页和深分页的边界&#xff0c;即页数超过10000页为深分页&#xff0c;少于10000页为浅分页。 二、MySQL深分…

数字化时代:蚓链助力企业破局与腾飞!

在当今数字化浪潮汹涌澎湃的时代&#xff0c;企业面临着前新机遇与新挑战。您是否渴望在竞争激烈的市场中实现数字化弯道超车&#xff1f;是否梦想着打造专属自己的独特生意赛道&#xff1f;是否期盼着拥有专享的资源生态圈&#xff1f;如果您的答案是肯定的&#xff0c;那么蚓…

CSP - J day9

一. 题目 &#xff08;1&#xff09;早安 思路&#xff1a; &#xff08;1&#xff09;cin和scanf读入字符串时遇到空格或换行就停止读入&#xff0c;对于要读入带空格的字符串时&#xff0c;常用 两种方法&#xff1a; // 法一string s;getline( cin, s ); // 法…

OrangePi AIpro学习1 —— 烧写和ssh系统

目录 一、下载烧写工具和系统 二、烧写和启动 2.1 烧写和启动 2.2 烧写失败后的问题解决 三、串口连接到主机 3.1 串口连接到主机 四、网络连接到主机 4.1 修改香橙派IP地址 4.2 win11配置以太网静态ip 4.4 主机和香橙派直连 4.5 主机和香橙派连接到同一个路由器 五…

Hive SQL进阶:掌握间隔连续查询技巧,优化大数据分析(二)

目录 1.访问次数最多的5个用户 2.近 30 天的每日活跃用户数 3.获取1-180天注册活跃留存表 4.学生名次统计 5.最近连续3周连续活跃用户数 6.最近7天内连续3天活跃用户数 7.餐馆营业额变化增长 相关拓展 1.访问次数最多的5个用户 输出每个app 下访问次数最多的5个用户 返…

DC-7靶机渗透测试

DC-7靶机 DC: 7 ~ VulnHub 文章目录 DC-7靶机信息收集web渗透权限提升Drupal后台getshell权限提升靶机总结信息收集 经过扫描得到IP地址为192.168.78.154.其中开启了ssh和80端口,看来立足点就在于web渗透找到漏洞,获取用户密码来进行ssh连接进行寻找提权方案了使用dirb扫描…

Windows平台下内存泄漏检测工具Visual Leak detector介绍(vscode使用)

!!!此工具只能检测配合VC进行代码的内存泄漏检测 1、搜索VLD工具下载 2、配置环境变量 3、在main.cpp中加入#include<vld.h> 4、在CMakeLists.txt中添加 SET(VLD_PATH "xxx") # 链接vld静态库 target_link_libraries(${PROJECT_NAME} PRIVATE ${VLD_PATH})…

学习STM32(2)--STM32单片机GPIO应用

目录 1 引 言 2 实验目的 3 实验内容 3.1掌握STM32F103的GPIO控制 3.1.1 GPIO的分组 3.1.2 GPIO的常用功能 3.1.3 STM32单片机GPIO位结构 3.1.4 STM32单片机GPIO工作模式 3.1.5 STM32的GPIO 输出-点亮LED编程要点 使用GPIO时&#xff0c;按下面步骤进行&#xff1…

antd-5版本table组件修改滚动条样式不生效问题

问题描述 在react项目中使用antd-ProComponents组件库的Protable组件时修改table自带的滚动条样式不生效。 排查记录 一般来说直接table组件库要自定义滚动条的样式&#xff0c;只需要修改 ant-table-body 的样式即可&#xff0c;代码如下&#xff1a; .ant-table-body {&am…

pikachu文件包含漏洞

一&#xff1a;漏洞基础 程序在引用文件的时&#xff0c;引用的文件名存在可控的情况&#xff0c;传入的文件名没有经过合理的校验或校验不严&#xff0c;从而操作了预想之外的文件&#xff0c;就有可能导致文件泄漏和恶意的代码注入&#xff1b; 文件包含漏洞概念 在PHP程序…

如果忘了Linux密码如何重置?

忘记密码是我们常会遇到的情况之一&#xff0c;无论是在操作系统、网站账户、手机、电子邮件还是其他渠道上。 忘记密码是我们常会遇到的情况之一&#xff0c;无论是在操作系统、网站账户、手机、电子邮件还是其他渠道上。有时候如果密码需要符合特定的复杂性要求&#xff0c;…

【C++题解】1023. 判断素数

欢迎关注本专栏《C从零基础到信奥赛入门级&#xff08;CSP-J&#xff09;》 问题&#xff1a;1023. 判断素数 类型&#xff1a;函数&#xff0c;sqrt函数入门 题目描述&#xff1a; 任意输入一个整数&#xff0c;判断它是否为素数。是的话输出 T ,不是的话输出 F。 质数又称…

从传统监控到智能化升级:EasyCVR视频汇聚平台的一站式解决方案

随着科技的飞速发展和社会的不断进步&#xff0c;视频监控已经成为现代社会治安防控、企业管理等场景安全管理中不可或缺的一部分。而在视频监控领域&#xff0c;EasyCVR视频汇聚平台凭借其强大的多协议接入能力&#xff0c;在复杂多变的网络环境中展现出了卓越的性能和广泛的应…