基于Sping Boot集成的websocket实现聊天室

2024-04-30 08:28

本文主要是介绍基于Sping Boot集成的websocket实现聊天室,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Spring Boot整合WebSocket实现聊天室

Spring Boot 提供了 Websocket 组件 spring-boot-starter-websocket,用来支持在 Spring Boot环境下对Websocket 的使用。

下面我们就以多人在线聊天室为例,演示 Spring Boot 是如何整合Websocket 实现服务端消息推送的。

创建前端页面

首先,创建spring boot项目:spring-boot-starter-websocket。接下来,我们构建前台交互页面,创建index.html页面并在 js 中实现WebSocket通讯,完整页面代码如下所示:

代码语言:javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Chat Room</title><script type="text/javascript">var urlPrefix ='ws://localhost:8080/chat/';var ws = null;// 加入function join() {var username = document.getElementById('uid').value;var url = urlPrefix + username;ws = new WebSocket(url);ws.onmessage = function(event){var ta = document.getElementById('responseText');ta.value += event.data+"\r\n";};ws.onopen = function(event){var ta = document.getElementById('responseText');ta.value += "建立 websocket 连接... \r\n";};ws.onclose = function(event){var ta = document.getElementById('responseText');ta.value += "用户["+username+"] 已经离开聊天室! \r\n";ta.value += "关闭 websocket 连接. \r\n";};}// 退出function exit(){if(ws) {ws.close();}}// 发送消息function send(){var message = document.getElementById('message').value;if(!window.WebSocket){return;}if(ws.readyState == WebSocket.OPEN){ws.send(message);}else{alert("WebSocket 连接没有建立成功!");}}
</script>
</head>
<body>
<form onSubmit="return false;"><h3>BBS聊天室</h3><textarea id="responseText" style="width: 1024px;height: 300px;"></textarea><br/><br /><label>昵称 : </label><input type="text" id="uid" /> &nbsp;<input type="button" value="加入聊天室" onClick="join()" /> &nbsp;<input type="button" value="离开聊天室" onClick="exit()" /><br /><br /><label>消息 : </label><input type="text" id="message" /> &nbsp; <input type="button" value="发送消息" onClick="send()" />
</form>
</body>
</html>

上面的示例中,js中定义了WebSocket通讯相关的代码,如:ws.onopen、ws.onmessage、ws.onclose等事件。

创建后端服务

接下来,我们开始创建后台WebSocket服务,实现WebSocket后台通讯服务。

引入相关依赖

首先,修改项目的pom.xml文件,主要添加 Web 和 Websocket 组件。具体代码如下所示:

代码语言:javascript

<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><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>
消息接收

首先创建ChatServerEndpoint类,并使用@ServerEndpoint注解创建WebSocket EndPoint实现客户端连接、消息的接收、等事件。具体示例代码如下所示:

代码语言:javascript

@RestController
@ServerEndpoint("/chat/{username}")
public class ChatServerEndpoint {private static final Logger logger = LoggerFactory.getLogger(ChatRoomServerEndpoint.class);@OnOpenpublic void openSession(@PathParam("username") String username, Session session) {ONLINE_USER_SESSIONS.put(username, session);String message = "欢迎用户[" + username + "] 来到聊天室!";logger.info("用户登录:"+message);sendMessageAll(message);}@OnMessagepublic void onMessage(@PathParam("username") String username, String message) {logger.info("发送消息:"+message);sendMessageAll("用户[" + username + "] : " + message);}@OnClosepublic void onClose(@PathParam("username") String username, Session session) {//当前的Session 移除ONLINE_USER_SESSIONS.remove(username);//并且通知其他人当前用户已经离开聊天室了sendMessageAll("用户[" + username + "] 已经离开聊天室了!");try {session.close();} catch (IOException e) {logger.error("onClose error",e);}}@OnErrorpublic void onError(Session session, Throwable throwable) {try {session.close();} catch (IOException e) {logger.error("onError excepiton",e);}logger.info("Throwable msg "+throwable.getMessage());}
}

上面的示例中,我们使用 @ServerEndpoint("/chat/{username}") 注解监听此地址的 WebSocket 信息,客户端也是通过此地址向服务端接收和发送消息。同时使用@OnOpen注解实现客户端连接事件,@OnMessage注解实现消息发送事件,@OnClose注解实现客户端连接关闭事件,@OnError注解实现消息错误事件。

消息发送

我们先创建一个 WebSocketUtils 工具类,用来存储聊天室在线的用户信息,以及向客户端发送消息的功能。具体代码如下所示:

代码语言:javascript

public final class WebSocketUtils {private static final Logger logger = LoggerFactory.getLogger(WebSocketUtils.class);// 存储 websocket sessionpublic static final Map<String, Session> ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();/*** @param session 用户 session* @param message 发送内容*/public static void sendMessage(Session session, String message) {if (session == null) {return;}final RemoteEndpoint.Basic basic = session.getBasicRemote();if (basic == null) {return;}try {basic.sendText(message);} catch (IOException e) {logger.error("sendMessage IOException ",e);}}/*** 推送消息到其他客户端* @param message*/public static void sendMessageAll(String message) {ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));}
}
开启 WebSocket 功能

修改项目启动类,需要添加 @EnableWebSocket 开启 WebSocket 功能。具体示例代码如下所示:

代码语言:javascript

@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {public static void main(String[] args) {SpringApplication.run(WebSocketApplication.class, args);}@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

以上,我们WebSocket服务端内容就实现完毕了。接下来我们验证整个聊天室功能是否正常?

验证测试

前面,我们已经把整个WebSocket聊天室的前后台功能介绍完了。接下来我们验证整个聊天室功能是否正常?

首先,启动项目,在浏览器中分别输入地址:http://localhost:8080/ 打开三个聊天室页面。如下图所示:

然后,分别在三个聊天室页面中,输入三个昵称并加入聊天室,与服务端成功建立WebSocket连接,即可在聊天室发送消息。

点击页面上的离开聊天室,此页面与服务端建立的WebSocket连接就会断开。其他连接不受影响。

                               感谢大家的阅读,觉得有所帮助的朋友点点赞。 

这篇关于基于Sping Boot集成的websocket实现聊天室的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/948361

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络