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

news2024/11/14 15:20:36

撤回的设计

通过聊天，发送一个信息，界面自动将信息撤回，
当时要有时间的限制。同时也要将撤回记录到数据库中。

	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发布，有点小失望

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

前言 &#x1f34a;缘由 MySQL一更新&#xff0c;实在有点闹心 &#x1f3c0;事情起因&#xff1a; 大家好&#xff0c;我是JavaDog程序狗 今天跟大家聊一下MySQL9.0新版本发布&#xff0c;仅代表个人观点&#xff0c;大佬DBA轻喷 &#x1f4d8;『你想听的故事 』 本狗在…
阅读更多...
【python】Python中实现定时任务常见的几种方式原理分析与应用实战

【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.达梦数据库基础运维管理

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

文章目录 前言一、基础数据库管理权限角色管理1.1 DM 系统管理员的类型1.2 角色责则分类 DM 数据库2.1 数据库评估2.2 状态和模式 参考内容 前言 本篇博客为上一篇博客的进阶版&#xff0c;主要针对常规达梦数据库的基本管理上面 一、基础数据库管理 权限角色管理 1.1 DM 系…
阅读更多...
【Git企业级开发实战指南②】分支管理、远程操作

【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 学习【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深分页和浅分页

MySQL深分页和浅分页

前言 最近有面试过也遇到了问关于深分页问题&#xff0c;在这里简单从MySQL、ES等方面分享一下自己对该问题认识和总结。 一、深分页定义 可以从ES定义上来划分浅分页和深分页的边界&#xff0c;即页数超过10000页为深分页&#xff0c;少于10000页为浅分页。 二、MySQL深分…
阅读更多...
数字化时代：蚓链助力企业破局与腾飞！

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

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

CSP - J day9

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

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

目录 一、下载烧写工具和系统 二、烧写和启动 2.1 烧写和启动 2.2 烧写失败后的问题解决 三、串口连接到主机 3.1 串口连接到主机 四、网络连接到主机 4.1 修改香橙派IP地址 4.2 win11配置以太网静态ip 4.4 主机和香橙派直连 4.5 主机和香橙派连接到同一个路由器 五…
阅读更多...
Hive SQL进阶：掌握间隔连续查询技巧，优化大数据分析（二）

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靶机 DC: 7 ~ VulnHub 文章目录 DC-7靶机信息收集web渗透权限提升Drupal后台getshell权限提升靶机总结信息收集 经过扫描得到IP地址为192.168.78.154.其中开启了ssh和80端口，看来立足点就在于web渗透找到漏洞，获取用户密码来进行ssh连接进行寻找提权方案了使用dirb扫描…
阅读更多...
Windows平台下内存泄漏检测工具Visual Leak detector介绍(vscode使用）

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应用

学习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组件修改滚动条样式不生效问题

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

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

pikachu文件包含漏洞

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

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

忘记密码是我们常会遇到的情况之一&#xff0c;无论是在操作系统、网站账户、手机、电子邮件还是其他渠道上。 忘记密码是我们常会遇到的情况之一&#xff0c;无论是在操作系统、网站账户、手机、电子邮件还是其他渠道上。有时候如果密码需要符合特定的复杂性要求&#xff0c;…
阅读更多...
【C++题解】1023. 判断素数

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

欢迎关注本专栏《C从零基础到信奥赛入门级&#xff08;CSP-J&#xff09;》 问题&#xff1a;1023. 判断素数 类型&#xff1a;函数&#xff0c;sqrt函数入门 题目描述&#xff1a; 任意输入一个整数&#xff0c;判断它是否为素数。是的话输出 T ,不是的话输出 F。 质数又称…
阅读更多...
从传统监控到智能化升级：EasyCVR视频汇聚平台的一站式解决方案

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

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

Copyright @ 2022~2023