Spring Boot + WebSocket实现消息推送
2018-03-15 13:40
441 查看
Spring Boot + WebSocket实现消息推送
WebSocket介绍
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信,允许服务器主动发送信息给客户端。Spring Boot对WebSocket提供了支持,用Spring Boot能更好的对WebSocket整合
pom.xml(部分)
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <!--thymeleaf 模版引用 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ... <!-- 静态资源 --> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.0.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.1.0</version> </dependency>
WebSocket 配置
@Configuration @EnableWebSocketMessageBroker public class WebSocketBrokerConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { // 配置一个/topic消息代理 config.enableSimpleBroker("/topic"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry .addEndpoint("/socket/chat") // 注册一个STOMP的endpoint .setAllowedOrigins("*") // 允许跨域 .withSockJS(); //指定使用SockJS协议 } }
消息实体
@Data @AllArgsConstructor @NoArgsConstructor public class WebSocketMessage { private String message; private LocalDateTime time; }
WebSocket控制器
@RestController public class WebSocketController { private final Logger logger = LoggerFactory.getLogger(this.getClass()); @MessageMapping("/welcome") //当浏览器向服务端发送请求时,通过@MessageMapping映射/welcome这个地址,类似于@ResponseMapping @SendTo("/topic/getResponse")//当服务器有消息时,会对订阅了@SendTo中的路径的浏览器发送消息 public WebSocketMessage say(WebSocketMessage message) { logger.info("Web socket message is {}", message); try { //睡眠1秒 Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } return new WebSocketMessage(message.getMessage(), LocalDateTime.now()); } }
编写webSocket.html,使用thymeleaf模板引擎
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>SpringBoot实现广播式WebSocket</title> <script src="/webjars/jquery/jquery.min.js"></script> <script src="/webjars/sockjs-client/sockjs.min.js"></script> <script src="/webjars/stomp-websocket/stomp.min.js"></script> </head> <body> <noscript><h2 style="color:#ff0000">抱歉,您的浏览器不支持改功能!</h2></noscript> <div> <div> <button id="connect" onclick="connect();">连接</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button> </div> <div id="conversationDiv"> <labe消息</label><input type="text" id="name" /> <button id="sendMessage" onclick="sendMessage();">发送</button> <p id="response"></p> </div> </div> </body> <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'; $("#response").html(); } function connect(){ var socket = new SockJS('/socket/chat'); //连接SockJS的endpoint名称为"/socket/chat" stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端 stompClient.connect({},function(frame){//连接WebSocket服务端 setConnected(true); console.log('Connected:' + frame); //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息,这个是在控制器的@SentTo中定义的 stompClient.subscribe('/topic/getResponse',function(response){ showResponse(response.body); }); }); } function disconnect(){ if(stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendMessage(){ var messgae = $("#messgae").val(); //通过stompClient.send向/welcome 目标(destination)发送消息,这个是在控制器的@MessageMapping中定义的 stompClient.send("/welcome",{},JSON.stringify({'message':messgae})); } function showResponse(message){ var response = $("#response"); response.html(message); console.log(message); } </script> </html>
配置viewController
@Controller public class WebMvcConfig extends WebMvcConfigurerAdapter{ /** * 配置viewController,提供映射路径 */ @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/webSocket").setViewName("/webSocket"); } }
至此,Spring Boot整合WebSocket广播式消息推送实现。
当项目整合了oauth2验证时,WebSocket连接就会报错
解决方法
WebSecurityConfigurer
@Configuration @EnableWebSecurity public class WebSecurityConfigurer extends WebSecurityConfigurerAdapter { protected void configure(HttpSecurity http) throws Exception { http .csrf().disable() .authorizeRequests() .antMatchers("/socket/chat/**").permitAll() ; } }
WebSocketSecurityConfiguration
@Configuration public class WebSocketSecurityConfiguration extends AbstractSecurityWebSocketMessageBrokerConfigurer { @Override protected void configureInbound(MessageSecurityMetadataSourceRegistry messages) { messages.anyMessage().permitAll(); } @Override protected boolean sameOriginDisabled() { return true; } }
相关文章推荐
- 在Spring Boot框架下使用WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- Spring WebSocket实现消息推送
- Spring和Websocket相结合实现消息的推送
- 使用Spring WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- springboot整合websocket实现一对一消息推送和广播消息推送
- Spring WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- 详解在Spring Boot框架下使用WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- Spring和Websocket相结合实现消息的推送
- 使用SpringBoot快速搭建WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- WebSocket使用:整合Spring实现消息推送
- Spring WebSocket实现消息推送
- 在Spring Boot框架下使用WebSocket实现消息推送
- [ Spring Boot ] 整合 Websocket 实现消息推送框架的设计笔记