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

基于websocket搭建聊天室

news 来源：原创 2025/8/28 9:49:37

基于websocket搭建聊天室

1.后端配置

1.依赖一个web一个websocket

 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

2.config

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}}

3.ws

import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;@Component
@ServerEndpoint("/ws/chat/{username}")
public class WebSocketServer {private static final CopyOnWriteArraySet<WebSocketServer> clients = new CopyOnWriteArraySet<>();// 存储在线用户（线程安全）private static final Map<String, Session> userMap = new ConcurrentHashMap<>();private Session session;private String username; // 当前用户@OnOpenpublic void onOpen(@PathParam("username") String username, Session session) {this.username = username;userMap.put(username, session);this.session = session;clients.add(this);System.out.println("用户 " + username + " 连接成功，当前在线人数：" + clients.size());sendMessage("欢迎 " + username + " 加入聊天室！");}@OnMessagepublic void onMessage(String message) {System.out.println("收到消息：" + message);broadcast(message);}@OnClosepublic void onClose() {clients.remove(this);userMap.remove(username);System.out.println("用户 " + username + " 断开连接，当前在线人数：" + clients.size());broadcast("用户 " + username + " 离开聊天室");System.out.println("连接关闭：" + session.getId());}@OnErrorpublic void onError(Session session, Throwable error) {System.out.println("用户 " + username + " 发生错误：" + error.getMessage());}private void broadcast(String message) {for (WebSocketServer client : clients) {try {client.session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}}/*** 发送消息给某个用户*/private void sendMessage(String message) {try {if (userMap.containsKey(username)) {userMap.get(username).getBasicRemote().sendText(message);}} catch (IOException e) {e.printStackTrace();}}
}

2.前端

1.vue2+element ui

2.前端代理vue.config.js

"use strict"
const path = require("path")function resolve(dir) {return path.join(__dirname, dir)
}
const name =  "vue Template"
module.exports = {publicPath: "./",assetsDir: "static",lintOnSave: false,devServer: {proxy: {"^/socket": {target: "ws://localhost:8888",ws: true,changeOrigin: true,pathRewrite: {'/socket':''}},"^/api": {target: "http://localhost:8888",changeOrigin: true,// pathRewrite: {'/datashare':'/'}},},},productionSourceMap: false,configureWebpack: {name: name,resolve: {alias: {"@": resolve("src"),},},},}

3.测试代码

<template><div><!-- 连接按钮 --><el-button type="primary" :disabled="loading || isConnected" @click="connect" v-loading="loading">{{ isConnected ? "已连接" : "连接" }}</el-button><!-- 断开连接按钮 --><el-button type="danger" :disabled="!isConnected" @click="disconnect">断开连接</el-button><!-- 消息输入框 --><el-input v-model="msg" placeholder="输入消息" @keyup.enter="sendMessage"/><!-- 发送消息按钮 --><el-button type="success" :disabled="!isConnected" @click="sendMessage">发送</el-button><!-- 消息列表 --><el-card v-if="messages.length > 0"><p v-for="(message, index) in messages" :key="index">{{ message }}</p></el-card></div>
</template><script>
export default {name: "WebSocketChat",data() {return {socket: null, // WebSocket 对象username: "Jack", // 当前用户msg: "", // 发送的消息messages: [], // 消息列表isConnected: false, // 连接状态loading: false, // 是否正在连接};},methods: {// 连接 WebSocketconnect() {if (this.isConnected) {console.log("WebSocket 已连接");return;}this.loading = true;this.socket = new WebSocket(`/socket/ws/chat/${this.username}`);this.socket.onopen = () => {console.log("WebSocket 连接成功");this.isConnected = true;this.loading = false;};this.socket.onmessage = (event) => {console.log("收到消息：" + event.data);this.messages.push(event.data);};this.socket.onclose = () => {console.warn("WebSocket 连接关闭");this.isConnected = false;this.cleanupSocket();};this.socket.onerror = (error) => {console.error("WebSocket 发生错误", error);this.isConnected = false;this.cleanupSocket();};},// 发送消息sendMessage() {if (this.socket && this.isConnected) {this.socket.send(this.msg);console.log("发送消息：" + this.msg);this.messages.push(`我: ${this.msg}`);this.msg = "";} else {console.warn("WebSocket 未连接，无法发送消息");}},// 断开 WebSocketdisconnect() {if (this.socket) {this.socket.close();}this.isConnected = false;},// 关闭 WebSocket 并清理cleanupSocket() {if (this.socket) {this.socket.close();this.socket = null;}this.isConnected = false;this.loading = false;},},beforeUnmount() {this.cleanupSocket();},
};
</script><style scoped>
</style>

基于websocket搭建聊天室

基于websocket搭建聊天室 1.后端配置 1.依赖一个web一个websocket <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.spr…...

编程日记 2025/8/28 9:49:37

Metal学习笔记十一：贴图和材质

在上一章中，您设置了一个简单的 Phong 光照模型。近年来，研究人员在基于物理的渲染 （PBR） 方面取得了长足的进步。PBR 尝试准确表示真实世界的着色，真实世界中离开表面的光量小于表面接收的光量。在现实世界中&#xf…...

编程日记 2025/8/28 9:38:44

STM32-USART串口数据包

一：HEX数据包发送 1.为了收发数据包，先定义两个缓存区的数组 ，这4个数据只存储发送或者接收的载荷数据，包头和包尾不存 uint8_t Serial_TxPacket[4]; uint8_t Serial_RxPacket[4]; uint8_t Serial_RxFlag;//接收一个数据包就置F…...

编程日记 2025/8/27 20:15:34

【LeetCode 热题 100】438. 找到字符串中所有字母异位词 | python 【中等】

继续学！嗨起来！！！（正确率已经下30%了，我在干什么） 题目： 438. 找到字符串中所有字母异位词给定两个字符串 s 和 p，找到 s 中所有 p 的子串，返回这些子串的…...

编程日记 2025/8/28 9:41:22

Ollama+Deepseek-R1+AnythingLLM本地个人知识库搭建

一、OllamaDeepseek-R1AnythingLLM本地个人知识库搭建在搭建强大的本地个人知识库以及提升开发效率的技术体系中，Ollama、DeepSeek-R1 和 AnythingLLM 扮演着举足轻重的角色。Ollama 作为模型运行与管理工具，是整个技术架构中的关键枢纽，负…...

编程日记 2025/8/28 9:42:48

决策树（Decision Tree）基础知识

目录一、回忆1、*机器学习的三要素：1）*函数族2）*目标函数2.1）*模型的其他复杂度参数 3）*优化算法 2、*前处理/后处理1）前处理：特征工程2）后处理：模型选择和模型评估 3、…...

编程日记 2025/8/27 17:35:11

跨域-告别CORS烦恼

跨域-告别CORS烦恼文章目录跨域-告别CORS烦恼[toc]1-参考网址2-思路整理1-核心问题2-个人思考3-脑洞打开4-个人思考-修正版1-个人思考2-脑洞打开 3-知识整理1-什么是跨域一、同源策略简介什么是源什么是同源是否是同源的判断哪些操作不受同源策略限制跨域如何跨域二、CORS 简…...

编程日记 2025/8/28 9:38:42

浅论数据库聚合：合理使用LambdaQueryWrapper和XML

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、数据库聚合替代内存计算（关键优化）二、批量处理优化四、区域特殊处理解耦五、防御性编程增强前言技术认知点：使用 XM…...

编程日记 2025/8/27 17:15:00

文章目录 * [【一】知道居中元素的宽高](https://blog.csdn.net/weixin_41305441/article/details/89886846#_1) [absolute 负margin](https://blog.csdn.net/weixin_41305441/article/details/89886846#absolute__margin_2) [absolute margin auto](https://blog.csdn.net…...

编程日记 2025/8/27 22:32:51

Nerf流程

一.数据处理： 在输入数据时，并没有给出相机的内参与外参，需要在数据处理得出相机的内外惨数，作者使用COLMAP得到相机参数后，转成NeRF可以读取的格式即可以用于模型训练。旋转矩阵的第一列到第三列分别表示了相机坐标系…...

编程日记 2025/8/28 9:44:58

Spring Cloud Alibaba学习 5- Seata入门使用

Spring Cloud Alibaba学习 5- Seata入门使用 Seata是Spring Cloud Alibaba中用于分布式事务管理的解决方案一. Seata的基本概念 1. Seata的三大角色 1> TC (Transaction Coordinator) - 事务协调者维护全局和分支事务的状态，驱动全局事务提交或回滚。TC作…...

编程日记 2025/8/28 9:45:36

Select 下拉菜单选项分组

使用<select>元素创建下拉菜单，并使用 <optgroup> 元素对选项进行分组。<optgroup> 元素允许你将相关的 <option> 元素分组在一起，并为每个分组添加一个标签。 <form action"#" method"post"><la…...

编程日记 2025/8/28 9:44:59

【无人机与无人车协同避障】

无人机与无人车协同避障的关键在于点云数据的采集、传输、解析及实时应用，以下是技术实现的分步解析： 1. 点云数据采集（无人机端） 传感器选择： LiDAR：通过激光雷达获取高精度3D点云（精度达厘米…...

编程日记 2025/8/27 18:54:54

AI视频领域的DeepSeek—阿里万相2.1图生视频

让我们一同深入探索万相 2.1 ，本文不仅介绍其文生图和文生视频的使用秘籍，还将手把手教你如何利用它实现图生视频。如下为生成的视频效果（我录制的GIF动图） 如下为输入的图片目录 1.阿里巴巴全面开源旗下视频生成模型万相2.1模…...

编程日记 2025/8/28 9:46:07

飞机大战lua迷你世界脚本

-- 迷你世界飞机大战 v1.2 -- 星空露珠工作室制作 -- 最后更新：2024年1月 ----------------------------- -- 迷你世界API适配配置 ----------------------------- local UI { BASE_ID 7477478487091949474-22856, -- UI界面ID ELEMENTS { BG 1, -- 背景 BTN_LE…...

编程日记 2025/8/28 9:45:35

Android15请求动态申请存储权限完整示例

效果： 1.修改AndroidManifest.xml增加如下内容: <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-perm...

编程日记 2025/8/28 9:43:22

Java 导出大数据到 Excel 表格

背景之前的项目一直是用XSSFWorkbook来做 Excel 导出，在遇到大数据导出时，经常会遇到 OOM。在 Apache Poi 3.8 之后的版本提供的 SXSSFWorkbook 可以优雅的解决这个问题。原理 SXSSFWorkbook 被称为流式 API，主要是因为它采用了流式写入…...

编程日记 2025/8/28 9:49:36

GCC RISCV 后端 -- GCC Passes 注释

在前面文章提到，当GCC 前端完成对C源代码解析完成后，就会使用处理过程（Passes）机制，通过一系列的处理过程，将 GENERIC IR 表示的C程序转步转换成目标机器的汇编语言。过程描述如下图所示： 此…...

编程日记 2025/8/28 9:40:42

稚晖君级硬核：智元公司开源机器人通信框架AimRT入驻GitCode平台

在科技的浪潮中，机器人技术正以前所未有的速度发展。它们不再只是科幻小说中的概念，而是逐渐融入到我们的日常生活中，从工厂的自动化生产线到家庭的智能助手，机器人的身影无处不在。然而，随着机器人应用的日益复杂&…...

编程日记 2025/8/28 4:16:04

STM32L051系列单片机低功耗应用

STM32L051单片机支持多种低功耗模式，包括 Sleep（睡眠）、Stop（停止） 和 Standby（待机） 模式。不同模式的功耗和唤醒方式不同。一、低功耗相关介绍 1.1 低功耗模式概览模式功耗唤醒源时钟状态…...

编程日记 2025/8/27 22:55:55

【代码分享】基于IRM和RRT*的无人机路径规划方法详解与Matlab实现

基于IRM和RRT*的无人机路径规划方法详解与Matlab实现 1. IRM与RRT*的概述及优势 IRM（Influence Region Map）通过建模障碍物的影响区域，量化环境中的安全风险，为RRT算法提供启发式引导。RRT（Rapidly-exploring Random…...

编程日记 2025/8/28 9:44:58

【JAVA架构师成长之路】【JVM实战】第1集：生产环境CPU飙高排查实战

课程标题：生产环境CPU飙高排查实战——从现象到根因的15分钟攻防战目标：掌握CPU飙高问题的系统性排查方法，熟练使用工具定位代码或资源瓶颈 0-1分钟：问题引入与核心影响线上服务器CPU突然飙升至90%以上，导致服务响应延迟激增，用户投诉激增。CPU飙高可能由死循环、线程…...

编程日记 2025/8/28 9:47:39

android edittext 防止输入多个小数点或负号

有些英文系统的输入法，或者定制输入法。使用xml限制不了输入多个小数点和多个负号。所以代码来控制。一、通过XML设置限制 <EditTextandroid:id="@+id/editTextNumber"android:layout_width="wrap_content"android:layout_height="wrap_conten…...

编程日记 2025/8/28 9:48:23

Spring MVC 页面重定向返回后通过nginx代理丢失端口号问题处理

Spring MVC页面重定向通过Nginx代理后出现端口丢失问题，通常由以下原因及解决方案构成： #‌# 一、Nginx配置问题（核心原因）‌ ‌1. Host头传递不完整‌ Nginx默认未将原始请求的端口信息传递给后端，导致应用生成重定向…...

编程日记 2025/8/27 15:31:01

DeepSeek V3 源码：从入门到放弃！

从入门到放弃花了几天时间，看懂了DeepSeek V3 源码的逻辑。源码的逻辑是不难的，但为什么模型结构需要这样设计，为什么参数需要这样设置呢？知其然，但不知其所以然。除了模型结构以外，模型的训练数据、训练…...

编程日记 2025/8/28 9:45:36

基于国产芯片的AI引擎技术，打造更安全的算力生态 | 京东零售技术实践

近年来，随着国产AI芯片的日益崛起，基于国产AI芯片的模型适配、性能优化以及应用落地是国产AI应用的一道重要关卡。如何在复杂的京东零售业务场景下更好地使用国产AI芯片，并保障算力安全，是目前亟需解决的问题。对此，京…...

编程日记 2025/8/28 9:45:34

LINUX网络基础 [一] - 初识网络，理解网络协议

目录前言一. 计算机网络背景 1.1 发展历程 1.1.1 独立模式 1.1.2 网络互联 1.1.3 局域网LAN 1.1.4 广域网WAN 1.2 总结二. "协议" 2.1 什么是协议 2.2 网络协议的理解 2.3 网络协议的分层结构三. OSI七层模型（理论标准） …...

编程日记 2025/8/28 9:43:24

Linux 开发工具

linux中，常见的软件安装方式---下载 yum/apt.rpm安装包安装源码安装 yum 查看软件包通过yumlist命令可以罗列出当前⼀共有哪些软件包.由于包的数⽬可能⾮常之多,这⾥我们需要使⽤ grep 命令只筛选出我们关注的包.例如: # Centos $ yum list | grep lrzsz lr…...

编程日记 2025/8/28 4:26:08

SpringBoot 全局异常处理

文章目录异常处理全局异常处理（推荐）局部异常处理高级技巧设置返回状态码处理404异常异常处理全局异常处理（推荐）创建一个全局异常处理类，使用 @RestControllerAdvice 注解标记。在方法上使用 @ExceptionHandler 声明当前方法可处理的异常类型。当系统发生异常时，…...

编程日记 2025/8/24 16:02:52

EA - 开源工程的编译

文章目录 EA - 开源工程的编译概述笔记环境备注x86版本EABase_x86EAAssert_x86EAThread_x86修改 eathread_atomic_standalone_msvc.h原始修改后 EAStdC_x86EASTL_x86EAMain_x86EATest_x86备注备注END EA - 开源工程的编译概述 EA开源了‘命令与征服’的游戏源码尝试编译. 首…...

编程日记 2025/8/27 14:02:38

springboot3 WebClient

1 介绍在 Spring 5 之前，如果我们想要调用其他系统提供的 HTTP 服务，通常可以使用 Spring 提供的 RestTemplate 来访问，不过由于 RestTemplate 是 Spring 3 中引入的同步阻塞式 HTTP 客户端，因此存在一定性能瓶颈。根据 Spring 官…...

编程日记 2025/8/27 22:27:38

【Python项目】基于深度学习的车辆特征分析系统

【Python项目】基于深度学习的车辆特征分析系统技术简介：采用Python技术、MySQL数据库、卷积神经网络（CNN）等实现。系统简介：该系统基于深度学习技术，特别是卷积神经网络（CNN），用…...

编程日记 2025/8/24 6:20:50

爬虫不“刑”教程

在大数据时代，信息的获取至关重要，而网络爬虫正是帮助我们从互联网上获取海量数据的重要工具。无论是数据分析、人工智能训练数据，还是商业情报收集，爬虫技术都能发挥重要作用。本篇文章将全面解析 Python 爬虫的各个方面&#xf…...

编程日记 2025/8/25 10:25:02

深入解析 supervision 库：功能、用法与应用案例

1. 引言在计算机视觉任务中，数据的后处理和可视化是至关重要的环节，尤其是在目标检测、分割、跟踪等任务中。supervision 是一个专门为这些任务提供高效数据处理和可视化支持的 Python 库。本文将深入介绍 supervision 的功能、使用方法，并…...

编程日记 2025/8/27 10:12:47

【橘子golang】从golang来谈闭包

一、简介闭包（Closure）是一种编程概念，它允许函数捕获并记住其创建时的上下文环境（包括变量）。闭包通常用于函数式编程语言，但在许多现代编程语言中也有支持，包括 Go ，Js等支持函数…...

编程日记 2025/8/25 0:51:26

盛铂科技PDROUxxxx系列锁相介质振荡器(点频源）：高精度信号源

——超低相位噪声、宽频覆盖、灵活集成，赋能下一代射频系统核心价值：以突破性技术解决行业痛点在雷达、卫星通信、高速数据采集等高端射频系统中，信号源的相位噪声、频率稳定度及集成灵活性直接决定系统性能上限。盛铂科技PDROUxxxx系列锁…...

编程日记 2025/8/24 16:49:35

Linux | Vim 鼠标不能右键粘贴、跨系统复制粘贴

注：本文为 “ Vim 中鼠标右键粘贴、跨系统复制粘贴问题解决方案” 相关文章合辑。未整理去重。 Linux 入门：vim 鼠标不能右键粘贴、跨系统复制粘贴 foryouslgme 发布时间 2016 - 09 - 28 10:24:16 Vim 基础命令模式（command - mode&…...

编程日记 2025/8/23 15:27:19

仿12306项目（4）

基本预定车票功能的开发对于乘客购票来说，需要有每一个车次的余票信息，展示给乘客，供乘客选择，因此首个功能是余票的初始化，之后是余票查询，这两个都是控台端。对于会员端的购票，需要有余票查询…...

编程日记 2025/8/23 16:22:22

调研：如何实现智能分析助手（Agent）（AutoCoder、FastGPT、AutoGen、DataCopilot）

文章目录调研：如何实现智能分析助手（Agent）（AutoCoder、FastGPT、AutoGen、DataCopilot）一、交互流程二、数据流程三、架构分类四、开源产品4.1 AutoCoder（知识库变体）4.2 FastGPT（…...

编程日记 2025/8/22 2:38:50

爬虫逆向：脱壳工具Youpk的使用详解

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录 1. Youpk 简介1.1 Youpk介绍1.2 Youpk支持场景1.3 Youpk基本流程1.4 使用 Youpk 脱壳步骤1.5 常用的脱壳工具对比2. Youpk 的安装与使用2.1 安装 Youpk2.2 使用 Youpk 脱壳3. 脱壳后的 Dex 文件分析3.1 使用 JADX 反编译…...

编程日记 2025/8/27 17:59:43

Java 大视界 -- Java 大数据在智能政务公共服务资源优化配置中的应用（118）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/8/27 13:20:07

Java停车平台高并发抢锁技术方案设计 - 慧停宝开源停车管理平台

Java停车平台高并发抢锁技术方案设计一、业务场景特征瞬时流量峰值早晚高峰时段（07:30-09:00, 17:30-19:00）请求量激增10倍热门商圈停车场每秒并发请求可达5000 QPS 资源竞争特性单个车位被多人同时抢占（超卖风险）用户操作链…...

编程日记 2025/8/26 5:00:18

【论文笔记】Attentive Eraser

标题：Attentive Eraser: Unleashing Diffusion Model’s Object Removal Potential via Self-Attention Redirection Guidance Source：https://arxiv.org/pdf/2412.12974 收录：AAAI 25 作者单位：浙工商，字节&#…...

编程日记 2025/8/24 20:06:55

Android Flow操作符分类

Flow操作符分类...

编程日记 2025/8/16 12:55:21

Cursor + IDEA 双开极速交互

相信很多开发者朋友应该和我一样吧，都是Cursor和IDEA双开的开发模式:在Cursor中快速编写和生成代码，然后在IDEA中进行调试和优化在这个双开模式的开发过程中，我就遇到一个说大不大说小不小的问题： 得在两个编辑器之间来回切换查…...

编程日记 2025/8/26 12:01:11

图像识别-手写数字识别项目

训练模型： 实现神经网络实例准备数据导入torchvision.transforms模块，它提供了许多常用的数据预处理操作，如裁剪、旋转、归一化等。从torch.utils.data模块导入DataLoader类，用于加载数据集并提供批量处理功能。导入tensorboa…...

编程日记 2025/8/26 1:12:44

bert模型笔记

1.各预训练模型说明 BERT模型在英文数据集上提供了两种大小的模型，Base和Large。Uncased是意味着输入的词都会转变成小写，cased是意味着输入的词会保存其大写（在命名实体识别等项目上需要）。Multilingual是支持多语言的&#xff0…...

编程日记 2025/8/26 10:18:32

利用 ArcGIS Pro 快速统计省域各市道路长度的实操指南

在地理信息分析与处理的工作中，ArcGIS Pro 是一款功能强大的 GIS 软件，它能够帮助我们高效地完成各种复杂的空间数据分析任务。现在，就让我们一起深入学习如何借助 ArcGIS Pro 来统计省下面各市的道路长度，这一技能在城市规划、…...

编程日记 2025/8/23 20:38:02

数据库系统概论（一）详细介绍数据库与基本概念

数据库系统概论（一）介绍数据库与基本概念前言一、什么数据库1.数据库的基本概念2.数据库的特点二、数据库的基本概念1. 数据2. 数据库3.数据库管理系统4.数据库系统三、数据管理技术的产生和发展四、数据库系统的特点1.数据结构化2.数据共享性3.数据冗…...

编程日记 2025/8/25 8:32:41

基于websocket搭建聊天室

1.后端配置

2.前端

相关文章：