详解在Spring Boot框架下使用WebSocket实现消息推送

spring Boot的学习持续进行中。前面两篇博客我们介绍了如何使用Spring Boot容器搭建Web项目以及怎样为我们的Project添加HTTPS的支持，在这两篇文章的基础上，我们今天来看看如何在Spring Boot中使用WebSocket。

什么是WebSocket

WebSocket为浏览器和服务器之间提供了双工异步通信功能，也就是说我们可以利用浏览器给服务器发送消息，服务器也可以给浏览器发送消息，目前主流浏览器的主流版本对WebSocket的支持都算是比较好的，但是在实际开发中使用WebSocket工作量会略大，而且增加了浏览器的兼容问题，这种时候我们更多的是使用WebSocket的一个子协议stomp，利用它来快速实现我们的功能。OK，关于WebSocket我这里就不再多说，我们主要看如何使用。

Project创建

使用WebSocket需要我们先创建一个Project，这个Project的创建方式和我们前文(初识Spring Boot框架)说的一样，不同的是在选择依赖的时候选择Thymeleaf和WebSocket依赖，如下图：

配置WebSocket

Project创建成功之后，我们先来配置WebSocket，创建如下类：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
  @Override
  public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
    stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();
  }

  @Override
  public void configureMessageBroker(MessageBrokerRegistry registry) {
    registry.enableSimpleBroker("/topic");
  }
}

关于这个类我说如下几点：

1@EnableWebSocketMessageBroker注解表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。

2.registerStompEndpoints方法表示注册STOMP协议的节点，并指定映射的URL。

3.stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();这一行代码用来注册STOMP协议节点，同时指定使用SockJS协议。

4.configureMessageBroker方法用来配置消息代理，由于我们是实现推送功能，这里的消息代理是/topic

创建浏览器发送消息的接收类

浏览器发送来的消息用这个类来接收：

public class RequestMessage {

  private String name;

  public String getName() {
    return name;
  }
}

创建响应消息类

服务器返回给浏览器的消息由这个类来承载：

public class ResponseMessage {
  private String responseMessage;

  public ResponseMessage(String responseMessage) {
    this.responseMessage = responseMessage;
  }

  public String getResponseMessage() {
    return responseMessage;
  }
}

创建控制器

@Controller
public class WsController {
  @MessageMapping("/welcome")
  @SendTo("/topic/getResponse")
  public ResponseMessage say(RequestMessage message) {
    System.out.println(message.getName());
    return new ResponseMessage("welcome," + message.getName() + " !");
  }
}

关于这个控制器，首先@Controller注解不必多言，say方法上添加的@MessageMapping注解和我们之前使用的@RequestMapping类似。@SendTo注解表示当服务器有消息需要推送的时候，会对订阅了@SendTo中路径的浏览器发送消息。

添加脚本

我们这个案例需要三个js脚本文件，分别是STOMP协议的客户端脚本stomp.js、SockJS的客户端脚本sock.js以及jQuery，这三个js文件拷贝到src/main/resources/static/js目录下。OK，这三个js文件我已经为小伙伴们准备好了，可以直接在文末下载案例，案例中有，也可以自行下载这三个js文件。

演示页面

在写这个HTML页面之前，我想先说我们要实现的效果是什么样子的。当我的Project启动之后，在浏览器访问消息发送页面，在该页面发送一条消息，当服务端收到这条消息之后给所有的连接上了服务器的浏览器都发送一条消息。OK，我们在src/main/resources/templates目录下新建一个ws.html页面，内容如下：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>广播式WebSocket</title>
  <script th:src="@{js/sockjs.min.js}"></script>
  <script th:src="@{js/stomp.js}"></script>
  <script th:src="@{js/jquery-3.1.1.js}"></script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div>
  <div>
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
  </div>

  <div id="conversationDiv">
    <label>输入你的名字</label><input type="text" id="name"/>
    <button id="sendName" onclick="sendName();">发送</button>
    <p id="response"></p>
  </div>
</div>
<script type="text/javascript">
  var stompClient = null;
  function setConnected(connected) {
    document.getElementById("connect").disabled = connected;
    document.getElementById("disconnect").disabled = !connected;
    document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
//    $("#connect").disabled = connected;
//    $("#disconnect").disabled = !connected;
    $("#response").html();
  }
  function connect() {
    var socket = new SockJS('/endpointSang');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      setConnected(true);
      console.log('Connected:' + frame);
      stompClient.subscribe('/topic/getResponse', function (response) {
        showResponse(JSON.parse(response.body).responseMessage);
      })
    });
  }
  function disconnect() {
    if (stompClient != null) {
      stompClient.disconnect();
    }
    setConnected(false);
    console.log('Disconnected');
  }
  function sendName() {
    var name = $('#name').val();
    console.log('name:' + name);
    stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
  }
  function showResponse(message) {
    $("#response").html(message);
  }
</script>
</body>
</html>

这里虽然代码略多，但是仔细分析一下却也很简单。首先js文件引入的那一部分我就不再多说，这里如果又不理解的可以参考使用Spring Boot开发Web项目。然后我们的页面上先有两个按钮，一个是连接，一个是断开连接，两个按钮分别对应不同的点击事件，在这两个按钮下方有一个输入框，就是我们要发送的内容，然后还有一个发送按钮，发送按钮对应了一个发送消息的点击事件。这是整个页面的元素，很简单，我们这里重点来看一下js逻辑代码。

connect方法是当我点击连接按钮的时候执行的，var socket = new SockJS('/endpointSang');表示连接的SockJS的endpoint名称为/endpointSang，stompClient = Stomp.over(socket);表示使用STOMP来创建WebSocket客户端。然后调用stompClient中的connect方法来连接服务端，连接成功之后调用setConnected方法，该隐藏的隐藏，该显示的显示。然后再通过调用stompClient中的subscribe方法来订阅/topic/getResponse发送来的消息，也就是我们在Controller中的say方法上添加的@SendTo注解的参数。stompClient中的send方法表示发送一条消息到服务端，其他的都是常规的js用法我就不再赘述。

配置viewController

接下来就是要为ws.html提供路径映射：

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/ws").setViewName("/ws");
  }
}

OK，做完这一切之后我们就可以运行项目了，我同时打开多个浏览器，然后在其中一个上发送消息，我们来看看结果：

我在最上面的浏览器上发送消息，其他两个浏览器都能收到我的消息。

OK ，以上就是我们在Spring Boot框架下使用WebSocket实现消息推送的全过程。

本案例下载地址：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 初识Spring Boot框架和快速入门

    初识Spring Boot框架和快速入门

    前面的铺垫文章已经连着写了六篇了,主要是介绍了spring和SpringMVC框架,小伙伴们在学习的过程中大概也发现了这两个框架需要我们手动配置的地方非常多,不过做JavaEE开发的小伙伴们肯定也听说过"约定大于配置"这样一句话,就是说系统,类库,框架应该假定合理的默认值,而非要求提供不必要的配置,可是使用Spring或者SpringMVC的话依然有许多这样的东西需要我们进行配置,这样不仅徒增工作量而且在跨平台部署时容易出问题.OK,由于这些已经存在的问题,Spring Boot应运而

  • 详解MyEclipse中搭建spring-boot+mybatis+freemarker框架

    详解MyEclipse中搭建spring-boot+mybatis+freemarker框架

    1.在MyEclipse里创建一个maven项目.File>New>Maven Project: 勾选图中红色部分,然后点击Next. 2.填写下图中红色部分然后点击Finish. 3.此时一个maven项目已经生成,目录结构如下: 4.打开pom.xml在里面编辑如下内容: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSche

  • JavaEE微框架Spring Boot深入解读

    JavaEE微框架Spring Boot深入解读

    前言 spring框架作为JavaEE框架领域的一款重要的开源框架,在企业应用开发中有着很重要的作用,同时Spring框架及其子框架很多,所以知识量很广. Spring Boot:一款Spring框架的子框架,也可以叫微框架,是2014年推出的一款使Spring框架开发变得容易的框架.学过Spring框架的都知识,Spring框架难以避免地需要配置不少XMl,而使用Spring Boot框架的话,就可以使用注解开发,极大地简化基于Spring框架的开发. Spring Boot充分利用了Java

  • Spring Boot 快速搭建微服务框架详细教程

    Spring Boot 快速搭建微服务框架详细教程

    前言: SpringBoot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提供了一堆依赖打包,并已经按照使用习惯解决了依赖问题---习惯大于约定. Spring Boot默认使用tomcat作为服务器,使用logback提供日志记录. Spring Boot的主要优点: 为所有Spring开发者更快的入门 开箱即用,提供各种默认配置来简化项目配置 内嵌式容器简化Web项目 没有冗余代码生成和XM

  • SpringBoot框架搭建教程分享

    SpringBoot几乎集成了SpringMVC的所有内容,以及tomcat容器,同时去除了繁复的xml配置文件,开发起来十分方便:页面配合thymeleaf模板渲染也是非常简单,如果是前后端分离的项目,那么SpringBoot就专门负责提供restful风格的api接口,通过json格式与前端进行数据交互. 下面pom.xml里面一些依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=

  • 初识Spring Boot框架之Spring Boot的自动配置

    初识Spring Boot框架之Spring Boot的自动配置

    在上篇博客初识Spring Boot框架中我们初步见识了SpringBoot的方便之处,很多小伙伴可能也会好奇这个spring Boot是怎么实现自动配置的,那么今天我就带小伙伴我们自己来实现一个简单的Spring Boot 自动配置的案例,看看这一切到底是怎么发生的. 假设我的需求是这样的:当我的项目中存在某个类的时候,系统自动为我配置该类的Bean,同时,我这个Bean的属性还可以在application.properties中进行配置,OK,就这样一个需求,我们来看看怎么实现. 1.新建s

  • Spring-Boot框架初步搭建

    Spring-Boot框架初步搭建

    一.简介 SpringMVC是非常伟大的框架,开源,发展迅速.优秀的设计必然会划分.解耦.所以,spring有很多子项目,比如core.context.bean.mvc等.这对知根底的人来说很简单明了,然而springmvc就是为了傻瓜式的操作而发明的.对于初学springmvc的人来说,想要入手就开发需要拷贝一连串的dependency而不知道这个是干嘛,不知道是不是少了依赖.像我刚接触springmvc的时候到处百度教程而发现各有不同,于是复制了一个又一个代码却不能自己设置,根本原因是不了解

  • Spring Boot构建框架详解

    Spring Boot构建框架详解

    什么Spring Boot? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式. 环境准备 一个比较不错的文本编辑器(例如Vim.Emacs.Sublime Text)或者IDE(Eclipse.Idea Intellij) Java环境(JDK 1.8或以

  • Spring Boot快速搭建Spring框架教程

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development and Design中阐述的部分理念和原型衍生而来. 它是为了解决企业应用开发的复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架.Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情. 然而,Spr

  • Spring Boot 集成Dubbo框架实例

    使用Spring Boot 与Dubbo集成,这里我之前尝试了使用注解的方式,简单的使用注解注册服务其实是没有问题的,但是当你涉及到使用注解的时候在服务里面引用事务,注入其他对象的时候,会有一些问题.于是我就果断放弃了注解了,使用的是XML,这里可能介绍的是Dubbo,但是如果使用Dubbox的话,基本上是兼容的.接下来,将说说使用XML的方式与Spring Boot在一起开发. 1.创建工程在pom.xml中加入依赖 创建工程名为: (1)springboot-dubbo-provide (2

随机推荐