【十四】springboot整合WebSocket

简介: 【十四】springboot整合WebSocket


       介绍:接下来我会把学习阶段学到的框架等知识点进行整合,每一次整合是在前一章的基础上进行的,所以后面的整合不会重复放前面的代码。每次的demo我放在结尾,本次是接着上一章的内容延续的,只增加新增的或者修改的代码。

       最终效果展示:

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

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

       下面开始展示一步一步实现这个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

目录
相关文章
|
15天前
|
网络协议 前端开发 Java
SpringBoot 整合 WebSocket
WebSocket是基于TCP协议的一种网络协议,它实现了浏览器与服务器全双工通信,支持客户端和服务端之间相互发送信息。在有WebSocket之前,如果服务端数据发生了改变,客户端想知道的话,只能采用定时轮询的方式去服务端获取,这种方式很大程度上增大了服务器端的压力,有了WebSocket之后,如果服务端数据发生改变,可以立即通知客户端,客户端就不用轮询去换取,降低了服务器的压力。目前主流的浏览器都已经支持WebSocket协议了。
|
15天前
|
网络协议 Java Spring
Springboot 集成websocket
Springboot 集成websocket
20 0
|
15天前
|
前端开发 JavaScript Java
Springboot+Netty+WebSocket搭建简单的消息通知
这样,你就建立了一个简单的消息通知系统,使用Spring Boot、Netty和WebSocket实现实时消息传递。你可以根据具体需求扩展和改进该系统。
36 1
|
15天前
|
前端开发 JavaScript Java
【十五】springboot整合WebSocket实现聊天室
【十五】springboot整合WebSocket实现聊天室
48 0
|
15天前
|
Java 应用服务中间件 Maven
springboot整合websocket后启动报错:javax.websocket.server.ServerContainer not available
springboot整合websocket后启动报错:javax.websocket.server.ServerContainer not available
668 1
|
15天前
|
Java
SpringBoot:第七篇 websocket(消息推送)
SpringBoot:第七篇 websocket(消息推送)
54 0
|
消息中间件 缓存 前端开发
Springboot 整合 WebSocket ,使用STOMP协议 ,前后端整合实战 (一)
Springboot 整合 WebSocket ,使用STOMP协议 ,前后端整合实战 (一)
1705 1
Springboot 整合 WebSocket ,使用STOMP协议 ,前后端整合实战 (一)
|
消息中间件 存储 负载均衡
Springboot 整合 WebSocket ,使用STOMP协议+Redis 解决负载场景问题(二)
Springboot 整合 WebSocket ,使用STOMP协议+Redis 解决负载场景问题(二)
1064 0
Springboot 整合 WebSocket ,使用STOMP协议+Redis 解决负载场景问题(二)
|
1天前
|
JavaScript Java 关系型数据库
springboot+vue在线BLOG网站(源码+文档)
在线BLOG网站实现了以下功能: 管理员:首页、个人中心、个人信息、用户管理、博客标签管理、博客分类管理、博客管理、图库相册管理、论坛管理、系统管理等模块信息的查看及相应操作。 用户:实现个人中心、个人信息、博客管理、图库相册管理、我的收藏等相应操作。
|
1天前
|
数据管理 Java 测试技术
springboot+vue心灵治愈交流平台(源码+文档)
心灵治愈交流平台实现了以下功能: 管理员模块:系统中的核心用户是管理员,管理员登录后,通过管理员来管理后台系统。主要功能有:首页、个人中心、系统公告管理、用户管理、心理咨询师管理、心灵专栏管理、压力测试管理、测试数据管理、咨询师预约管理、小纸条管理、系统管理等功能。 用户:首页、个人中心、测试数据管理、咨询师预约管理、小纸条管理等功能。 心理咨询师:首页、个人中心、咨询师预约管理、系统管理等功能