0%

springBoot websocket的订阅和发送

发表于 分类于

文章字数：245,阅读全文大约需要1分钟

springWebSocket还有一种形式，除了事件绑定的形式还有基于观察者模式（发布-订阅）的绑定topic形式

环境

springBoot的websocket的starter包

1
2
3
4
<dependency>    
        <groupId>org.springframework.boot</groupId>    
        <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {    
    @Override    
    //添加服务端点,接收服务连接
    public void registerStompEndpoints(StompEndpointRegistry registry) {   
        // 添加一个 /socket 的端点
        registry.addEndpoint("/socket").withSockJS();//开启SockJS支持
    }    

    @Override    
    // 定义消息代理（连接请求的规范）
    public void configureMessageBroker(MessageBrokerRegistry registry) {  
        // 客户端订阅地址前缀（服务端发送）
        registry.enableSimpleBroker("/topic");  
        // 客户端发布地址前缀（服务端接收）    
        registry.setApplicationDestinationPrefixes("/app"); 
    }
}

端点连接还可以配置允许跨域

1
2
3
4
5
6
7
8
9
registry.addEndpoint("/socket").addInterceptors(new HandshakeInterceptor(){
			@Override
			public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes){
				response.getHeaders().add("Access-Control-Allow-Origin", "*");
				return true;
			}
			@Override
			public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {
			}}).setAllowedOrigins("*").withSockJS();

服务端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Controller
public class GreetingController {    
    @Resource
    private SimpMessagingTemplate simpMessagingTemplate;    

    @MessageMapping("/change-notice")  // 接收客户端推送信息的地址，配置了头，所以前端发送应该是"/app/change-notice"
    public void greeting(String value){
        this.simpMessagingTemplate.convertAndSend("/topic/notice", value);    
    }

    //可以简写成这种形式，@SendTo代表返回值推送到那个topic
    @MessageMapping("/change-notice")
    @SendTo("/topic/notice")
    public String greeting(String value) {    
         return value;
    }
}

客户端

准备

  • socketjs.js:如果浏览器不支持webSocket，改库可以模拟对webSocket的支持
  • stomp.js:将webSocket代理代码简易化的框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function connect(){
    var socket = new SocketJS('/socket');
    stompClient = Stomp.over(socket); 
    stompClient.connect({}, function (frame) {
          //...
     });  
//断开连接
stompClient.disconnect();   
//发送信息
stompClient.send("/app/change-notice", {}, value);   
}
//订阅信息
stompClient.subscribe('/topic/notice', function (data) {            
      $('.message span.content').html(data.body);        
    });