Spring+STOMP实现WebSocket广播订阅、权限认证、一对一通讯(附源码)

Spring+STOMP实现WebSocket广播订阅、权限认证、一对一通讯(附源码)

版声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/elonpage/article/details/78446695

1. 项目代码

首先,放上项目的代码链接。 
https://github.com/Jamin20/websocket-spring-demo

2. 背景

WebSocket 是 Html5 新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,解决 http 使用 ajax 轮询或 long-polling 请求-响应带来过多的资源消耗,同时对特殊场景应用提供了全新的实现方式,比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。

3. WebSocket 原理

WebSocket是一个持久化的协议,只需要一次HTTP握手就可以进行连接。整个通讯过程是建立在一次连接/状态中,也就避免了HTTP的非状态性,服务端会一直知道你的信息,直到你关闭请求,这样服务器就不需要反复解析HTTP协议。同时,服务端就可以主动推送信息给客户端。

传统 HTTP 请求响应 
传统 HTTP 请求响应

WebSocket 请求响应 
WebSocket 请求响应

4. STOMP 协议

STOMP是一个简单的互操作协议,用于服务器在客户端之间进行异步消息传递。

客户端可以使用SEND命令来发送消息以及描述消息的内容,用SUBSCRIBE命令来订阅消息以及由谁来接收消息。这样就可以建立一个发布订阅系统,消息可以从客户端发送到服务器进行操作,服务器也可以推送消息到客户端。

5. WebSocket 与 STOMP

WebSocket 是底层协议,STOMP 是适用于WebSocket 的上层协议。直接使用 WebSocket 就类似于使用 TCP 套接字来编写 web 应用,没有高层协议定义消息的语意,不利于开发与维护。同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在 WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义。

6. Spring + STOMP

当使用 Spring 实现 STOMP 时,Spring WebSocket 应用程序充当客户端的 STOMP 代理。消息被路由到 @Controller 消息处理方法,或路由到一个简单的内存代理,经过处理后,发送给订阅用户。

另外,还可以配置 Spring 使用专用的 STOMP 代理(例如RabbitMQ,ActiveMQ 等)来实际传播消息。在这种情况下,Spring 维护代理(MQ系统)的 TCP 连接,将消息转发给它,并将消息传递给连接的 WebSocket 客户端。

7. Spring + STOMP 实现广播订阅

通讯过程:

  1. 客户端与服务器进行 HTTP 握手连接,连接点 EndPoint 通过 WebSocketMessageBroker 设置
  2. 客户端通过 subscribe 向服务器订阅消息主题(/topic/demo1/greetings)
  3. 客户端可通过 send 向服务器发送消息,消息通过路径 /app/demo1/hello/10086 达到服务端,服务端将其转发到对应的Controller(根据Controller配置的 @MessageMapping(“/demo1/hello/{typeId}”) 信息)
  4. 服务器一旦有消息发出,将被推送到订阅了相关主题的客户端(Controller中的@SendTo(“/topic/demo1/greetings”)表示将方法中 return 的信息推送到 /topic/demo1/greetings 主题)

7.1. 服务端 WebSocketMessageBroker 配置

  1. 设置对外暴露的 EndPoint ,客户端通过这个 EndPoint 进行业务接入
  2. 设置Broker,配置订阅主题、以及客户端消息的前缀等信息
 
  1. @Configuration

  2. @EnableWebSocketMessageBroker

  3. public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

  4.  
  5. @Override

  6. public void configureMessageBroker(MessageBrokerRegistry config) {

  7. /*

  8. * 用户可以订阅来自"/topic"和"/user"的消息,

  9. * 在Controller中,可通过@SendTo注解指明发送目标,这样服务器就可以将消息发送到订阅相关消息的客户端

  10. *

  11. * 在本Demo中,使用topic来达到群发效果,使用user进行一对一发送

  12. *

  13. * 客户端只可以订阅这两个前缀的主题

  14. */

  15. config.enableSimpleBroker("/topic", "/user");

  16. /*

  17. * 客户端发送过来的消息,需要以"/app"为前缀,再经过Broker转发给响应的Controller

  18. */

  19. config.setApplicationDestinationPrefixes("/app");

  20.  
  21.  
  22. }

  23.  
  24. @Override

  25. public void registerStompEndpoints(StompEndpointRegistry registry) {

  26. /*

  27. * 路径"/webSocketEndPoint"被注册为STOMP端点,对外暴露,客户端通过该路径接入WebSocket服务

  28. */

  29. registry.addEndpoint("/webSocketEndPoint").setAllowedOrigins("*").withSockJS();

  30. }

  31. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

7.2. 服务端 Controller 配置

  1. 配置程序入口 URI @MessageMapping(“/demo1/hello/{typeId}”)
  2. 配置消息推送的目标主题 @SendTo(“/topic/demo1/greetings”)
 
  1. @Controller

  2. public class GreetingController {

  3.  
  4. /*

  5. * 使用restful风格

  6. */

  7. @MessageMapping("/demo1/hello/{typeId}")

  8. @SendTo("/topic/demo1/greetings")

  9. public Greeting greeting(@DestinationVariable Integer typeId, HelloMessage message, @Headers Map<String, Object> headers) throws Exception {

  10. return new Greeting(headers.get("simpSessionId").toString(), typeId + "---" + message.getMessage());

  11. }

  12.  
  13. /*

  14. * 这里没用@SendTo注解指明消息目标接收者,消息将默认通过@SendTo("/topic/twoWays")交给Broker进行处理

  15. * 不推荐不使用@SendTo注解指明目标接受者

  16. */

  17. @MessageMapping("/demo1/twoWays")

  18. public Greeting twoWays(HelloMessage message) {

  19. return new Greeting("这是没有指明目标接受者的消息:", message.getMessage());

  20. }

  21. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

7.3. 客户端连接与订阅

  1. 配置 WebSocket 连接的URI:/webSocket/webSocketEndPoint
  2. 配置客户端订阅的主题:/topic/demo1/greetings
 
  1. function connect() {

  2. var socket = new SockJS('/webSocket/webSocketEndPoint');

  3. stompClient = Stomp.over(socket);

  4. var headers={

  5. username:'admin',

  6. password:'admin'

  7. };

  8. stompClient.connect(headers, function (frame) {

  9. setConnected(true);

  10. console.log('Connected: ' + frame);

  11. stompClient.subscribe('/topic/demo1/greetings', function (greeting) {

  12. showGreeting(JSON.parse(greeting.body).userId, JSON.parse(greeting.body).content);

  13. });

  14. stompClient.subscribe('/topic/demo1/twoWays', function (greeting) {

  15. showGreeting(JSON.parse(greeting.body).userId, JSON.parse(greeting.body).content);

  16. });

  17. });

  18. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

7.4. 客户端发送消息

  1. 发送消息
 
  1. function sendName() {

  2. stompClient.send("/app/demo1/hello/10086", {}, JSON.stringify({'message': $("#message").val()}));

  3. }

  • 1
  • 2
  • 3

7.5 效果

demo1

8. Spring + STOMP 实现用户验证

8.1. 服务端设置请求拦截器

  1. 为 configureClientInboundChannel 设置拦截器
  2. WebSocket 首次请求连接的时候,获取其 Header 信息,利用Header 里面的信息进行权限认证
  3. 通过认证的用户,使用 accessor.setUser(user); 方法,将登陆信息绑定在该 StompHeaderAccessor 上,在Controller方法上可以获取 StompHeaderAccessor 的相关信息
 
  1. public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

  2.  
  3. @Override

  4. public void configureClientInboundChannel(ChannelRegistration registration) {

  5. registration.setInterceptors(new ChannelInterceptorAdapter() {

  6. @Override

  7. public Message<?> preSend(Message<?> message, MessageChannel channel) {

  8. StompHeaderAccessor accessor =

  9. MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);

  10. //1. 判断是否首次连接请求

  11. if (StompCommand.CONNECT.equals(accessor.getCommand())) {

  12. //2. 验证是否登录

  13. String username = accessor.getNativeHeader("username").get(0);

  14. String password = accessor.getNativeHeader("password").get(0);

  15. for (Map.Entry<String, String> entry : Users.USERS_MAP.entrySet()) {

  16. // System.out.println(entry.getKey() + "---" + entry.getValue());

  17. if (entry.getKey().equals(username) && entry.getValue().equals(password)) {

  18. //验证成功,登录

  19. Authentication user = new Authentication(username); // access authentication header(s)}

  20. accessor.setUser(user);

  21. return message;

  22. }

  23. }

  24. return null;

  25. }

  26. //不是首次连接,已经成功登陆

  27. return message;

  28. }

  29. });

  30. }

  31. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

8.2. 服务端 Controller 可以获取在拦截器中绑定的用户登录信息

  1. 使用 StompHeaderAccessor 获得相关头信息
 
  1. @Controller

  2. public class GreetingController2 {

  3.  
  4. @MessageMapping("/demo2/hello/{typeId}")

  5. @SendTo("/topic/demo2/greetings")

  6. public Greeting greeting(HelloMessage message, StompHeaderAccessor headerAccessor) throws Exception {

  7.  
  8. Authentication user = (Authentication) headerAccessor.getUser();

  9.  
  10. String sessionId = headerAccessor.getSessionId();

  11.  
  12. return new Greeting(user.getName(), "sessionId: " + sessionId + ", message: " + message.getMessage());

  13. }

  14. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

8.3. 客户端登陆时,带上登陆信息

  1. 利用Header,将登陆信息在首次连接时发送到服务端
 
  1. function connect() {

  2. var socket = new SockJS('/webSocket/webSocketEndPoint');

  3. stompClient = Stomp.over(socket);

  4. var headers={

  5. username:$("#username").val(),

  6. password:$("#password").val()

  7. };

  8. stompClient.connect(headers, function (frame) {

  9. setConnected(true);

  10. console.log('Connected: ' + frame);

  11. stompClient.subscribe('/topic/demo2/greetings', function (greeting) {

  12. showGreeting(JSON.parse(greeting.body).userId, JSON.parse(greeting.body).content);

  13. });

  14. });

  15. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

8.4. 效果

demo2

9. Spring + STOMP 实现指定目标发送

  1. 客户端可订阅个人专属的主题:/user/{username}/demo3/greetings
  2. 在 程序 中利用 SendToUser 发送消息到指定的主题: 
    2.1 Controller 注解,发送到自己 @SendToUser(“/demo3/greetings”) 
    2.2 利用 messagingTemplate 发送到指定用户 messagingTemplate.convertAndSendToUser(destUsername, “/demo3/greetings”, greeting);

9.1. 服务端 WebSocketMessageBroker 配置

  1. 增加定向发送的配置(以下代码为configureMessageBroker中需要增加的内容)
 
  1. public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

  2. @Override

  3. public void configureMessageBroker(MessageBrokerRegistry config) {

  4.  
  5. /*

  6. * 一对一发送的前缀

  7. * 订阅主题:/user/{userID}//demo3/greetings

  8. * 推送方式:1、@SendToUser("/demo3/greetings")

  9. * 2、messagingTemplate.convertAndSendToUser(destUsername, "/demo3/greetings", greeting);

  10. */

  11. config.setUserDestinationPrefix("/user");

  12. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

9.2. 服务端 Controller 配置

  1. 必须注入SimpMessagingTemplate
  2. 使用注解和 messagingTemplate 发送消息到指定的订阅主题(也就是目标客户端)
  3. 目标客户端使用 Restful 的方式在请求路径中指定
 
  1. @Controller

  2. public class GreetingController3 {

  3.  
  4. private final SimpMessagingTemplate messagingTemplate;

  5.  
  6. /*

  7. * 实例化Controller的时候,注入SimpMessagingTemplate

  8. */

  9. @Autowired

  10. public GreetingController3(SimpMessagingTemplate messagingTemplate) {

  11. this.messagingTemplate = messagingTemplate;

  12. }

  13.  
  14. @MessageMapping("/demo3/hello/{destUsername}")

  15. @SendToUser("/demo3/greetings")

  16. public Greeting greeting(@DestinationVariable String destUsername, HelloMessage message, StompHeaderAccessor headerAccessor) throws Exception {

  17.  
  18. Authentication user = (Authentication) headerAccessor.getUser();

  19.  
  20. String sessionId = headerAccessor.getSessionId();

  21.  
  22. Greeting greeting = new Greeting(user.getName(), "sessionId: " + sessionId + ", message: " + message.getMessage());

  23.  
  24. /*

  25. * 对目标进行发送信息

  26. */

  27. messagingTemplate.convertAndSendToUser(destUsername, "/demo3/greetings", greeting);

  28.  
  29. return new Greeting("系统", new Date().toString() + "消息已被推送。");

  30. }

  31.  
  32. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

9.3. 客户端订阅

  1. 订阅用户相关消息主题:’/user/’ + $(“#username”).val() + ‘/demo3/greetings’
 
  1. function connect() {

  2. var socket = new SockJS('/webSocket/webSocketEndPoint');

  3. stompClient = Stomp.over(socket);

  4. var headers = {

  5. username: $("#username").val(),

  6. password: $("#password").val()

  7. };

  8. stompClient.connect(headers, function (frame) {

  9. setConnected(true);

  10. console.log('Connected: ' + frame);

  11. stompClient.subscribe('/user/' + $("#username").val() + '/demo3/greetings', function (greeting) {

  12. showGreeting(JSON.parse(greeting.body).userId, JSON.parse(greeting.body).content);

  13. });

  14. });

  15. }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

9.4 客户端发送消息

  1. 客户端发送消息,同时在请求路径中指明发送目标客户端
 
  1. function sendName() {

  2. stompClient.send("/app/demo3/hello/" + $("#destUsername").val(), {}, JSON.stringify({'message': $("#message").val()}));

  3. }

  • 1
  • 2
  • 3

9.5. 效果

这里写图片描述


代码下载: 
http://download.csdn.net/download/elonpage/10105442 
https://github.com/Jamin20/websocket-spring-demo

参考文章: 
1. Spring官方WebSocket文档 
https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#websocket 
2. WebSocket+SockJs+STMOP 
http://www.jianshu.com/p/4ef5004a1c81 
3. STOMP Over WebSocket(stomp.js) 
http://jmesnil.net/stomp-websocket/doc/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值