WebSocket实现私聊私信功能
目录
- 后端
- pom.xml
- Config配置类
- Controller类
- DTO
- 前端
- 安装相关依赖
- websocketService.js接口
- javascript
- html
- CSS
- 效果展示
- 简单测试连接:
- 报错解决方法
- 1、vue3 使用SockJS报错 ReferenceError: global is not defined
- 后面将继续完善,待更新...
后端
pom.xml
<!-- Spring Boot WebSocket--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!-- Spring Boot 数据库支持 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- MySQL 驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><!-- Thymeleaf(如果你使用了模板) --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><!-- Spring Boot Web 支持 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency>
Config配置类
注意:允许源根据自己项目修改
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;@Configuration
@EnableWebSocketMessageBroker
@Slf4j
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/queue", "/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/ws").setAllowedOrigins("http://127.0.0.1:8889", "http://localhost:8889", "http://localhost:8888", "http://127.0.0.1:8888", "http://localhost:8000").withSockJS(); // 添加 SockJS 支持}
}
Controller类
import com.tianwen.user.dtos.MessageDTO;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;@Controller
public class ChatController {@MessageMapping("/chat.sendMessage")@SendTo("/topic/messages")public MessageDTO sendMessage(MessageDTO messageDTO) throws Exception {System.out.println("接收到的message:"+messageDTO);// 可以在这里进行私信存储到数据库操作return messageDTO;}
}
DTO
import lombok.Data;
@Data
public class MessageDTO {private Integer senderId;private Integer receiverId;private String content;
}
前端
安装相关依赖
npm install sockjs-client@latest
npm install @stomp/stompjs sockjs-client
npm install global
npm i --save-dev @types/sockjs-client
websocketService.js接口
注意:服务器地址根据自己的修改(application.yml)
// websocketService.js
import { Stomp } from "@stomp/stompjs";
import SockJS from "sockjs-client/dist/sockjs.min.js";
export default {connect(onMessageReceived) {const socket = new SockJS("http://localhost:8000/ws"); // 使用 SockJS 连接const stompClient = Stomp.over(socket);stompClient.connect({}, () => {stompClient.subscribe("/topic/messages", (messageOutput) => {onMessageReceived(JSON.parse(messageOutput.body));});});},sendMessage(message) {const socket = new SockJS("http://localhost:8000/ws"); // 使用 SockJS 连接const stompClient = Stomp.over(socket);stompClient.connect({}, () => {stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(message));});},
};
javascript
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import type { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
const editorRef = shallowRef();
import websocketService from "@/api/websocketService.js";
import {ref,onMounted,
} from "vue";
import websocketService from "@/api/websocketService.js";const receiverIdAnswer = ref();
const sendPrivateMessage = () => {dialogVisible.value = true;
};
const sendPrivateMessage = async (userId) => {receiverIdAnswer.value = userId;dialogVisible.value = true;const response = await getAuthorDetailsByUserId(userId);console.log("response", userId);privateMessagesUser.value = response.data;console.log("privateMessagesUser", privateMessagesUser.value);
};const dialogVisible = ref(false);interface Message {id: string;senderId: string;receiverId: string;content: string;
}const messages = ref<Message[]>([]); // 明确指定消息数组的类型const newMessage = ref("");onMounted(() => {websocketService.connect((message: Message) => {// 明确指定回调函数的参数类型messages.value.push(message);});
});const sendMessage = () => {if (newMessage.value.trim()) {const message: Message = {// 明确声明消息类型id: Date.now().toString(), // 使用当前时间戳作为唯一 IDsenderId: userInfo.value.id, // Example senderreceiverId: receiverIdAnswer.value, // Example receivercontent: newMessage.value,};websocketService.sendMessage(message);newMessage.value = "";}
};
const editorConfig: Partial<IEditorConfig> = {placeholder: "请输入...",MENU_CONF: {},
};
const handleCreated = (editor) => {editorRef.value = editor;
};
// 排除富文本的菜单项
const toolbarConfigPrivateMessages: Partial<IToolbarConfig> = {// toolbar 配置excludeKeys: ["headerSelect","blockquote","|","bold","underline","italic","group-more-style", // 排除菜单组,写菜单组 key 的值即可"color","bgColor","|","fontSize","fontFamily","lineHeight","bulletedList","numberedList","todo","group-justify","group-indent","insertLink","group-video","insertTable","codeBlock","divider","undo","redo","fullScreen",],
};
</script>
html
<!-- 私信聊天框 --><el-dialog v-model="dialogVisible"><template #title><div style="text-align: center; font-weight: bold">{{ privateMessagesUser.username }}</div><hr class="line" /></template><div class="chat-container"><div class="messages" ref="messagesContainer"><divv-for="message in messages":key="message.id":class="{'my-message': message.senderId === userInfo.id,'other-message': message.senderId !== userInfo.id,}"><div style="display: flex; flex-direction: row"><div><el-image:src="userInfo.avatarUrl"style="width: 45px; border-radius: 50%"></el-image></div><div style="margin-top: 5px; margin-left: 10px"><div><strong>{{ userInfo.username }}</strong></div><divclass="message-bubble message-green"v-html="message.content"></div></div></div></div></div></div><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfigPrivateMessages"mode="default"/><Editorstyle="height: 200px; overflow-y: hidden"v-model="newMessage"@keyup.enter="sendMessage":defaultConfig="editorConfig"mode="default"@onCreated="handleCreated"/></div><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="sendMessage">发送</el-button></template></el-dialog>
CSS
<style scoped>
/* 私信样式 */
/* 标题居中 */
/* .private-message-dialog {
} */
.line {border-top: 1px solid #ccc; /* 直线的样式,可以修改颜色 */
}/* 聊天框滚动 */
.chat-container {display: flex;flex-direction: column;height: 300px;overflow-y: auto;box-sizing: border-box; /* 让 padding 和 border 包含在宽度和高度内 */
}.chat-container > * {width: 100%; /* 确保所有子元素不会超出容器宽度 */box-sizing: border-box; /* 确保子元素的宽度计算不受 padding 和 border 影响 */
}/* 消息容器 */
.messages {display: flex;flex-direction: column;gap: 10px;padding: 10px;max-height: 250px;overflow-y: auto;
}/* 发送方和接收方的消息样式 */
.my-message {/* text-align: right; */border-radius: 10px;height: auto;/* padding: 5px 10px; */
}.other-message {/* text-align: left; */border-radius: 10px;/* padding: 5px 10px; */
}.message-bubble {/* max-width: 70%; */padding: 0px 10px;border-radius: 10px;/* height: 30px; *//* margin: 0px 0px 0px 0px; *//* word-wrap: break-word; *//* line-height: 1.4; */font-size: 14px;display: flex;align-items: center;justify-content: center;
}.message-green {background-color: #57c457; /* 微信消息绿色 */color: white;align-self: flex-end; /* 让气泡靠右显示 */
}
</style>
效果展示
简单测试连接:
报错解决方法
1、vue3 使用SockJS报错 ReferenceError: global is not defined
解:
import SockJS from “sockjs-client”;
修改为:
import SockJS from “sockjs-client/dist/sockjs.min.js”;
并安装依赖
npm i --save-dev @types/sockjs-client
后面将继续完善,待更新…
相关文章:
WebSocket实现私聊私信功能
目录 后端pom.xmlConfig配置类Controller类DTO 前端安装相关依赖websocketService.js接口javascripthtmlCSS 效果展示简单测试连接: 报错解决方法1、vue3 使用SockJS报错 ReferenceError: global is not defined 后面将继续完善,待更新... 后端 pom.xml…...
进程的哪些内存类型容易引起内存泄漏
相信你在平时的工作中,应该遇到过下面这些场景: 伴随着服务器中的后台任务持续地运行,系统中可用内存越来越少; 应用程序正在运行时忽然被 OOM kill 掉了; 进程看起来没有消耗多少内存,但是系统内存就是不够…...
用着很顺手的电脑亮度随心随意调节
一、功能介绍 显示高级设置,可以调节屏幕RGB色彩。 娱乐亮度,一键娱乐亮度调节。 护眼亮度,保护眼睛,减少蓝光。 恢复正常,一键恢复到默认模块。 二、问题解答 1、亮度更改后显示器无变化!软件根本都没…...
图片生成Prompt编写技巧
1. 图片情绪(场景氛围) 一张图片一般都会有一个情绪基调,因为作画本质上也是在传达一些情绪,一般都会借助图片的氛围去转达。例如:比如家庭聚会一般是欢乐、喜乐融融。断壁残垣一般是悲凉。还有萧瑟、孤寂等。 2.补充细…...
博客之星2024年度总评选——我的年度创作回顾与总结
2024年,是我在CSDN博客上持续耕耘、不断成长的一年。在此,与大家分享一下我的年度创作回顾与总结。 一、创作成长与突破 在人工智能领域,技术迭代迅速,知识更新频繁。为了保持自己的竞争力,在今年,我始终…...
前端Vue2项目使用md编辑器
项目中有一个需求,要在前端给用户展示内容,内容有 AI 生成的,返回来的是 md 格式,所以需要给用户展示 md 格式,并且管理端也可以编辑这个 md 格式的文档。 使用组件库 v-md-editor。 https://code-farmer-i.github.i…...
Docker核心命令与Yocto项目的高效应用
随着软件开发逐渐向分布式和容器化方向演进,Docker 已成为主流的容器化技术之一。它通过标准化的环境配置、资源隔离和高效的部署流程,大幅提高了开发和构建效率。Yocto 项目作为嵌入式 Linux 系统构建工具,与 Docker 的结合进一步增强了开发…...
kong 网关和spring cloud gateway网关性能测试对比
该测试只是简单在同一台机器设备对spring cloud gateway网关和kong网关进行对比,受限于笔者所拥有的资源,此处仅做简单评测。 一、使用spring boot 的auth-service作为服务提供者 该服务提供了一个/health接口,接口返回"OK"&…...
DDoS攻击防护能力测试:Python版脚本
引言 在互联网服务日益复杂和流量持续增长的今天,确保服务器能够应对高并发请求并具备良好的抗DDoS攻击的能力至关重要。声明以下代码仅在合法的前提下使用。 工具设计原理 脚本的核心在于它能够创建多个线程来并发执行不同的攻击方法,从而实现对目标…...
白玉微瑕:闲谈 SwiftUI 过渡(Transition)动画的“口是心非”(下)
概述 秃头小码农们都知道,SwiftUI 不仅仅是一个静态 UI 构建框架那么简单,辅以海量默认或自定义的动画和过渡(Transition)特效,我们可以将 App 界面的绚丽升华到极致。 不过,目前 SwiftUI 中的过渡&#x…...
5.4 解锁 OpenAI - Translator:模块设计,构建翻译系统的 “基石”
OpenAI-Translator 模块设计 OpenAI-Translator 作为一款基于 OpenAI GPT 模型的智能翻译助手,其模块设计至关重要。为了保证翻译的高效性、准确性与可扩展性,系统需要一个结构清晰、功能强大的模块化设计。本文将对 OpenAI-Translator 的各个模块进行详细解析,涵盖其核心功…...
数据分析 变异系数
目录 变异系数的应用场景包括: 特点: 注意事项: np.nanvar——方差,np.sanstd标准差 简单来讲就是平均值/标准差 变异系数(Coefficient of Variation, CV)是一种相对量的变异指标,常用于衡…...
C语言——编译与链接
目录 前言 一程序的两种环境 1翻译环境 2执行环境 二预处理 1预处理符号 2#define 2.1#define 定义标识符 2.2#define 定义宏 2.2.1#和## 2.3带副作用的宏参数 2.4宏和函数的比较 2.5命名约定 3#undef 4命令行定义 5条件编译 5.1单分支 5.2多分支 5.3判断是…...
NewStar CTF week1 web wp
谢谢皮蛋 做这题之前需要先去学习一些数据库的知识 1 order by 2 1可以理解为输入的id,是一个占位符,按第二列排序用来测试列数,如果没有两列则会报错-1 union select 1,2 -1同样是占位符,union的作用是将注入语句合并到原始语句…...
Android BitmapShader简洁实现马赛克,Kotlin(一)
Android BitmapShader简洁实现马赛克,Kotlin(一) 这一篇, Android使用PorterDuffXfermode模式PorterDuff.Mode.SRC_OUT橡皮擦实现马赛克效果,Kotlin(3)-CSDN博客 基于PorterDuffXfermode实现马…...
NavVis手持激光扫描帮助舍弗勒快速打造“数字孪生”工厂-沪敖3D
在全球拥有近100家工厂的舍弗勒,从2016年开启数字化运营进程,而当前制造、库存、劳动力和物流的数字化,已无法支持其进一步简化工作流程,亟需数字化物理制造环境,打造“数字孪生”工厂。 NavVis为其提供NavVis VLX 3…...
web服务器 网站部署的架构
WEB服务器工作原理 Web web是WWW(World Wide Web)的简称,基本原理是:请求(客户端)与响应(服务器端)原理,由遍布在互联网中的Web服务器和安装了Web浏览器的计算机组成 客户端发出请求的方式:地址栏请求、超链接请求、表单请求 …...
ecovadis验厂相关要求
EcoVadis验厂的相关要求主要包括以下几个方面: 一、企业基本资质要求 合法注册与运营:企业必须是合法注册并运营的法人实体,具备合法的经营资质,如营业执照、税务登记证等。无严重违法记录:在过去三年内,…...
SSM开发(一)JAVA,javaEE,spring,springmvc,springboot,SSM,SSH等几个概念区别
目录 JAVA 框架 javaEE spring springmvc springboot SSM SSH maven JAVA 一种面向对象、高级编程语言,Python也是高级编程语言;不是框架(框架:一般用于大型复杂需求项目,用于快速开发)具有三大特性,所谓Jav…...
Spring Boot中选择性加载Bean的几种方式
说明:用过Spring框架的都知道其自动装配的特性,本文介绍几种选择性加载Bean的方式。Spring自动装配参考以下两篇文章: 基于SpringBoot的三层架构开发&统一响应结果 SpringBoot自动装配原理简单分析 ConditionalOnProperty Conditiona…...
【JVM】垃圾收集器详解
你将学到 1. Serial 收集器 2. ParNew 收集器 3. Parallel Scavenge 收集器 4. Serial Old 收集器 5. Parallel Old 收集器 6. CMS 收集器 7. G1 收集器 在 Java 中,垃圾回收(GC)是自动管理内存的一个重要机制。HotSpot JVM 提供了多种…...
【实用技能】如何在Stimulsoft产品中使用用户函数,快速创建报表及仪表盘
Stimulsoft Ultimate (原Stimulsoft Reports.Ultimate)是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能,Stimulsoft Ultimate包含了…...
MySQL四种隔离级别
MySQL的隔离级别是在事务这个大主题下面产生的说法。 那么什么是事务,事务就是一组sql语句,要么全部执行成功,要么都不执行,不能只执行成功其中的部分sql。事务的最终目的是为了保证数据库数据的完整性、一致性和可用性。 要保…...
Unity入门1
安装之后无法获得许可证,可以考虑重装 新建项目 单击空白处生成脚本 双击c#文件 会自动打开vstudio 检查引用 如果没有引用,重开vstu,或者重新加载项目 hierarchy层级 scenes场景 assets资产 inspector督察 icon图标 资源链接&…...
qml Loader详解
1、概述 QML Loader是Qt Quick框架中的一个关键元素,它允许开发者动态地加载和卸载QML组件。这种动态加载机制对于提升应用程序的性能、响应速度和用户体验至关重要。通过Loader,应用程序可以在需要时才加载特定的组件,而不是在启动时一次性…...
《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风,开源流体吊坠,物联网在军工领域的应用,Unicode字符压缩解压
周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版: 《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风…...
web端ActiveMq测试工具
如何用vue3创建简单的web端ActiveMq测试工具? 1、复用vue3模板框架 创建main.js,引入APP文件,createApp创建文件,并加载element插件,然后挂载dom节点 2、配置vue.config.js脚本配置 mport { defineConfig } from "vite&qu…...
1561. 你可以获得的最大硬币数目
class Solution:def maxCoins(self, piles: List[int]) -> int:piles.sort()res,n0,len(piles)for i in range(n//3):respiles[n-2-2*i]return res这里如果"你"想要获取最大,那么从最大的开始找 每隔俩算一个最大累计,Bob默认自己从最小那找…...
NIO | 什么是Java中的NIO —— 结合业务场景理解 NIO (二)
实时通信应用 的主流技术 并非NIO , 整理本文的目的是 更好的理解 NIO 。 在现代的 即时聊天应用中,使用 WebSocket、MQTT 或 SignalR 等协议更为普遍。 若您想了解 当前主流的有关 实时通信应用 的技术 , 请移步他文。 (一) 业务场景 实…...
GD32L233RB 驱动数码管
1.数码管有8段A、B、C、D、E、F、G 和 H小数点 以及片选信号(DIG) DIG用来选择那一位,A-G 用来显示段 静态显示每次只能一次显示单个位 动态显示(动态扫描)所有的位显示结束要在10ms左右 显示2ms 消光1ms 实…...
AIGC视频生成模型:Stability AI的SVD(Stable Video Diffusion)模型
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍Stability AI的视频生成模型SVD(Stable Video Diffusion)模型,这家公司在图像生成领域富有盛名,开发并维护了知名开源项目SD系列…...
Linux 系统错误处理简介
Linux 系统错误处理简介 1. errno:错误代码的载体2. strerror():错误信息的翻译官3. perror():便捷的错误信息输出4. 系统调用与库函数的区别5. 错误处理的最佳实践 在 C/C 程序开发中,我们经常需要处理各种错误情况 Linux 系统提…...
systemC示例
main.cpp #include <memory> using namespace std; #include "top.h" int sc_main(int i, char *av[]) { // 关闭关于 IEEE 1666 标准中过时特性的警告 sc_report_handler::set_actions("/IEEE_Std_1666/deprecated", SC_DO_NOTHING); cout <…...
C++打字模拟
改进于 文宇炽筱_潜水 c版的打字效果_c自动打字-CSDN博客https://blog.csdn.net/2401_84159494/article/details/141023898?ops_request_misc%257B%2522request%255Fid%2522%253A%25227f97863ddc9d1b2ae9526f45765b1744%2522%252C%2522scm%2522%253A%252220140713.1301023…...
国产低功耗带LCD驱动和触摸按键功能的MCU
以下是国产低功耗、集成LCD驱动和触摸按键功能的MCU精选型号及其核心特性,结合性能、功耗和适用场景进行综合推荐: 1.灵动微MM32L0130系列 257 核心特性:低功耗:待机模式功耗低至100nA,支持多种低功耗模式。 LCD驱动&a…...
在 imx93 平台调试 nau88c10 声卡
一、环境介绍 linux 版本:6.6.52 soc:imx9331 codec:nau88c10 使用的内核文件为 Image,dtb 文件为:imx93-11x11-evk.dtb 二、硬件检查 i2s 信号线要接对 i2c 控制信号建议为 4.7k 上拉 codec 供电可以按参考设计…...
机器学习-分类算法评估标准
一. 准确率 accuracy 将预测结果和测试集的目标值比较,计算预测正确的百分比 准确率越高说明模型效果越好 from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier #加载鸢尾花…...
美区TikTok解封后如何回归使用?
随着2025年初美区TikTok解封的消息引起了广泛关注,许多用户纷纷开始重新关注这一全球最受欢迎的短视频平台。在经历了数月的禁用期后,TikTok在美国市场的回归,代表了这一平台的巨大潜力和挑战。从用户的使用习惯,到平台的内容策略…...
行人识别检测数据集,yolo格式,PASICAL VOC XML,COCO JSON,darknet等格式的标注都支持,准确识别率可达99.5%
作者简介: 高科,先后在 IBM PlatformComputing从事网格计算,淘米网,网易从事游戏服务器开发,拥有丰富的C,go等语言开发经验,mysql,mongo,redis等数据库,设计模…...
grafana + Prometheus + node_exporter搭建监控大屏
本文介绍生产系统监控大屏的搭建,比较实用也是实际应用比较多的方式,希望能够帮助大家对监控系统有一定的认识。 0、规划 grafana主要是展示和报警,Prometheus用于保存监控数据,node_exporter用于实时采集各个应用服务器的事实状…...
【腾讯云】docker创建网络遇到Unable to enable SKIP DNAT rule
docker创建网络遇到Unable to enable SKIP DNAT rule 背景 今天打算在服务器上安装es,但是在创建网络时,提示 Error response from daemon: Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables failed: iptables --wait -t nat -I DOCKER…...
DeepSeek R1模型解读与使用
DeepSeek在推出R1预览版两个月后,发布了R1的正式版本,并且开源了模型,开放了API调用。我们直接来解读一下这款模型。 这是官方的性能评测图。从左到右分别是DeepSeek-R1,o1正式版,32B蒸馏版R1,o1-mini&…...
AI新玩法:Flux.1图像生成结合内网穿透远程生图的解决方案
文章目录 前言1. 本地部署ComfyUI2. 下载 Flux.1 模型3. 下载CLIP模型4. 下载 VAE 模型5. 演示文生图6. 公网使用 Flux.1 大模型6.1 创建远程连接公网地址 7. 固定远程访问公网地址 前言 在这个AI技术日新月异的时代,图像生成模型已经成为了创意工作者和开发者手中…...
api开发如何确保通过非官方库解析口令的合法性?
通过非官方库解析淘宝口令可能存在违反淘宝平台规则以及法律法规的风险,很难完全确保其合法性。如果确实有需求,可从以下几个方面尽量降低风险,提高合法性: 了解法律法规 《中华人民共和国网络安全法》:需确保解析行为…...
第6章 ThreadGroup详细讲解(Java高并发编程详解:多线程与系统设计)
1.ThreadGroup 与 Thread 在Java程序中, 默认情况下, 新的线程都会被加入到main线程所在的group中, main线程的group名字同线程名。如同线程存在父子关系一样, Thread Group同样也存在父子关系。图6-1就很好地说明了父子thread、父…...
如何使用Python脚本将本地项目上传到 GitHub
前言 这里我们通过创建一个新的github仓库,来测试我们的脚本能否上传我们本地的项目,并且进行更新。首先你需要先安装 Git,关于这部分我好像没有记录过,这里我搜索看了一下,这篇博客写的Git安装详解应该是比较齐全的&…...
css动画水球图
由于echarts水球图动画会导致ios卡顿,所以纯css模拟 展示效果 组件 <template><div class"water-box"><div class"water"><div class"progress" :style"{ --newProgress: newProgress % }"><…...
Shellcode
什么是shellcode shellcode通常是软件漏洞利用过程中使用一小段机器代码 作用 1.启动shell,进行交互 2.打开服务器端口等待连接 3.反向连接端口 4.。。。 如何编写shellcode 1.设置rdi指向/bin/sh 2.rsi0,rdx0 3.rax0x3b 4.syscall进行系统调用 64位系统…...
Element使用表单重置如果不使用prop,重置无法生效
文章目录 为什么需要 prop?示例:使用 prop 的正确方式关键点总结 在 element-ui 的 el-form 组件中, prop 属性是与表单验证和表单字段绑定密切相关的,尤其在使用 resetFields() 重置表单数据时。 如果不使用 prop࿰…...
[Qt]系统相关-网络编程-TCP、UDP、HTTP协议
目录 前言 一、UDP网络编程 1.Qt项目文件 2.UDP类 QUdpSocket QNetworkDatagram 3.UDP回显服务器案例 细节 服务器设计 客户端设计 二、TCP网络编程 1.TCP类 QTcpServer QTcpSocket 2.TCP回显服务器案例 细节 服务器设计 客户端设计 三、HTTP客户端 1.HTTP…...