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

SpringBoot整合WebSocket实现聊天室

news 2025/8/30 1:34:32

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

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

llama-factory学习个人记录

框架、模型、数据集准备 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播放器&#xff08;全称VideoLAN Client&#xff09;是一款开源的多媒体播放器&#xff0c;由VideoLAN项目团队开发。它支持多种音视频格式&#xff0c;并能够在多种操作系统上运行&#xff0c;如Windows、Mac OS X、Linux、Android和iOS等。VLC播放器具备播放文件…...

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

跟小伙伴们说一下

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

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

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

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

编程日记 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服务端&#xff0c;实现和客户端的交互通信&#xff0c;客户端基于JavaScript实现。 在【WebSocket简介-CSDN博客】中&#xff0c;我们知道WebSocket是基于Http协议的升级&#xff0c;而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等技术实现豆瓣电影数据获取及可视化分析展示&#xff0c;觉得有用的朋友可以来个一键三连&#xff0c;感谢&#xff01;&#xff01;&#xff01; 项目演示 【开源】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系统编程】进程概念、进程排队、进程标识符、进程状态

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

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

Java与GO语言对比分析

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

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

Linux文件系统原理

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

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

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

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

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

攻防世界[GoodRe]

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

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

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

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

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

SpringBoot + Mybatis-Plus中乐观锁实现

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

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

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

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨IT界的两大巨头交锋✨ &#x1f44b; 在IT界的广阔天地中&#xff0c;有两座…...

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

转行一年了

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

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

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

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

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/8/29 16:31:35

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/8/29 9:06:29

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/8/8 2:13:29

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/8/27 22:59:00

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/6/20 15:59:42

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/8/22 3:24:23

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/8/28 1:04:01

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/8/29 9:50:32

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/8/27 0:22:30