【十六】springboot整合WebSocket（超详细）

在上一章对WebService进行了整合，本章将对WebSocket进行整合，后面会写两个小demo，本章将写一个进度条demo，后面会写一个聊天室demo。

WebSocket：用我自己的话来描述就是，正常的前后端使用是前端写一个请求，请求接口，每次想要某一个接口的数据，都需要去请求他一次，这是正常的流程，但是使用WebSocket，可以实现一次请求之后，前端跟该接口的连接关系一直都在，后端接口可以主动返回数据到前端。

qq交流群导航——>231378628

下面开始展示一步一步实现这个demo

还是先展示一下目录结构，如下：

框选出来的部分是这章新增的或者修改到的部分。

第一步：导入依赖

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

相比前面的章节，新增了websocket的依赖。

编写后端：

第二步：编写WebSocketConfig配置类

第三步：编写WebSocket类

//注册成组件
@Component
//定义websocket服务器端，它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址
@ServerEndpoint("/websocket")
//如果不想每次都写private  final Logger logger = LoggerFactory.getLogger(当前类名.class); 可以用注解@Slf4j;可以直接调用log.info
@Slf4j
public class WebSocket {

    //实例一个session，这个session是websocket的session
    private Session session;

    //存放websocket的集合（本次demo不会用到，聊天室的demo会用到）
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    //前端请求时一个websocket时
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);
        log.info("【websocket消息】有新的连接, 总数:{}", webSocketSet.size());
    }

    //前端关闭时一个websocket时
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        log.info("【websocket消息】连接断开, 总数:{}", webSocketSet.size());
    }

    //前端向后端发送消息
    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket消息】收到客户端发来的消息:{}", message);
    }

    //新增一个方法用于主动向客户端发送消息
    public static void sendMessage(String message) {
        for (WebSocket webSocket: webSocketSet) {
            log.info("【websocket消息】广播消息, message={}", message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

有关方法和参数的描述代码里有简单写到。

第四步：改造控制器

编写一个接口方法，调用websocket的sendMessage方法，如下：

我是写在以前的codeController里面的，先注入websocket，再新增一个接口方法，如下：

ApiOperation注解是整合的swagger后的注解，没有跟着前面的章节整合不需要加，为了显示效果，我增加了一个线程睡眠0.1秒再累加，返回前端。

注意：若前面跟着一起整合了token，直接访问该接口不行，要么请求时带上登录接口返回的token，要么放行该接口，为了简单，此处我直接放行的该接口，若未整合token，则不需要管，放行方式如下：

在该配置类下面的该方法增加如图所示（未整合token不需要管）。

到此后端完毕，开始编写前端代码。

编写前端：

第五步：编写前端代码

<!DOCTYPE HTML>
<html>
<head>
    <title>进度条</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
 
<body>
   <div class="progress" style="width: 60%;height: 60px;margin: 0 auto;margin-top: 150px;">
     <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div id="message"></div>
   <input type="button" name="" id="btn" value="开始" />
</body>
 
<script type="text/javascript">
    var websocket = null;
 
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8089/websocket");
    }else{
        alert('Not support websocket')
    }
 
    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("发生错误");
    };
 
    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("建立连接");
    }
 
    //接收到消息的回调方法
    websocket.onmessage = function(event){
		console.log(event.data)
        // setMessageInnerHTML(event.data);
		$(".progress-bar").attr("style","width:"+event.data+"%")
    }
 
    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("关闭连接");
    }
 
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
		alert("已关闭连接");
        websocket.close();
    }
 
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
 
    //关闭连接
    function closeWebSocket(){
		alert("已关闭连接");
        websocket.close();
    }
	//开始
	$("#btn").click(function(){
		$.ajax({
			url: "http://localhost:8089/codeController/jinDuTiao",
			type:'post',
			success: function(HTML) {//返回页面内容
				 console.log(HTML);
				}
			});
	})
</script>
</html>

解释：

1、

var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8089/websocket");
    }else{
        alert('Not support websocket')
    }

首先建立websocket连接。

注意：此处的地址的ws://是固定写法，后面加上你的ip+端口+WebSocket的ServerEndpoint注解配置的路径。

2、

//连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("建立连接");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
       console.log(event.data)
        // setMessageInnerHTML(event.data);
       $(".progress-bar").attr("style","width:"+event.data+"%")
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("关闭连接");
    }

都是websocket的固定写法，几个回调函数。

3、

//开始
   $("#btn").click(function(){
       $.ajax({
           url: "http://localhost:8089/codeController/jinDuTiao",
           type:'post',
           success: function(HTML) {//返回页面内容
               console.log(HTML);
               }
           });
   })

开始按钮，开始请求接口。

注意：此处为了样式好看点，我导入了bootstrap。运行服务，打开网页，会自动建立websocket连接，点击开始。

第六步：演示

第七步：改造

为了体现后端主动向服务器传数据，新增一个接口，如下：

将上面那个接口改成新增成一个定时执行的，会发现，不点击前端的开始按钮，也会有效果，说明后端可以主动向客户端发送数据。

到此，整合完毕。

本期整合到此完毕，接下来会继续更新加强整合，尽情期待。

客户端访问地址：http://localhost:8090/swagger-ui.html或者http://localhost:8090/doc.html

demo地址：studydemo/整合swagger at main · zrc11/studydemo · GitHub

码字不易，若帮到各位，帮忙三连，感谢

有关【十六】springboot整合WebSocket（超详细）的更多相关文章

在VMware16虚拟机安装Ubuntu详细教程 - 2
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主
ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2
我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d
100个python算法超详细讲解：画直线 - 2
1．问题描述使用Python的turtle（海龟绘图）模块提供的函数绘制直线。2．问题分析一幅复杂的图形通常都可以由点、直线、三角形、矩形、平行四边形、圆、椭圆和圆弧等基本图形组成。其中的三角形、矩形、平行四边形又可以由直线组成，而直线又是由两个点确定的。我们使用Python的turtle模块所提供的函数来绘制直线。在使用之前我们先介绍一下turtle模块的相关知识点。turtle模块提供面向对象和面向过程两种形式的海龟绘图基本组件。面向对象的接口类如下：1）TurtleScreen类：定义图形窗口作为绘图海龟的运动场。它的构造器需要一个tkinter.Canvas或ScrolledCanva
C/C++好用的websocket库 - 2
IntrductionLibwebsocketsisasimple-to-use,MIT-license,pureClibraryprovidingclientandserverforhttp/1,http/2,websockets,MQTTandotherprotocolsinasecurity-minded,lightweight,configurable,scalableandflexibleway.It’seasytobuildandcross-buildviacmakeandissuitablefortasksfromembeddedRTOSthroughmasscloudservi
H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2
目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式
ruby - 在 Ruby 中将字符串转换为十六进制 - 2
我正在尝试使用Ruby将二进制文件转换为十六进制。目前我有以下内容:File.open(out_name,'w')do|f|f.puts"constunsignedintmodFileSize=#{data.length};"f.puts"constcharmodFile[]={"first_line=truedata.bytes.each_slice(15)do|a|line=a.map{|b|",#{b}"}.joiniffirst_linef.putsline[1..-1]elsef.putslineendfirst_line=falseendf.puts"};"end这是以下代
ruby-on-rails - Websocket-rails 不适用于 Nginx 和 Unicorn 的生产环境 - 2
我有带有gemwebsocket-rails0.7的Rails3.2应用程序。在开发机上，一切正常在生产环境中，我使用Nginx/1.6作为代理服务器，Unicorn作为http服务器。Thin用于独立模式(在https://github.com/websocket-rails/websocket-rails/wiki/Standalone-Server-Mode之后)。nginx配置:location/websocket{proxy_passhttp://localhost:3001/websocket;proxy_http_version1.1;proxy_set_headerUp
ruby - 十六进制字符串到 Ruby 中的 signed int 转换 - 2
如何在ruby中将十六进制字符串转换为32位有符号整数？例如a="fb6d8cf1"#hexstring[a].pack('H*').unpack('l')#fromthedocumentationitunpackstoits32bitsignedint它转换为-242455045但实际答案是-76706575你能指出我做错了什么吗？最佳答案您似乎遇到了字节序问题。这给出了期望的结果:[a].pack("H*").unpack("l>")#=>[-76706575]["038a67f90"].pack("H*").unpac
华为ensp详细安装包、安装教程及所遇问题 - 2
目录一、安装包链接二、安装详细步骤1.安装Wireshark和WinPcap2.安装OracleVMVirtualBox3.安装ensp三、安装后注册四、启动路由器出现40错误怎么解决一、安装包链接二、安装详细步骤链接:https://pan.baidu.com/s/1QbUUYMOMIV2oeIKHWP1SpA?pwd=xftx提取码：xftx1.安装Wireshark和WinPcap找到Wireshark安装包所在文件夹，双击它，按照以下步骤安装。2.安装OracleVMVirtualBox找到OracleVMVirtualBox安装包所在文件夹，双击它，按照以下步骤安装。注：可自定义安装
Linux操作系统CentOS7安装Nginx[详细版] - 2
Nginx安装1.官网下载Nginx2.使用XShell和Xftp将压缩包上传到Linux虚拟机中3.解压文件nginx-1.20.2.tar.gz4.配置nginx5.启动nginx6.拓展（修改端口和常用命令）（一）修改nginx端口（二）常用命令1.官网下载Nginxhttp://nginx.org/en/download.html这里我下载的是1.20.2版本，大家按需下载对应稳定版即可2.使用XShell和Xftp将压缩包上传到Linux虚拟机中没有XShell可以参考《Linux操作系统CentOS7连接XShell》3.解压文件nginx-1.20.2.tar.gz1）检查是否存

【十六】springboot整合WebSocket（超详细）

springboot篇章整体栏目：

第一步：导入依赖

编写后端：

第二步：编写WebSocketConfig配置类

第三步：编写WebSocket类

第四步：改造控制器

编写前端：

第五步：编写前端代码

第六步：演示

第七步：改造

码字不易，若帮到各位，帮忙三连，感谢

有关【十六】springboot整合WebSocket（超详细）的更多相关文章

随机推荐