SpringBoot:WebSocket实现消息撤回、图片撤回

news2024/11/26 8:32:26

下面只是讲述一下实现思路,代码基本没有哈!有时间单独发表一篇关于websocket的相关操作的博客。

请添加图片描述
请添加图片描述

1. 消息撤回、图片撤回

个人觉得关于撤回,需要下述几个过程:

  • 发送的消息的标签上可以定义一个属性,这个属性的值应该是唯一的,js简单实现如下:
randomId:function () {
        let time = new Date().getTime();
        // 时间戳
        let num1 = Math.floor(Math.random()*1000);
        let str_1 = time + '' + num1;
        let ans = '';
        for(let i=0;i<str_1.length;i++){
            ans += String.fromCharCode(parseInt(str_1[i])+97);
        }
        return ans;
    }// 生成随机id

上述代码用时间戳结合随机数实现属性值的唯一性。

  • 发送消息这一端撤回消息只需简单使用js进行标签删除即可;在接收端这一端撤回消息操作为需要发送消息端ws.send往服务器发送一条消息,然后服务器进行转发,除了不转发到发送消息端的用户之外,其他用户的客户端那边都应该接收到这一条消息,这条消息的数据应该有上述那个唯一值(id),然后在消息栏那里找到这个属性值是这个唯一值(id)的标签,进行相关js操作标签删除即可。
  • 如果还想实现下述提示信息,对于在消息撤回发起端,只需在当前删除标签元素后再插入一个标签元素即可,而在消息撤回接收端ws.onmessage需要做的就是删除这个消息标签元素之前,获取到这个标签元素的用户信息,之后操作和消息撤回发起端基本一致。

消息撤回发起端

消息撤回发起端

消息撤回接收端
消息撤回接收端

2. AI 讲的撤回消息操作

  • 在客户端实现撤回功能,即当用户想要撤回某条消息时,客户端将该消息标记为已删除,并发送一条删除消息到服务器,让服务器知道用户的操作。在其他客户端上,该消息将被标记为已删除并不再显示。

  • 使用消息历史记录来实现撤回功能。在服务器端,将所有消息存储到数据库中,并保留消息的时间戳。当用户想要撤回某条消息时,服务器将该消息标记为已删除,并将所有其他客户端的历史消息重新加载以显示更新内容。

  • 实现“防止误操作”的策略。这种策略可以避免用户发送错误的消息。例如,用户发送消息后,将等待一段时间以进行确认,如果用户在此期间撤回了消息,则系统将撤回消息。否则,消息将被发送并不可撤回。

可以看到AI说的第一点和上述基本一致,其他两种高深一些哈!

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

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

相关文章

18- 弹幕系统设计

1、弹幕系统设计 场景分析&#xff1a;客户端针对某一视频创建了弹幕&#xff0c;发送后端进行处理&#xff0c;后端需要对所有正在观看该视频的用户推送该弹幕。 1.1、实现方式 使用短连接进行通信或使用长连接进行通信。 1.1.1、短连接实现方案 所有观看视频的客户端不断…

单元测试尽量不要区分类与方法

单元测试尽量不要区分类与方法 单元测试是软件开发中非常重要的一环&#xff0c;其主要作用是在开发过程中对代码进行自动化测试与检验&#xff0c;从而保证代码质量&#xff0c;减少错误和缺陷的产生。然而&#xff0c;在实际的单元测试中&#xff0c;很多人会选择将测试分成类…

svg教程-初识svg

第一章 认识svg 简单来说&#xff1a; 位图&#xff1a;放大会失真图像边缘有锯齿&#xff1b;是由像素点组成&#xff1b;前端的 Canvas 就是位图效果。 矢量图&#xff1a;放大不会失真&#xff1b;使用 XML 描述图形。 我在 知乎 上找了一个图对说明一下。 左边是位图&…

chatgpt赋能python:用Python打造个人网站的SEO优化

用Python打造个人网站的SEO优化 简介 在互联网时代&#xff0c;拥有一个个人网站已经成为了一个时尚和必要的事情。网站不仅可以展示你的技能和个人风采&#xff0c;还可以提高你的知名度和影响力。但是&#xff0c;如何让人们发现你的网站&#xff0c;通过搜索引擎来访问你的…

从中序与后序遍历序列构造二叉树(java)

从中序与后序遍历序列构造二叉树 leetcode 106 题 从中序与后序遍历序列构造二叉树解题思路解题代码&#xff1a;二叉树专题 leetcode 106 题 从中序与后序遍历序列构造二叉树 leetcode 106:从中序与后序遍历序列构造二叉树 原题链接 题目描述&#xff1a; 给定两个整数数组 i…

342. 4的幂

342. 4的幂 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 342. 4的幂 https://leetcode.cn/problems/power-of-four/ 完成情况&#xff1a; 解题思路&#xff1a; 跟之前的一个丑数一样&#xff0c;循环条件就…

使用VSCode SSH公网远程连接本地服务器开发 - cpolar内网穿透

文章目录 前言视频教程1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 转…

MySQL-事件详解

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️树高千尺&#xff0c;落叶归根人生不易&…

本地Linux服务器安装MongoDB数据库【公网远程数据库】

文章目录 &#x1f449;关于作者&#x1f449;前言&#x1f61c;1. 配置Mongodb源&#x1f61c;2. 安装MongoDB&#x1f61c;3. 局域网连接测试&#x1f61c;4. 安装cpolar内网穿透&#x1f61c;5. 配置公网访问地址&#x1f61c;6. 公网远程连接&#x1f61c;7. 固定连接公网地…

基于Kubernetes的实战案例分享

▲ 点击上方"DevOps和k8s全栈技术"关注公众号 本技术文档旨在分享一个基于Kubernetes&#xff08;简称K8s&#xff09;的实际应用案例。我们将介绍K8s集群的规模、部署架构&#xff0c;并详细说明该案例在生产环境中的实际应用。通过本文档&#xff0c;读者将能够了解…

elasticsearchelastic-head docker安装

Elasticsearch8.7.1 安装 拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.7.1创建elastic 网络 docker network create elastic执行创建 docker run --name esA --net elastic -p 9200:9200 -e ES_JAVA_OPTS"-Xms1g -Xmx1g" -it dock…

【笔记】微机原理及接口技术1 -- 微机基础与8086

微机基础 微机组成 下图展示了微型计算机的硬件系统基本结构 中央处理器(CPU): 负责执行计算机程序指令,进行数据运算和逻辑运算。 主存: 用于 storing 程序和数据,包括只读存储器 ROM 和随机存储器 RAM。 输入设备: 外部数据输入的途径,如鼠标、键盘、扫描仪等。 输出设备…

Hudi Flink SQL代码示例及本地调试

前言 之前在Flink Hudi DataStream API代码示例中总结了Hudi Flink DataStream API的代码及本地调试&#xff0c;并且在文中提到其实大家用Table API更多一些&#xff0c;但是我感觉Table API调试源码可能会比较难一点&#xff0c;因为可能会涉及到SQL解析&#xff0c;不清楚T…

【单片机 TB作品】基于STM32F103C8T6单片机的甲醛监测与报警系统

文章目录 原理图ZE08-CH2O甲醛传感器A9短信模块实物 原理图 ZE08-CH2O甲醛传感器 ZE08-CH2O是一种甲醛&#xff08;甲醛&#xff09;传感器&#xff0c;用于检测环境中的甲醛浓度。甲醛是一种有毒气体&#xff0c;广泛用于建筑材料、家具、地毯、化妆品和其他消费品的生产中。…

STM32单片机(三)第二节:GPIO输出练习(LED闪烁、LED流水灯、蜂鸣器)

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

案例挑战——MVVM框架理解和实践

MVVM框架理解和实践 一、背景介绍二、 什么是MVVM架构&#xff1f;1.架构示意图2.MVVM概念总结3.实现VM的框架 三、通过案例来理解MVVM框架1.没有使用MVVM架构的程序2.使用了MVVM架构的程序3.对比 四、总结 一、背景介绍 最近正在做新版项目的MVVM架构的结合业务的具体落地&am…

报表控件FastReport使用指南——如何打开WebP格式的图片

FastReport 是功能齐全的报表控件&#xff0c;可以帮助开发者可以快速并高效地为.NET&#xff0c;VCL&#xff0c;COM&#xff0c;ActiveX应用程序添加报表支持&#xff0c;由于其独特的编程原则&#xff0c;现在已经成为了Delphi平台最优秀的报表控件&#xff0c;支持将编程开…

SWUST软件技术基础实验笔记

目录 前言 堆栈的操作 实验目的 实验要求 单链表操作 实验目的 实验要求 二叉树操作 实验目的 实验要求 查找与排序 实验目的 实验要求 查找算法 排序算法 实验总结 前言 软件技术基础实验分为四个部分&#xff0c;涵盖了堆栈的操作、单链表操作、二叉树操作以…

微前端——qiankun配置方法

什么是微前端 微前端是指存在于浏览器中的微服务&#xff0c;其借鉴了微服务的架构理念&#xff0c;将微服务的概念扩展到了前端。 如果对微服务的概念比较陌生的话&#xff0c;可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块&#xff0c;每个微前端模块可以…

Qt文件系统源码分析—第八篇QFileSystemWatcher

深度 本文主要分析Windows平台&#xff0c;Mac、Linux暂不涉及 本文只分析到Win32 API/Windows Com组件/STL库函数层次&#xff0c;再下层代码不做探究 本文QT版本5.15.2 类关系图 QTemporaryFile继承QFile QFile、QSaveFile继承QFileDevice QFileDevice继承QIODevice Q…