53、springboot对websocket的支持有两种方式-------1、基于注解开发 WebSocket ,简洁实现多人聊天界面

基于注解开发 WebSocket

–注解就是: @OnOpen、 @OnClose 、 @OnMessage 、@OnError这些

★ WebSocket的两种开发方式

▲ Spring Boot为WebSocket提供了两种开发方式:

  • 基于spring-boot-starter-websocket.jar开发WebSocket

  • 基于Spring WebFlux开发WebSocket

两种方式对比:
springboot API
在这里插入图片描述

Socket:套接字。
插座。
在通信的两端分别建立虚拟的Socket(插座),网络协议就会负责在两个Socket之间建立虚拟线路。然后通信的两端即可通过该虚拟线路进行实时的、可靠的通信。

WebSocket 就是在服务器与客户端浏览器之间的建立双向通信的Socket。从而保证服务器与客户端浏览器之间可进行实时的双向通信。

▲ 传统Web应用: 请求 - 响应。 这种模型没办法让服务器主动将数据推送客户端的浏览器。 还有比如SSE(服务器事件机制)

★ 基于Spring Boot自动配置来开发WebSocket

两步:

(1)定义一个WebSocket处理类

该处理类有两种开发方式(历史原因造成):第一种方式:   - 直接使用JDK提供的 WebSocket注解 修饰处理方法,并使用 @ServerEndpoint  注解修饰该处理类即可。WebSocket注解就是: @OnOpen、 @OnClose 、 @OnMessage 、@OnError这些——这种方式下方法签名可以随便写,方法参数也可以自行定义,非常灵活。官方也推荐尽量使用第一种方式第二种方式:    - 实现WebSocketHandler接口、并实现该接口中定义的各种处理方法。——Java语法规定,实现接口时,实现的方法必须与接口中定义的方法有相同的方法签名。——这种方式就不够灵活。

(2)配置或导出WebSocket处理类

如果采用注解方式开发WebSocket处理类,
这一步只需要在 Spring容器 中配置一个ServerEndpointExporter Bean  (导出器)即可。
该导出器会负责将容器中所有的@ServerEndpoint注解修饰的处理Bean都导出成WebSocket。
因此无论程序有多少个WebSocket处理Bean,导出器Bean只要配置一个即可。
——非常简单、方便。如果采用是实现接口的方式开发WebSocket处理类,
这一步就需要使用WebSocketConfigurer来配置WebSocket。

代码演示

创建项目
在这里插入图片描述

开发websocket的两步。
在这里插入图片描述

注解:@PathParam()

属于 WebSocket 的,用于获取路径上的参数。
在这里插入图片描述

发送消息的简单解释:
在这里插入图片描述

完整代码:

前端页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> 基于WebSocket的多人聊天 </title><script type="text/javascript">// 定义Web Socket对象var webSocket = null;let sendMsg = function(){if (webSocket == null || webSocket.readyState != 1){document.getElementById('show').innerHTML+= "还未连接服务器,请先连接WebSocket服务器<br>";return;}let inputElement = document.getElementById('msg');// 发送消息webSocket.send(inputElement.value);// 清空单行文本框inputElement.value = "";}let connect = function(){let name = document.getElementById('name').value.trim();if (name == null || name == ""){document.getElementById('show').innerHTML+= "用户名不能为空<br>";return;}if (webSocket && webSocket.readyState == 1){webSocket.close();}webSocket = new WebSocket("ws://127.0.0.1:8080/websocket/" + name);webSocket.onopen = function(){document.getElementById('show').innerHTML+= "恭喜您,连接服务器成功!<br>";document.getElementById('name').value = "";// 为onmessage事件绑定监听器,接收消息webSocket.onmessage= function(event){// 接收、并显示消息document.getElementById('show').innerHTML+= event.data + "<br>";}};}</script>
</head>
<body>
<input type="text" size="20" id="name" name="name"/>
<input type="button" value="连接" onclick="connect();"/>
<div style="width:600px;height:240px;overflow-y:auto;border:1px solid #333;" id="show"></div>
<input type="text" size="80" id="msg" name="msg"/>
<input type="button" value="发送" onclick="sendMsg();"/>
</body>
</html>
MyWebSocketHandler 注解开发各方法
package cn.ljh.app.websocket;import lombok.SneakyThrows;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;//基于注解开发 WebSocket --注解就是: @OnOpen、 @OnClose 、 @OnMessage 、@OnError这些@Component
//这个注解需要指定指定映射地址
@ServerEndpoint("/websocket/{name}")
@Slf4j
public class MyWebSocketHandler
{//可以用注解来修饰不同的处理方法//假设是一个聊天室,map 中的key 是每个用户的 Session , value 是用户的name//创建一个线程安全的map ,用这个map来保存各用户的Session与name之间的对应关系public final static Map<Session,String> myClients = new ConcurrentHashMap<>();//当浏览器 与 Websocket 服务器建立连接的时候触发该方法//这个Session参数代表浏览器 与 WebSocket 服务器所建立连接会话,它用于通信。//这个 @PathParam() 相当于spring mvc 中的 @PathVariable,//都是用来获取路径中的参数--获取这个路径"/websocket/{name}" 中的name参数@OnOpenpublic void onOpen(Session session , @PathParam("name") String name){//当用户登录的时候,把信息存进去myClients.put(session,name);log.debug("--------- onOpen ----------");}//当浏览器与WebSocket服务器 关闭的时候触发该方法@OnClosepublic void onClose(Session session){//当连接关闭的时候,就将该客户端从map中删除myClients.remove(session);log.debug("--------- onClose ----------");}//当 WebSocket服务器 收到 浏览器 发送过来的消息时触发该方法@SneakyThrows@OnMessagepublic String onMessage(Session session, String message){//收到消息,把消息广播给每个客户端      keySet()-->将map中的所有key存到set集合中for (Session client : myClients.keySet()){//此处的 client 就代表每个客户端//向client 发送信息,这个 client 代表了一个浏览器//getBasicRemote() 表示给客户端发送消息是同步的、阻塞的    ,   sendText()  发送消息client.getBasicRemote().sendText(myClients.get(session)+" 说:"+message);}log.debug("--------- onMessage ----------"+message);return null;}//但 WebSocket 服务器 与 浏览器通信出现异常时触发该方法//这个 Throwable 参数就代表了出现的异常@OnErrorpublic void onError(Session session, Throwable ex){//当连接出现异常的时候,将该客户端从 Map 中栅除myClients.remove(session);log.debug("--------- onError ----------");}}
MyWebSocketConfig 配置 WebSocket 导出器
package cn.ljh.app.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** author JH* date 2023/9/7  0007 12:28*/@Configuration
public class MyWebSocketConfig
{/**配置 WebSocket 导出器**   该导出器会负责将容器中所有的 @ServerEndpoint 注解修饰的 处理Bean 都导出成 WebSocket。*  因此无论程序有多少个 WebSocket 处理Bean,导出器Bean 只要配置一个即可。*/@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}
}
application.yml 配置日志级别
#给这个包设置日志级别为debug
logging:level:cn:ljh:app:websocket: debug

测试:

进行websocket连接
在这里插入图片描述

成功基于注解开发WebSocket 的多人聊天室
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/102909.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++(QT)画图行车

通过鼠标在窗口上点击形成多个点的连线&#xff0c;绘制一辆汽车沿着绘制的连线轨迹前进。要求连线点数大于20.可以通过清除按钮清除已经绘制的连线&#xff0c;并可以重新绘制一条轨迹连线。当车辆行驶到轨迹终点时&#xff0c;自动停止。&#xff08;汽车实在可用方块代替&am…

javaee spring aop实现事务 项目结构

spring配置文件 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns:context"http://www.springframewo…

【数据结构】 七大排序详解(贰)——冒泡排序、快速排序、归并排序

文章目录 ⚽冒泡排序⚾算法步骤&#x1f3a8;算法优化&#x1f94e;代码实现&#xff1a;&#x1f3c0;冒泡排序的特性总结 &#x1f9ed;快速排序⚽算法思路&#x1f4cc;思路一&#xff08;Hoare版&#xff09;&#x1f4cc;思路二&#xff08;挖坑法&#xff09;&#x1f4c…

【MySQL系列】MySQL的事务管理的学习(一)_ 事务概念 | 事务操作方式 | 事务隔离级别

「前言」文章内容大致是MySQL事务管理。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、事务概念二、事务的版本支持三、事务提交方式四、事务常见的操作方式4.1 事务正常操作4.2 事务异常验证 五、事务隔离级别5.1 查看与设置隔离性5.2 读未提交&…

c语言实训心得3篇集合

c语言实训心得体会一&#xff1a; 在这个星期里&#xff0c;我们专业的学生在专业老师的带领下进行了c语言程序实践学习。在这之前&#xff0c;我们已经对c语言这门课程学习了一个学期&#xff0c;对其有了一定的了解&#xff0c;但是也仅仅是停留在了解的范围&#xff0c;对里…

软件测试/测试开发丨Python 深拷贝与浅拷贝

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27327 深拷贝与浅拷贝 浅拷贝&#xff1a;有4中实现方法&#xff1a;对象本身的copy方法&#xff0c;工厂方法&#xff0c;切片以及copy模块的copy方法。…

记录aardio和Pythonl联动,为python做界面、做单exe文件的几个知识点

关于aardio的几个目录的说明 如果要aardio创建python关联程序,强烈建议新建工程向导中选择“窗口程序”+python来生成,会自动建立好目录,十分方便。 写好的python脚本或工程,直接放到py目录中,aardio中可以直接import导入该目录中的python模块,无需带目录,类似: aar…

vue3:5、组合式API-reactive和ref函数

<script setup> /* reactive接收一个对象类型的数据&#xff0c;返回一个响应式的对象 *//*** ref:接收简单类型或复杂类型&#xff0c;返回一个响应式对象* 本质&#xff1a;是在原有传入数据的基础上&#xff0c;外层报了一层对象&#xff0c;包成了复杂类型* 底层&…

vue前后端端口不一致解决方案

在config index.js文件中 引入如下代码即可 const path require(path) const devEnv require(./dev.env) module.exports {dev: {// PathsassetsSubDirectory: static,assetsPublicPath: /,proxyTable: devEnv.OPEN_PROXY false ? {} : {/api: {target: http://localhos…

接口自动化测试总结

一、什么项目适合做自动化测试&#xff1f; 软件需求变动不频繁 测试脚本的稳定性决定了自动化测试的维护成本。如果软件需求变动过于频繁&#xff0c;测试人员需要根据变动的需求来更新测试用例以及相关的测试脚本&#xff0c;而脚本的维护本身就是一个代码开发的过程&#x…

【web开发】4.JavaScript与jQuery

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、appe…

yo!这里是进程控制

目录 前言 进程创建 fork()函数 写时拷贝 进程终止 退出场景 退出方法 进程等待 等待原因 等待方法 1.wait函数 2.waitpid函数 等待结果&#xff08;status介绍&#xff09; 进程替换 替换原理 替换函数 进程替换例子 shell简易实现 后记 前言 学习完操作…