spring boot整合websocket

转载自:https://www.cnblogs.com/GoodHelper/p/7078381.html

一.WebSocket简单介绍

　　随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

　　我们知道，传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如 浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式 对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便，如带有即时通信、实时数据、订阅推送等功能的应 用。在WebSocket规范提出之前，开发人员若要实现这些实时性较强的功能，经常会使用折衷的解决方法：轮询（polling）和Comet技术。其实后者本质上也是一种轮询，只不过有所改进。

　　轮询是最原始的实现实时Web应用的解决方案。轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求，频繁地查询是否有新的数据改动。明显地，这种方法会导致过多不必要的请求，浪费流量和服务器资源。

　　Comet技术又可以分为长轮询和流技术。长轮询改进了上述的轮询技术，减小了无用的请求。它会为某些数据设定过期时间，当数据过期后才会向服务端发送请求；这种机制适合数据的改动不是特别频繁的情况。流技术通常是指客户端使用一个隐藏的窗口与服务端建立一个HTTP长连接，服务端会不断更新连接状态以保持HTTP长连接存活；这样的话，服务端就可以通过这条长连接主动将数据发送给客户端；流技术在大并发环境下，可能会考验到服务端的性能。

　　这两种技术都是基于请求-应答模式，都不算是真正意义上的实时技术；它们的每一次请求、应答，都浪费了一定流量在相同的头部信息上，并且开发复杂度也较大。

　　伴随着HTML5推出的WebSocket，真正实现了Web的实时通信，使B/S模式具备了C/S模式的实时通信能力。WebSocket的工作流程是这 样的：浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小 了很多。本文不详细地介绍WebSocket规范，主要介绍下WebSocket在Java Web中的实现。

　　JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat从7.0.27开始支持 WebSocket，从7.0.47开始支持JSR-356，下面的Demo代码也是需要部署在Tomcat7.0.47以上的版本才能运行。

二.WebSocket优点

以前我们实现推送技术，用的都是轮询，在特点的时间间隔有浏览器自动发出请求，将服务器的消息主动的拉回来，在这种情况下，我们需要不断的向服务器发送请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。会占用大量的带宽和服务器资源。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。在建立连接之后，服务器可以主动传送数据给客户端。

此外，服务器与客户端之间交换的标头信息很小。

WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；

三.springBoot整合webSocket用例

1.引入websocket依赖

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

完整的pom.xml文件代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>com.example</groupId>
    <artifactId>spring-boot-16</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
 
    <name>spring-boot-16</name>
    <description>Demo project for Spring Boot</description>
 
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.3.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
 
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>
 
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
 
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

2.1 @EnableWebSocketMessageBroker注解表示开启使用STOMP协议来传输基于代理的消息，Broker就是代理的意思。
2.2 registerStompEndpoints方法表示注册STOMP协议的节点，并指定映射的URL。
2.3 stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();这一行代码用来注册STOMP协议节点，同时指定使用SockJS协议。
2.4 configureMessageBroker方法用来配置消息代理，由于我们是实现推送功能，这里的消息代理是/topic

总之，首先注册了一个名为/my-websocket的端点，也就是STOMP客户端连接的地址。

此外，定义了服务端处理WebSocket消息的前缀是/app，这个地址用于客户端向服务端发送消息（比如客户端向/app/send这个地址发送消息，那么服务端通过@MessageMapping(“/send”)这个注解来接收并处理消息）

最后，定义了一个简单消息代理，也就是服务端广播消息的路径前缀（比如客户端监听/topic/send这个地址，那么服务端就可以通过@SendTo(“/topic/send”)这个注解向客户端发送STOMP消息）。

package com.example;
 
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
 
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/my-websocket").withSockJS();
    }
}

3.编写一个DTO类来承载消息：

package com.example;
 
public class SocketMessage {
 
    public String message;
 
    public String date;
 
}

4.创建App.java类，用于启用spring boot和用于接收、发送消息的控制器。

“send”方法用于接收客户端发送过来的websocket请求。

@EnableScheduling注解为：启用spring boot的定时任务，这与“callback”方法相呼应，用于每隔1秒推送服务器端的时间。

@MessageMapping注解和我们之前使用的@RequestMapping类似。@SendTo注解表示当服务器有消息需要推送的时候，会对订阅了@SendTo中路径的浏览器发送消息。

convertAndSend方法是向前端发送一条消息，第一个参数是浏览器中订阅消息的地址，第二个参数是消息本身。

package com.example;
 
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
@EnableScheduling
@SpringBootApplication
public class App {
 
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
 
    @Autowired
    private SimpMessagingTemplate messagingTemplate;
 
    @GetMapping("/")
    public String index() {
        return "index";
    }
 
    @MessageMapping("/send")
    @SendTo("/topic/send")
    public SocketMessage send(SocketMessage message) throws Exception {
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        message.date = df.format(new Date());
        return message;
    }
 
    @Scheduled(fixedRate = 1000)
    @SendTo("/topic/callback")
    public Object callback() throws Exception {
        // 发现消息
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        messagingTemplate.convertAndSend("/topic/callback", df.format(new Date()));
        return "callback";
    }
}

5.在“resources/templates”目录下创建index.html文件,引用angular.js的CDN文件外，还需要引用sockjs和stomp

<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/
 
    var stompClient = null;
 
    var app = angular.module('app', []);
    app.controller('MainController', function($rootScope, $scope, $http) {
 
        $scope.data = {
            //连接状态
            connected : false,
            //消息
            message : '',
            rows : []
        };
 
        //连接
        $scope.connect = function() {
            var socket = new SockJS('/my-websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                // 注册发送消息
                stompClient.subscribe('/topic/send', function(msg) {
                    $scope.data.rows.push(JSON.parse(msg.body));
                    $scope.data.connected = true;
                    $scope.$apply();
                });
                // 注册推送时间回调
                stompClient.subscribe('/topic/callback', function(r) {
                    $scope.data.time = '当前服务器时间：' + r.body;
                    $scope.data.connected = true;
                    $scope.$apply();
                });
 
                $scope.data.connected = true;
                $scope.$apply();
            });
        };
 
        $scope.disconnect = function() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            $scope.data.connected = false;
        }
 
        $scope.send = function() {
            stompClient.send("/app/send", {}, JSON.stringify({
                'message' : $scope.data.message
            }));
        }
    });
    /*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">
    <label>WebSocket连接状态:</label>
    <button type="button" ng-disabled="data.connected" ng-click="connect()">连接</button>
    <button type="button" ng-click="disconnect()"
        ng-disabled="!data.connected">断开</button>
    <br />
    <br />
    <div ng-show="data.connected">
        <label>{{data.time}}</label> <br /> <br /> <input type="text"
            ng-model="data.message" placeholder="请输入内容..." />
        <button ng-click="send()" type="button">发送</button>
        <br /> <br /> 消息列表： <br />
        <table>
            <thead>
                <tr>
                    <th>内容</th>
                    <th>时间</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in data.rows">
                    <td>{{row.message}}</td>
                    <td>{{row.date}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

总结

在开发一个基于web的即时通讯应用的过程中，我们还需考虑session的机制。

还需要一个集合来承载当前的在线用户，并做一个定时任务，其目的是用轮询的方式定时处理在线用户的状态，有哪些用户在线，又有哪些用户离线。