SpringBoot如何整合WebSocket? | 带你读《SpringBoot实战教程》之四十一-阿里云开发者社区

开发者社区> 开发者学习资源库> 正文

SpringBoot如何整合WebSocket? | 带你读《SpringBoot实战教程》之四十一

简介: WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

上一篇:SpringBoot如何整合ElasticSearch? | 带你读《SpringBoot实战教程》之四十
下一篇:SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二

本文来自于千锋教育在阿里云开发者社区学习中心上线课程《SpringBoot实战教程》,主讲人杨红艳,点击查看视频内容

SpringBoot整合WebSocket

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。这种通信模型有一个弊端:HTTP 协议无法实现服务器主动向客户端发起消息。
这种单向请求的缺点,如果服务器有连续的状态变化,客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。

WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

那么如何使用呢?
添加依赖:

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

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

WebSocket的配置类:

//WebSocket的配置类
@Configuration
//开启对WebSocket的支持
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{

    
     //注册一个STOMP协议的节点,并映射到指定的URL
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //注册一个STOMP的endpoint,并指定使用SockJS协议
        registry.addEndpoint("/endpointSocket").withSockJS();
    }

    
     //配置消息代理
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //配置一个广播式的消息代理
        registry.enableSimpleBroker("/topic");
    }
}

新建包:com.qianfeng.pojo:

浏览器向服务器发送消息实体类:

public class SocketMessage {
    private String message;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

服务器向浏览器响应数据的封装实体类:

public class SocketResponse {
    private String responseMessage;

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

    public String getResponseMessage() {
        return responseMessage;
    }
}

新建包:com.qianfeng.controller
控制类:

@Controller
public class WebSocketController {

    private SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

    //当浏览器向服务器端发送STOMP请求时,通过@MessageMapping注解来映射/getServerTime地址
    @MessageMapping(value = "/getServerTime")
    //当服务端有消息时,会对订阅了@SendTo中的路径的客户端发送消息
    @SendTo(value = "/topic/getResponse")
    public SocketResponse serverTime(SocketMessage message) throws InterruptedException {
        return new SocketResponse(message.getMessage() + sf.format(new Date()));
    }

    @RequestMapping("/index")
    public String toPage() {
        return "webSocket";
    }    
}

创建页面templates:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>集成集成WebSocket示例</title>
</head>
<body>
<div>
    <button id="connect" onclick="connect();">连接</button>
    <button id="disconnect" onclick="disconnect();">断开连接</button>
    <button id="serverTimeId" onclick="getServerTime();">获取服务器端时间</button>
    <hr/>
    <span id="showServerTime"></span>
</div>
<script type="text/javascript" src="sockjs.min.js"></script>
<script type="text/javascript" src="stomp.min.js"></script>
<script type="text/javascript" src="jquery-3.1..min.js"></script>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script type="text/javascript">
    var stompClient = null;
    $(function(){
        setConnect(false);
    });
    function setConnect(connected) {
        $("#connect").attr({disabled:connected});
        $("#disconnect").attr({disabled:!connected});
    }
    function connect() {
        var socket = new SockJS('/endpointSocket');
        //创建STOMP客户端连接,目标地址为/endpointSocket的STOMP代理
        stompClient = stomp.over(socket);
        //打印stomp输出信息
        stompClient.debug = function(str) {
            console.log(str+ "\n");
        };
        //建立连接
        stompClient.connect({},function(frame)) {
            setConnect(true);
            //连接成功后订阅/topic/getResponse目标发送的消息,该地址在Controller中用@SendTo指定
            stompClient.subscribe('/topic/getResponse',function(response) {
                showResponse(JSON.parse(response.body).responseMessage);
            });
        });
    }
    function disconnect() {
        if(stompClient != null) {
            stompClient.disconnect();
        }
        setConnect(false);
    }
    function getServerTime() {
        var message = "The server time is : ";
        //发送消息到服务端,/getServerTime地址是由Controller中的@MessageMapping指定
        stompClient.send("/getServerTime",{},JSON.stringify({'message':message}));
    }
    function showResponse(message) {
        var response = $("#showServerTime");
        response.html(message);
    }
</script>
</body>
</html>

执行结果:

image.png

配套视频

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

开发者免费资源中心,技术电子书、会议PPT、论文资料持续供应中

官方博客
官网链接