Spring Boot——WebSocket（广播式）

最新推荐文章于 2025-04-03 19:06:36 发布

孙硕SunShuo

最新推荐文章于 2025-04-03 19:06:36 发布

阅读量805

点赞数

分类专栏： Spring Boot 文章标签： Spring Boot WebSockt

本文链接：https://blog.youkuaiyun.com/sunshuo1231/article/details/88880727

版权

Spring Boot 专栏收录该内容

2 篇文章

订阅专栏

什么是WebSocket

WebSocket 为浏览器和服务端提供了双工异步通信的功能，即浏览器可以向服务端发送消息，服务端也可以向浏览器发送消息。 WebSocket 需浏览器的支持，如 IE 10+、 Chrome 13+、 Firefox 6+，这对我们现在的浏览器来说都不是问题。 WebSocket 是通过一个 socket 来实现双工异步通信能力的。但是直接使用 WebSocket（或者 SockJS： WebSocket 协议的模拟，增加了当浏览器不支持 WebSocket 的时候的兼容支持）协议开发程序显得特别烦琐，我们会使用它的子协议 STOMP，它是一个更高级别的协议， STOMP 协议使用一个基于帧（ frame）的格式来定义消息，与 HTTP 的 request 和 response 类似（具有类似于@ RequestMapping 的@ MessageMapping）。

实战源码（）

新建spring Boot项目，添加Thymeleaf 和 Websocket 依赖。

新建WebSocekt配置类WebSocketConfig.java，需要@EnableWebSocketMessageBroker开启WebSocket支持，并且继承AbstractWebSocketMessageBrokerConfigurer。源码如下:

/**
 * 
 */
package com.sunshuo.springboot_websocket;

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;

/**
 * @ClassName: WebSocketConfig
 * @Description: TODO(这里用一句话描述这个类的作用)
 * @author SunShuo
 * @date 2019年3月28日
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    /*
     * (non-Javadoc)
     * 
     * @see org.springframework.web.socket.config.annotation.
     * WebSocketMessageBrokerConfigurer#registerStompEndpoints(org.
     * springframework.web.socket.config.annotation.StompEndpointRegistry)
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /*
         * 注册STOPM协议的节点（endpoint），并映射的指定的URL
         */
        /*
         * 注册一个STOPM节点（endpoint），并指定使用SockJS协议
         */
        registry.addEndpoint("/endpointWisely").withSockJS();
    }

    /*
     * (non-Javadoc)
     * 
     * @see org.springframework.web.socket.config.annotation.
     * AbstractWebSocketMessageBrokerConfigurer#configureMessageBroker(org.
     * springframework.messaging.simp.config.MessageBrokerRegistry)
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        /*
         * 配置消息代理
         */
        /*
         * 广播式应配置一个/topic消息代理
         */
        registry.enableSimpleBroker("/topic");
    }

}

代码解释
① 通过@ EnableWebSocketMessageBroker 注解开启使用 STOMP 协议来传输基于代理（ message broker）的消息，这时控制器支持使用@ MessageMapping，就像使用@ RequestMapping 一样。
② 注册 STOMP 协议的节点（ endpoint），并映射的指定的 URL。
③ 注册一个 STOMP 的 endpoint，并指定使用 SockJS 协议。
④ 配置消息代理（ Message Broker）。
⑤ 广播式应配置一个/ topic 消息代理。

新建WiselyMessage类。浏览器向服务端发送消息用该类接收封装。
源码如下：

/**
 * 
 */
package com.sunshuo.springboot_websocket.domain;

/**
 * @ClassName: WiselyMessage
 * @Description: 浏览器想服务端发送和的消息由此类接受
 * @author SunShuo
 * @date 2019年3月28日
 */
public class WiselyMessage {
    private String name;

    public String getName() {
        return name;
    }

}

新建WiselyResponse类。服务端向浏览器发送消息用该类接收。
源码如下：

/**
 * 
 */
package com.sunshuo.springboot_websocket.domain;

/**
 * @ClassName: WiselyResponse
 * @Description: 服务端向浏览器发送消息
 * @author SunShuo
 * @date 2019年3月28日
 */
public class WiselyResponse {
    private String responseMessage;

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

    public String getResponseMessage() {
        return responseMessage;
    }

}

新建一个WsController类当控制器。

/**
 * 
 */
package com.sunshuo.springboot_websocket;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

import com.sunshuo.springboot_websocket.domain.WiselyMessage;
import com.sunshuo.springboot_websocket.domain.WiselyResponse;

/**
 * @ClassName: WsController
 * @Description: TODO(这里用一句话描述这个类的作用)
 * @author SunShuo
 * @date 2019年3月28日
 */
@Controller
public class WsController {
    @MessageMapping("/welcome")
    @SendTo("/topic/getResponse")
    public WiselyResponse say(WiselyMessage wiselyMessage) throws Exception {
        Thread.sleep(3000);
        return new WiselyResponse("Welcome " + wiselyMessage.getName() + "!");
    }
}

代码解释
① 当浏览器向服务端发送请求时，通过@ MessageMapping 映射/ welcome 这个地址，类似于@ RequestMapping。
② 当服务端有消息时，会对订阅了@ SendTo 中的路径的浏览器发送消息。 .

新建一个html页面用于演示，需要引入stomp. min. js（ STOMP 协议的客户端脚本）、 sockjs. min. js（ SockJS 的客户端脚本）以及 jQuery脚本，将脚本放在src/ main/ resources/ static下。
在src/ main/ resources/ templates 下新建ws. html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Insert title here</title>
</head>

<body "disconnect()">
<noscript><h2 style="color:#FF0000">浏览器不支持websocket</h2></noscript>
<div>
    <div>
        <button id="connect" "connect();">连接</button>
        <button id="disconnect" disabled="disabled" "disconnect();">断开链接</button>
    </div>
    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name" />
        <button id="sendName" "sendName();">发送</button>
        <p id="response"></p>
    </div>
</div>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{jquery.min.js}"></script>
<script type="text/javascript">
var stopmClient = null;

function setConnected(connected) {
	document.getElementById('connect').disabled = connected;
	document.getElementById('disconnect').disabled = !connected;
	document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
	$('#response').html();
}

function connect() {
	var socket = new SockJS('/endpointWisely');
	stopmClient = Stomp.over(socket);
	stopmClient.connect({}, function(frame) {
		setConnected(true);
		console.log('Connected: ' + frame);
		stopmClient.subscribe('/topic/getResponse', function(response) {
			showResponse(JSON.parse(response.body).responseMessage);
		});
	});
}

function disconnect() {
	if(stopmClient != null) {
		stopmClient.disconnect();
	}
	setConnected(false);
	console.log('disconnected. ');
}

function sendName() {
	var name = $('#name').val();
	stopmClient.send("/welcome", {}, JSON.stringify({'name': name}));
}

function showResponse(message) {
	var response = $('#response');
	response.html(message);
}
</script>
</body>
</html>

代码解释
① 连接 SockJS 的 endpoint 名称为“/ endpointWisely”。
② 使用 STOMP 子协议的 WebSocket 客户端。
③ 连接 WebSocket 服务端。
④ 通过 stompClient. subscribe 订阅/ topic/ getResponse 目标（ destination）发送的消息，这个是在控制器的@ SendTo 中定义的。
⑤ 通过 stompClient. send 向/ welcome 目标（ destination）发送消息，这个是在控制器的@ MessageMapping 中定义的。

配置 viewController，为 ws. html 提供便捷的路径映射：
源码如下：

/**
 * 
 */
package com.sunshuo.springboot_websocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @ClassName: WebMvcConfig
 * @Description: TODO(这里用一句话描述这个类的作用)
 * @author SunShuo
 * @date 2019年3月28日
 */
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    /*
     * (non-Javadoc)
     * 
     * @see
     * org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter
     * #addViewControllers(org.springframework.web.servlet.config.annotation.
     * ViewControllerRegistry)
     */
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/ws").setViewName("/ws");
    }
}

运行项目：
在浏览器中输入：http://localhost:8080/ws，打开3个界面，分别链接。然后在一个浏览器中输入消息并且发送，其他的浏览器接收消息。
在这里插入图片描述
其消息发送的格式为：