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

SpringBoot整合WebSocket实现聊天室

news 2026/4/8 21:51:23

1.简单的实现了聊天室功能，注意页面刷新后聊天记录不会保存，后端没有做消息的持久化

2.后端用户的识别只简单使用Session用户的身份

0.依赖

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

1.配置WebSocketConfigurer配置类

package com.example.config;import org.springframework.context.annotation.Configuration;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.HandshakeInterceptor;import javax.servlet.http.HttpSession;
import java.util.Map;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfigurer implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/ws").withSockJS().setInterceptors(new HttpHandshakeInterceptor());}public class HttpHandshakeInterceptor implements HandshakeInterceptor {@Overridepublic boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {if (request instanceof ServletServerHttpRequest) {ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;HttpSession session = servletRequest.getServletRequest().getSession(false);if (session != null) {//使用session中的userString user = (String) session.getAttribute("user");if(user!=null){attributes.put("user", user);}}}return true;}@Overridepublic void afterHandshake(ServerHttpRequest request, ServerHttpResponse response,WebSocketHandler wsHandler, Exception exception) { }}}

2.MessageHandler用于处理接收消息

package com.example.webController;import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;import javax.servlet.http.HttpSession;@Controller
public class MessageHandler {@MessageMapping("/chat")@SendTo("/topic/messages")public String chat(@PathVariable("messages") String message, SimpMessageHeaderAccessor headerAccessor) {// 获取用户数据Object user = headerAccessor.getSessionAttributes().get("user");System.out.println("User: " + user);return user.toString()+":" + message;}//登录@GetMapping("login/{userName}")public void login(@PathVariable String userName, HttpSession session) {System.out.println("User " + userName);session.setAttribute("user", userName);}
}

3.前端页面

先登录后发送消息

4.前端代码

<!DOCTYPE html>
<html>
<head><title>WebSocket Demo</title><script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script><style>#chatBox {width: 60%;margin: auto;height: 500px;border: 1px solid black;padding: 10px;border-radius: 7px;}.chat-message {height: 85%;overflow: auto;}.flex-row, .flex-row-reverse {display: flex;justify-content: space-between;padding: 10px 0;}.message {max-width: 60%;padding: 10px;border-radius: 10px;}.user {background-color: #7986cb;color: white;}.assistant {background-color: #ffe082;}#inputMessage {width: 80%;padding: 10px;border-radius: 10px;border: 1px solid black;margin-top: 10px;}#sendButton {width: 15%;margin-left: 5%;padding: 11px;background-color: #ff7043;color: white;border: none;border-radius: 10px;cursor: pointer;}</style>
</head>
<body>
<div id="chat"><div id="chatBox"><div class="chat-message"><div class="flex-row"><div class="message user"><p>Hello</p></div></div><div class="flex-row-reverse"><div class="message assistant"><p>Hi, How can I help you?</p></div></div></div><input type="text" id="inputMessage" placeholder="Type message.." /><button id="sendButton"  onclick="send()">Send</button></div><input type="text" id="login" placeholder="输入用户名。。。" /><button  onclick="login()">Login</button></div>
<script>var socket = new SockJS('/ws');var stompClient = Stomp.over(socket);stompClient.connect({}, function(frame) {stompClient.subscribe('/topic/messages', function(message) {var div = document.createElement('div');div.className = "flex-row-reverse";var messageDiv = document.createElement('div');messageDiv.className = "message assistant";var p = document.createElement('p');p.textContent = message.body;messageDiv.appendChild(p);div.appendChild(messageDiv);document.querySelector('.chat-message').appendChild(div);});});function login() {var value = document.getElementById('login').value;//发送get请求fetch('/login/' + value)//刷新页面window.location.reload();}function send() {var inputValue = document.getElementById('inputMessage').value;var div = document.createElement('div');div.className = "flex-row";// var messageDiv = document.createElement('div');// messageDiv.className = "message user";// var p = document.createElement('p');// p.textContent = inputValue;// messageDiv.appendChild(p);// div.appendChild(messageDiv);document.querySelector('.chat-message').appendChild(div);stompClient.send("/app/chat", {}, inputValue);document.getElementById('inputMessage').value = '';}
</script>
</body>
</html>

SpringBoot整合WebSocket实现聊天室

1.简单的实现了聊天室功能，注意页面刷新后聊天记录不会保存，后端没有做消息的持久化 2.后端用户的识别只简单使用Session用户的身份 0.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-…...

编程日记 2024/5/27 5:54:25

框架、模型、数据集准备 1.llama-factory部署 # 克隆仓库 git clone https://github.com/hiyouga/LLaMA-Factory.git # 创建虚拟环境 conda create --name llama_factory python3.10 # 激活虚拟环境 conda activate llama_factory # 安装依赖 cd LLaMA-Factory pip install -…...

编程日记 2024/5/27 5:53:24

VLC播放器（全称VideoLAN Client）

一、简介 VLC播放器（全称VideoLAN Client）是一款开源的多媒体播放器，由VideoLAN项目团队开发。它支持多种音视频格式，并能够在多种操作系统上运行，如Windows、Mac OS X、Linux、Android和iOS等。VLC播放器具备播放文件…...

编程日记 2024/5/27 5:52:23

跟小伙伴们说一下

因为很忙，有一段时间没有更新了，这次先把菜鸟教程停更一下，因为自己要查缺补漏一些细节问题，而且为了方便大家0基础也想学C语言，这里打算给大家开一个免费专栏，这里大家就可以好好学习啦，哪怕0基…...

编程日记 2024/5/27 5:51:22

学 C/C++ 具体能干什么？

学习 C 和 C 后，你可以从事许多不同的工作和项目，这两种语言以其高性能和低级控制而闻名，特别适合以下几个领域： 1. 系统编程 C 和 C 是系统编程的首选语言，适用于操作系统、驱动程序和嵌入式系统开发。操作系统开发…...

编程日记 2024/5/27 5:49:20

Django之Ajax实战笔记--城市级联操作

1. 项目架构搭建 1.1 创建项目tpdemo,创建应用myapp # 创建项目框架tpdemo$ django-admin startproject tpdemo$ cd tpdemo# 在项目中创建一个myapp应用$ python manage.py startapp myapp# 创建模板目录$ mkdir templates$ mkdir templates/myapp$ cd ..$ tree tpdemotpdemo…...

编程日记 2024/5/27 5:48:19

基于Netty实现WebSocket服务端

本文基于Netty实现WebSocket服务端，实现和客户端的交互通信，客户端基于JavaScript实现。在【WebSocket简介-CSDN博客】中，我们知道WebSocket是基于Http协议的升级，而Netty提供了Http和WebSocket Frame的编解码器和Handler&#…...

编程日记 2024/5/27 5:47:18

27【Aseprite 作图】盆栽——拆解

1 橘子画法拆解（1）浅色3 1 0；深色0 2 3 就可以构成一个橘子（2）浅色 2 1；深色1 0 （小个橘子）（3）浅色 2 1 0；深色1 2 3 2 树根部分（1）底部画一条横线（2）上一行左空2 右空1 【代表底部重心先在右】（3）再上一行，左空1，右空1 （4）再上一行，左突出1，…...

编程日记 2024/5/27 5:46:17

【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目

项目介绍【开源】项目基于pythonpandasflaskmysql等技术实现豆瓣电影数据获取及可视化分析展示，觉得有用的朋友可以来个一键三连，感谢！！！ 项目演示【开源】2024最新python豆瓣电影数据爬虫可视化分析项目项目截图…...

编程日记 2024/5/27 5:45:15

[JDK工具-5] jinfo jvm配置信息工具

文章目录 1. 介绍2. 打印所有的jvm标志信息 jinfo -flags pid3. 打印指定的jvm参数信息 jinfo -flag InitialHeapSize pid4. 启用或者禁用指定的jvm参数 jinfo -flags [|-]HeapDumpOnOutOfMemoryError pid5. 打印系统参数信息 jinfo -sysprops pid6. 打印以上所有配置信息 jinf…...

编程日记 2024/5/27 5:44:14

【Linux系统编程】进程概念、进程排队、进程标识符、进程状态

目录什么是进程？ 浅谈进程排队简述进程属性进程属性之进程标识符进程操作之进程创建初识fork fork返回值原理角度理解fork fork的应用进程属性之进程状态再谈进程排队进程状态运行状态阻塞状态挂起状态 Linux下的进程状态 “R”(运行状…...

编程日记 2024/5/27 5:43:13

Java与GO语言对比分析

你是不是总听到go与java种种对比，其中在高并发的服务器端应用场景会有人推荐你使用go而不是 java。那我们就从两者运行原理和基本并发设计来对比分析，看看到底怎么回事。运行原理对比 java java 中 jdk 已经帮我们屏蔽操作系统区别。只要我们下载并…...

编程日记 2024/5/27 5:40:10

Linux文件系统原理

Linux文件系统冯诺依曼在1945年提出计算机的五大组成部分运算器：CPU 控制器：CPU 存储器：内存和硬盘输入设备：鼠标、硬盘输出设备：显示器一、硬盘结构机械硬盘结构扇区：硬盘的最小存储单位&#xff…...

编程日记 2024/5/27 5:39:09

初识Spring Cache：如何简化你的缓存处理？

文章目录 1、Spring Cache介绍2、常用注解3、使用案例 1、Spring Cache介绍 Spring Cache 是一个框架，实现了基于注解的缓存功能，只需要简单地加一个注解，就能实现缓存功能。 Spring Cache 提供了一层抽象，底层可以切换不同的…...

编程日记 2024/5/27 5:38:07

攻防世界[GoodRe]

攻防世界[GoodRe] 学到知识： 逆向的精髓：三分懂，七分蒙。TEA 算法快速识别（蒙）： 数据处理的形式：进入加密时的数据和加密结束后的数据，处理时数据的分组等等，都能用来…...

编程日记 2024/5/27 5:35:04

IntelliJ IDEA实用插件：轻松生成时序图和类图

IntelliJ IDEA生成时序图、类图一、SequenceDiagram1.1 插件安装1.2 插件设置1.3 生成时序图二、PlantUML Integration2.1 插件安装2.2 插件设置2.3 生成类图在软件建模课程的学习中，大家学习过多种图形表示方法，这些图形主要用于软件产品设计。在传统…...

编程日记 2024/5/27 5:34:03

SpringBoot + Mybatis-Plus中乐观锁实现

悲观锁悲观锁是一种悲观思想，它认为数据很可能会被别人所修改所以总会对数据进行上锁，读操作和写操作都会上锁，性能较低，使用较少！ 乐观锁乐观锁是一种乐观思想，它认为数据并不一定会被别人所修改所以…...

编程日记 2024/5/27 5:33:02

设计模式深度解析：分布式与中心化，IT界两大巨头“华山论剑”

🌈 个人主页：danci_ 🔥 系列专栏：《设计模式》《MYSQL应用》 💪🏻 制定明确可量化的目标，坚持默默的做事。 ✨IT界的两大巨头交锋✨ 👋 在IT界的广阔天地中，有两座…...

编程日记 2024/5/27 5:30:59

转行一年了

关注、星标公众号，直达精彩内容 ID：技术让梦想更伟大整理：李肖遥来公司一年了。说是转行其实还是在半导体行业，熟悉我的朋友知道 ，我在18年开始进入半导体行业，那个时候想着行业很重要，站对了…...

编程日记 2024/5/27 5:29:58

【LeetCode 151】反转字符串中的单词

1. 题目 2. 分析这题要是用Python写，就非常简单了。 3. 代码 class Solution:def reverseWords(self, s: str) -> str:s " ".join(reversed(s.strip().split()))return s...

编程日记 2024/5/27 5:28:57

基于STM32LXXX的数字电位器（MCP4661-103E/ST）驱动应用程序设计

一、简介： MCP4661-103E/ST 是 Microchip 推出的双通道、8位（256抽头）数字电位器，采用 I2C 接口，阻值为10kΩ，内置 EEPROM 可掉电保存配置。二、主要技术特性：参数值通道数 2 (双通道) 电阻值 10 kΩ 抽头数 257 (8位分辨率，256步进) 接口类型 IC，标准模式100kHz…...

编程新知 2026/4/8 21:39:25

【电商PHP高并发订单处理黄金法则】：20年架构师亲授5大防超卖、零重复、秒级响应的实战方案

第一章：电商PHP高并发订单处理的底层挑战与认知重构在亿级日活的电商场景中，PHP 传统同步阻塞式订单流程在秒杀、大促等峰值时刻频繁遭遇超卖、库存错乱、数据库连接耗尽与事务死锁等问题。这些表象背后，是开发者对 PHP 运行模型、MySQL 事务…...

编程新知 2026/4/8 20:06:23

室内无人机自主定位：融合Mid360激光雷达与光流传感器的无GPS导航实践

1. 室内无人机定位的挑战与解决方案在仓库巡检、隧道勘测等室内场景中，无人机最头疼的问题就是失去GPS信号后的定位难题。传统光流传感器虽然能提供相对运动信息，但在长距离飞行时误差会不断累积；而激光雷达虽然精度高，但单独使用…...

编程新知 2026/4/8 19:21:22

Komikku与追踪器集成：如何实现与MyAnimeList、AniList的自动同步

Komikku与追踪器集成：如何实现与MyAnimeList、AniList的自动同步【免费下载链接】komikku Free and open source manga reader for Android 项目地址: https://gitcode.com/gh_mirrors/ko/komikku Komikku是一款免费开源的Android漫画阅读应用，支…...

编程新知 2026/4/8 19:15:19

cv_unet_image-colorization多阶段Pipeline：先结构修复再色彩填充的两步上色优化方案

cv_unet_image-colorization多阶段Pipeline：先结构修复再色彩填充的两步上色优化方案 1. 项目概述在数字影像修复领域，黑白照片上色一直是一个技术挑战。传统的单阶段上色方案往往直接对黑白图像进行色彩填充，容易产生颜色溢出、边界模糊和…...

编程新知 2026/4/8 18:59:02

AI伦理官：一个正在崛起的新兴职业

在人工智能技术爆发式增长的2026年，AI伦理官已成为科技领域炙手可热的新兴角色。这一职业不仅是技术发展的“道德卫士”，更是连接创新与合规的关键桥梁。随着全球AI芯片出货量突破百亿台，生成式AI深度融入金融、医疗和互联网行业，…...

编程新知 2026/4/8 18:48:59

3个步骤掌握抖音评论数据采集：零基础用户的高效解决方案

3个步骤掌握抖音评论数据采集：零基础用户的高效解决方案【免费下载链接】TikTokCommentScraper 项目地址: https://gitcode.com/gh_mirrors/ti/TikTokCommentScraper 在当今数据驱动的时代，高效获取用户反馈和市场洞察变得至关重要。本文介绍的…...

编程新知 2026/4/8 18:24:39

避开ArduPilot地面无人平台调试大坑：ACRO模式下的转向速率设置详解

ArduPilot无人平台ACRO模式转向调参实战：从参数解析到竞技级手感优化第一次在空地上测试ArduPilot无人车时，我满心期待它能像竞技级RC模型那样做出精准的漂移过弯。但现实是——转向要么迟钝得像在泥沼里打转，要么突然变得过于敏感导致车辆原…...

编程新知 2026/4/8 17:11:13

OSHI 储能系统监控：电池硬件状态管理终极指南 [特殊字符]

OSHI 储能系统监控：电池硬件状态管理终极指南 🚀 【免费下载链接】oshi Native Operating System and Hardware Information 项目地址: https://gitcode.com/gh_mirrors/os/oshi OSHI（Operating System and Hardware Information&…...

编程新知 2026/4/8 13:44:18

探索rot.js地图生成：7种算法打造无限随机地牢

探索rot.js地图生成：7种算法打造无限随机地牢【免费下载链接】rot.js ROguelike Toolkit in JavaScript. Cool dungeon-related stuff, interactive manual, documentation, tests! 项目地址: https://gitcode.com/gh_mirrors/ro/rot.js rot.js是一个功能强…...

编程新知 2026/4/8 13:31:49

SpringBoot整合WebSocket实现聊天室

0.依赖

1.配置WebSocketConfigurer配置类

2.MessageHandler用于处理接收消息

3.前端页面

4.前端代码

相关文章：

SpringBoot整合WebSocket实现聊天室

llama-factory学习个人记录

VLC播放器（全称VideoLAN Client）

跟小伙伴们说一下

学 C/C++ 具体能干什么？

Django之Ajax实战笔记--城市级联操作

基于Netty实现WebSocket服务端

27【Aseprite 作图】盆栽——拆解

【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目

[JDK工具-5] jinfo jvm配置信息工具

【Linux系统编程】进程概念、进程排队、进程标识符、进程状态

Java与GO语言对比分析

Linux文件系统原理

初识Spring Cache：如何简化你的缓存处理？

攻防世界[GoodRe]

IntelliJ IDEA实用插件：轻松生成时序图和类图

SpringBoot + Mybatis-Plus中乐观锁实现

设计模式深度解析：分布式与中心化，IT界两大巨头“华山论剑”

转行一年了

【LeetCode 151】反转字符串中的单词

基于STM32LXXX的数字电位器（MCP4661-103E/ST）驱动应用程序设计

【电商PHP高并发订单处理黄金法则】：20年架构师亲授5大防超卖、零重复、秒级响应的实战方案

室内无人机自主定位：融合Mid360激光雷达与光流传感器的无GPS导航实践

Komikku与追踪器集成：如何实现与MyAnimeList、AniList的自动同步

cv_unet_image-colorization多阶段Pipeline：先结构修复再色彩填充的两步上色优化方案

AI伦理官：一个正在崛起的新兴职业

3个步骤掌握抖音评论数据采集：零基础用户的高效解决方案

避开ArduPilot地面无人平台调试大坑：ACRO模式下的转向速率设置详解

OSHI 储能系统监控：电池硬件状态管理终极指南 [特殊字符]

探索rot.js地图生成：7种算法打造无限随机地牢