下列关于网站开发中网页额,提供手机自适应网站公司,公众号小程序制作流程,少儿编程加盟哪个品牌好前言
在现代Web应用程序中#xff0c;实时性和即时通信变得越来越重要。传统的HTTP请求-响应模式无法满足实时数据传输和双向通信的需求。随着技术的发展#xff0c;WebSocket成为了一种强大而灵活的解决方案。 WebSocket是HTML5提供的一种新的通信协议#xff0c;它通过一…前言
在现代Web应用程序中实时性和即时通信变得越来越重要。传统的HTTP请求-响应模式无法满足实时数据传输和双向通信的需求。随着技术的发展WebSocket成为了一种强大而灵活的解决方案。 WebSocket是HTML5提供的一种新的通信协议它通过一个持久化的、双向的连接在客户端和服务器之间实现了实时的数据传输和双向通信。相比传统的HTTP请求-响应模式WebSocket能够提供更低的延迟、更高的效率和更好的用户体验。 本文是“WebSocket 教程”系列的第三篇将介绍如何将WebSocket与SpringMVC框架整合起来以实现基于WebSocket的实时通信功能。我们将使用SpringMVC作为Web应用程序的基础框架利用其强大的功能和易用的开发模式结合WebSocket的优势构建一个实时通信的应用程序。 一、WebSocket和SpringMVC的基本概念和原理
WebSocket是HTML5提供的一种通信协议它允许在客户端和服务器之间建立一个持久化的、双向的连接实现实时的数据传输和双向通信。相比传统的HTTP请求-响应模式WebSocket具有以下特点 双向通信WebSocket允许客户端和服务器之间进行双向通信而不仅仅是单向的请求-响应模式。这意味着服务器可以主动发送消息给客户端而不需要客户端发起请求。 持久连接一旦WebSocket连接建立成功它将保持持久性的连接状态不像HTTP请求-响应模式那样需要在每次请求后关闭连接。这样可以减少因频繁建立和关闭连接而产生的额外开销。 低延迟由于WebSocket使用了长连接数据传输的延迟相对较低。这使得实时性要求高的应用场景如聊天应用、股票行情等能够更好地满足用户的需求。 SpringMVC是一个基于Java的开源MVCModel-View-Controller框架用于构建Web应用程序。它提供了强大的功能和灵活的开发模式使得开发者可以轻松构建可扩展、可维护的Web应用程序。在整合WebSocket时SpringMVC提供了对WebSocket的支持简化了WebSocket的使用和管理。
SpringMVC框架中与WebSocket相关的几个核心概念包括 WebSocketHandlerWebSocketHandler是一个处理WebSocket连接和消息的接口开发者需要实现该接口来处理不同类型的WebSocket消息。 WebSocketSessionWebSocketSession代表一个WebSocket连接它提供了一些方法来发送消息、关闭连接等操作。 WebSocketConfigurerWebSocketConfigurer是一个配置接口用于配置WebSocket相关的参数和处理器。 EnableWebSocketEnableWebSocket注解用于启用WebSocket支持将WebSocketConfigurer实例注册到SpringMVC的配置中。 通过使用SpringMVC提供的WebSocket支持我们可以更方便地使用WebSocket并且与SpringMVC的其他功能进行无缝整合。这使得开发者能够更加高效地构建实时通信的Web应用程 二、前期准备
1、新建项目结构如下 2、导入依赖
!-- websocket 依赖 --dependencygroupIdjavax.websocket/groupIdartifactIdjavax.websocket-api/artifactIdversion1.1/versionscopeprovided/scope/dependency!-- 打印日志 --dependencygroupIdch.qos.logback/groupIdartifactIdlogback-classic/artifactIdversion1.3.8/version/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion1.18.24/version/dependency!-- ch03 --dependencygroupIdorg.springframework/groupIdartifactIdspring-webmvc/artifactIdversion5.3.23/version/dependency!-- 在 spring 4.0 开始支持--dependencygroupIdorg.springframework/groupIdartifactIdspring-websocket/artifactIdversion5.3.23/version/dependency 这些依赖项在Spring MVC项目中具有以下用途 javax.websocket-api这个依赖项提供了WebSocket API的规范包括用于创建和管理WebSocket连接的接口和类。它是WebSocket开发的基本依赖项。 logback-classic这是Logback日志框架的经典模块用于记录应用程序的日志。它可以在开发过程中帮助调试和跟踪问题。 lombokLombok是一个Java库通过注解的方式简化了Java代码的编写。它提供了各种实用的注解如Data、Getter、Setter等可以减少样板代码的编写。 spring-webmvc这是Spring MVC框架的核心模块提供了处理Web请求的基本功能包括控制器、视图解析器、数据绑定等。 spring-websocket这是Spring框架提供的WebSocket支持模块。它为Spring MVC应用程序启用了WebSocket功能包括配置和管理WebSocket连接、处理WebSocket消息等。 以上是这些依赖项的常见用途。通过添加这些依赖项您可以在Spring MVC项目中使用WebSocket并处理来自客户端的实时消息。
三、在SpringMVC中配置和启用WebSocket支持 1、WebSocket 配置类 Configuration
// 启用 WebSocket 支持
EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {/*** 装配服务端* return*/Beanpublic WebSocketHandler webSocketHandler(){return new ChatServer();}/*** 装配 HttpSession 的拦截器这样就可以在握手阶段* 获取 HttpSession 的内容,在使用 WebSocketSession 时* 就能直接得到 HttpSession 的数据* return*/Beanpublic HandshakeInterceptor handshakeInterceptor(){return new HttpSessionHandshakeInterceptor();}/*** 给服务端注册请求的端点映射连接地址* param registry*/Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 给 CharServer 设置连接的 urlregistry.addHandler(webSocketHandler(), /connect)// 设置握手拦截器.addInterceptors(handshakeInterceptor());}
}WebSocket的配置类用于启用WebSocket支持并配置WebSocket相关的参数。 首先我们使用Configuration注解将该类标记为配置类。 然后我们使用EnableWebSocket注解启用WebSocket支持。 接下来我们实现WebSocketConfigurer接口并实现其中的方法。 在registerWebSocketHandlers()方法中我们通过registry.addHandler()方法注册一个WebSocket处理器ChatServer并指定连接的URL为/connect。同时我们通过addInterceptors()方法添加一个握手拦截器HttpSessionHandshakeInterceptor这样就可以在握手阶段获取HttpSession的内容。 最后我们使用Bean注解分别装配了ChatServer和HttpSessionHandshakeInterceptor的实例并将其返回。 2、MvcConfig 配置类
Configuration
EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {configurer.enable();}
} MVC的配置类用于启用Spring MVC并配置默认的Servlet处理。 首先我们使用Configuration注解将该类标记为配置类。 然后我们使用EnableWebMvc注解启用Spring MVC支持。 接下来我们实现了WebMvcConfigurer接口并重写了其中的configureDefaultServletHandling()方法。 在configureDefaultServletHandling()方法中我们通过调用configurer.enable()方法启用默认的Servlet处理。这意味着将会使用Servlet容器提供的默认Servlet来处理静态资源而不是通过DispatcherServlet来处理。 通常情况下Spring MVC会使用DispatcherServlet作为前端控制器负责处理所有的请求和响应。但有时候我们可能希望使用Servlet容器提供的默认Servlet来处理一些静态资源例如图片、样式表和JavaScript文件等。通过调用configurer.enable()方法我们可以启用默认的Servlet处理来处理这些静态资源。 3、AppConfig 配置类
Configuration
ComponentScan(basePackages edu.nf.ch03)
Import({MvcConfig.class,WebSocketConfig.class})
public class AppConfig {
}首先我们使用Configuration注解将该类标记为配置类。 然后我们使用ComponentScan注解指定要扫描的基础包路径为edu.nf.ch03。这意味着Spring将会自动扫描该包及其子包下的所有组件例如控制器、服务类、存储库等并进行相应的装配和管理。 接下来我们使用Import注解导入了两个配置类MvcConfig和WebSocketConfig。通过将其他配置类导入到当前配置类中可以实现不同配置之间的组合和共享。 最后我们定义了一个AppConfig类作为整个应用的配置入口点。 4、WebConfig 配置类
public class WebConfig extends AbstractAnnotationConfigDispatcherServletInitializer {Overrideprotected Class?[] getRootConfigClasses() {return new Class[0];}Overrideprotected Class?[] getServletConfigClasses() {return new Class[]{AppConfig.class};}Overrideprotected String[] getServletMappings() {return new String[]{/};}
}这段代码是一个Web应用的配置类用于初始化DispatcherServlet并指定配置类和URL映射。 首先我们定义了一个名为WebConfig的类并继承自AbstractAnnotationConfigDispatcherServletInitializer类。这是Spring提供的一个方便的初始化器类用于在Java配置中使用注解配置DispatcherServlet。 然后我们重写了getRootConfigClasses()方法返回一个空数组。这意味着我们不需要在根应用上下文中加载其他的配置类因为我们已经在getServletConfigClasses()方法中指定了要加载的配置类。 接下来我们重写了getServletConfigClasses()方法返回一个包含AppConfig.class的数组。这样就指定了要在DispatcherServlet的应用上下文中加载的配置类即AppConfig。 最后我们重写了getServletMappings()方法返回一个包含/的字符串数组。这样就指定了DispatcherServlet的URL映射为根路径/表示所有请求都会被DispatcherServlet处理。 四、实现登录
1、新建 controller 实现登录 Controller
public class UserController {/*** 简单的用户登录* param userName* param session* return*/PostMapping(/user/login)public String login(String userName, HttpSession session){// 将用户信息保存到会话作用域session.setAttribute(user,userName);// 重定向到聊天的首页return redirect:/static/chat.html;}}这是一个基于Spring MVC的控制器类用于处理用户登录请求。该类包含了一个login方法该方法通过PostMapping注解将请求映射到/user/login路径。
参数说明
userName表示用户输入的用户名。session表示HttpSession对象用于保存用户信息。
方法逻辑
将用户信息保存到会话作用域中使用session.setAttribute(user, userName)其中user是属性名userName是属性值。通过返回redirect:/static/chat.html实现重定向到聊天首页。
总结该login方法实现了用户登录的逻辑并将用户信息保存到会话中然后重定向到聊天首页。在实际应用中需要进一步处理用户登录的验证、错误处理等逻辑。 2、新建一个登录页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1用户登录/h1
form namef1 methodpost action../user/login
Name:input typetext nameuserName/
input typesubmit value登录
/form
/body
/html
该页面包含了以下元素 formHTML表单用于向服务器端发送请求。 namef1表单的名称用于JavaScript访问。methodpost使用POST方法提交请求。action../user/login指定表单提交的目标地址即UserController类中的login方法的映射路径。input typetext nameuserName/用于输入用户名的文本框。 typetext指定输入框的类型为文本框。nameuserName指定输入框的名称用于后台获取用户输入的用户名。input typesubmit value登录用于提交表单的按钮。 typesubmit指定按钮的类型为提交按钮。value登录指定按钮上的文本为“登录”。 五、实现服务端发送信息
1、新建一个消息对象 Message Data
AllArgsConstructor
NoArgsConstructor
public class Message {private String fromUser;private String sendTime;private String content;}2、实现服务端聊天 public class ChatServer extends TextWebSocketHandler {/*** 用户列表* 每一个用户连接时都会创建一个 WebSocket 对象*/private static final MapString, WebSocketSession users new HashMap();/*** 客户端建立连接后执行的方法等效于 onOpen 方法* param session* throws Exception*/Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {// 获取登录的用户信息String userName (String) session.getAttributes().get(user);// 保存到用户列表users.put(userName,session);}/*** 接受客户端的消息等效于 onMessage 方法* param session* param message* throws Exception*/Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {// 获取消息载体也就是客户端发送的文本内容String msgContent message.getPayload();// 获取发送人String fromUser (String) session.getAttributes().get(user);// 发送时间String sendTime new SimpleDateFormat(hh:mm).format(new Date());// 封装消息对象Message msg new Message(fromUser,sendTime,msgContent);// 序列化为 JSON 字符串String json new ObjectMapper().writeValueAsString(msg);// 群发给所有人for( String userName : users.keySet()){WebSocketSession s users.get(userName);// 发送消息,必须是一个 TextMessage 的对象s.sendMessage(new TextMessage(json));}}/*** 连接关闭后执行的方法* param session* param status* throws Exception*/Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {String userName (String) session.getAttributes().get(user);// 将用户移除在线列表users.remove(userName);}
}这是一个简单的聊天服务器的示例代码使用WebSocket来实现客户端之间的即时通信。让我们逐行解析这段代码的功能和实现细节 MapString, WebSocketSession users用于保存用户列表每个用户连接时都会创建一个WebSocketSession对象。 afterConnectionEstablished方法在客户端与服务器建立连接后执行的方法。它从WebSocketSession中获取登录的用户信息并将其保存到用户列表中。 handleTextMessage方法接收客户端发送的消息并进行处理。它从WebSocketSession中获取消息内容和发送人信息然后封装成一个Message对象并将其序列化为JSON字符串。接着它通过遍历用户列表将消息发送给所有在线用户。 afterConnectionClosed方法在客户端与服务器断开连接后执行的方法。它从WebSocketSession中获取断开连接的用户信息并将其从用户列表中移除。 以上就是这段代码的主要功能和实现逻辑。需要注意的是这只是一个简单的示例实际的聊天服务器可能还需要处理更多的业务逻辑和异常情况。此外这段代码使用了Spring框架提供的TextWebSocketHandler类你需要确保正确地配置Spring WebSocket相关的依赖和配置文件。
3、新建聊天页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/JQuery文件.txt.js/script
/head
body
h1聊天室/h1
div idmsginput typetext idmessage/input typebutton value发送/br/divscript// 创建 WebSocket 对象var ws new WebSocket(ws://localhost:8080/connect);// 接受服务端的信息ws.onmessage function (event) {// 将消息填充到 div 中let data event.data;// 将 json 字符串 转换为 json 对象data $.parseJSON(data);$(#msg).append(data.fromUser : data.sendTime br);$(#msg).append(data.content br);}$(function () {$(:button).on(click,function () {let msg $(#message).val();// 发送消息ws.send(msg);// 发送完之后清空消息框$(#message).val();})})/script/body
/html
这是一个简单的聊天室的前端代码示例。让我们逐行解析这段代码的功能和实现细节 div idmsg消息显示区域。 input typetext idmessage/文本输入框用于输入发送的消息内容。 input typebutton value发送/br发送按钮。 scriptJavaScript脚本区域。 var ws new WebSocket(ws://localhost:8080/connect);创建WebSocket对象连接到服务器的地址是ws://localhost:8080/connect。 ws.onmessage监听WebSocket对象的onmessage事件当接收到来自服务器的消息时执行相应的操作。 let data event.data;获取接收到的消息数据。 data $.parseJSON(data);将接收到的JSON字符串转换为JSON对象。 $(#msg).append(data.fromUser : data.sendTime br);将发送人和发送时间添加到消息显示区域。 $(#msg).append(data.content br);将消息内容添加到消息显示区域。 $(button).on(click,function () {...})监听发送按钮的点击事件。 let msg $(#message).val();获取文本输入框中的消息内容。 ws.send(msg);通过WebSocket对象发送消息到服务器。 $(#message).val();发送完消息后清空文本输入框。 以上就是这段前端代码的主要功能和实现逻辑。需要注意的是这个示例代码使用了jQuery库来简化DOM操作和事件处理。你需要确保正确地引入jQuery库并根据自己的实际情况修改WebSocket连接地址和其他相关代码。 4、运行效果 六、gitee案例
地址ch03 · qiuqiu/WebSocket-study - 码云 - 开源中国 (gitee.com)
