简介

STOMP的全称是Simple (or Streaming) Text Orientated Messaging Protocol，一种简单的流式文本传输协议。对于不支持websocket的浏览器我们需要通过STOMP来兼容，兼容的需要俩个组件，一个是前端需要的SockJs，一个是后端需要的WebSocketMessageBroker。SockJs一种让前端可以支持socket通信的技术解决方案，WebSocketMessageBroker是基于消息组件实现的一种通信协议。

实现

一、在后端springboot服务中添加依赖

org.springframework.bootspring-boot-starter-websocket2.2.6.RELEASE

二、添加websocketConfig

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;/*** @author liqiang*/
@Slf4j
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 增加一个后端服务端点registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();// 增加一个前端服务端点registry.addEndpoint("/wsuser").setAllowedOrigins("*").withSockJS();// 配置客户端尝试连接地址
//        registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();}/*** 定义服务器端点请求和订阅前缀* @param registry*/@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {// 客户端订阅路径前缀registry.enableSimpleBroker("/sub", "/user");// 服务端点请求前缀registry.setApplicationDestinationPrefixes("/request");// 设置广播节点/*registry.enableSimpleBroker("/topic", "/user");// 客户端向服务端发送消息需有/app 前缀registry.setApplicationDestinationPrefixes("/app");*/// 指定用户发送（一对一）的前缀 /user/registry.setUserDestinationPrefix("/user/");}
}

解释：
1、

 registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();

addEndpoint添加一个端点，用于前端创建socket连接，在示例中我们创建了俩个端点，这里传差的使用互补影响，不如我发送的时候创建链接使用的是socket端点，而接收信息的时候使用的wsuser端点，这样也是可以互通信息的。
setAllowedOrigins(“*”)这个是设置跨域的。

2、

registry.enableSimpleBroker("/sub", "/user");

设置客户端订阅的前缀

registry.setApplicationDestinationPrefixes("/request");

设置前端请求后端发送信息的前缀

registry.setUserDestinationPrefix("/user/");

设置一对一转发信息时的用户前缀

三、实现广播方式

1、前端代码

1.1 发送信息前端代码

websocket兼容STOMP测试11

连接断开连接
发送消息内容
发送
跳转到消息接收页

1.2接收信息前端代码

等待接收消息

解释：
在前端代码中主要的发送信息和接收信息的部分在js中，如下截取出来：

var stompClient = null;// 设置连接function connect() {// 定义请求服务器的端点var socket = new SockJS('/socket');// stomp客户端stompClient = Stomp.over(socket);// 连接服务器端点stompClient.connect({}, function (frame) {// 建立连接后的回调，这个是设置连接状态的setConnected(true);})}// 断开socket连接function disconnect() {if (stompClient != null) {stompClient.disconnect();}setConnected(false);console.log("Disconnected");}// 向/request/send服务端发送消息function sendMessage() {var message = $("#message").val();// 发送消息到"/request/send"，其中/request是服务器定义的前缀// 而/send则是@MessageMapping所配置的路径stompClient.send("/request/send", {}, message);}connect();

var noticeSocket = function () {// 连接服务器端点var s = new SockJS('/socket');//客户端var stompClient = Stomp.over(s);stompClient.connect({}, function () {console.log("notice socket connected ！");// 订阅消息地址，这里的/sub是在配置里设置的sub前缀，/sub/chat是后端服务代码中@SendTo注解消息路由到的订阅路径中stompClient.subscribe('/sub/chat', function (data) {$('#receive').html(data.body);});});};noticeSocket();

后端服务代码

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.annotation.Resource;
import java.security.Principal;/*** @author */
@Controller
@RequestMapping("/device/ws")
@Api(tags = "WebsocketController")
public class WebsocketController {private final Logger logger = LoggerFactory.getLogger(WebsocketController.class);@MessageMapping("/send")@SendTo("/sub/chat")public String sendMessage(String value) {logger.info("发送消息内容：{}", value);return value;}/*** 测试发送广播消息的前端* @return*/@GetMapping("/test")public String test() {return "request";}/*** 测试接受广播消息的前端* @return*/@GetMapping("/user")public String user() {return "user";}
}

@MessageMapping注解的/send就是前端发送时路径的一部分，再加上服务前缀request，就是前端发送信息的完整路径/request/send.
@SendTo注解的路径是将要消息路由到的路径，正好是前端订阅的路径。
发送过来的消息可以在这里进行整理或处理后再转发出去

实现一对一发送

前端代码

发送信息的前端代码

websocket兼容STOMP测试11

连接断开连接
发送给
发送消息内容
发送
跳转到消息接收页

stompClient.send 把信息发送到后端，
/requst 是服务端统一的前缀路径
/sendUser 是@MessageMaping的路径

接收信息的前端

等待接收消息

解释：

// 订阅消息地址，stompClient.subscribe('/sub/admin/queue/customer', function (data) {console.log("接受到的消息："+data)$('#receive').html(data.body);});

/sub/admin/queue/customer
/sub 是接收信息的订阅的前缀
/admin 是指定的user
/queue/customer 是转发信息的destination，目的地

后端服务代码

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.annotation.Resource;
import java.security.Principal;/*** @author */
@Controller
@RequestMapping("/device/ws")
@Api(tags = "WebsocketController")
public class WebsocketController {private final Logger logger = LoggerFactory.getLogger(WebsocketController.class);@Resourceprivate SimpMessagingTemplate simpMessagingTemplate;@MessageMapping("/sendToUser")public void sendToUser(Principal principal, String body,String token) {
//        String srcUser = principal.getName();System.out.println("传入的token是："+token);String[] args = body.split(": ");String desUser = args[0];String message = String.format("【%s】给你发来消息：%s", "mali", args[1]);// 发送到用户和监听地址simpMessagingTemplate.convertAndSendToUser(desUser, "/queue/customer", message);}/*** 测试发送指定用户的前端* @return*/@GetMapping("/sendUser")public String sendUser() {return "sendUser";}/*** 接受指定用户的前端* @return*/@GetMapping("/userId")public String userId() {return "userId";}
}

 @MessageMapping("/sendToUser")public void sendToUser(Principal principal, String body,String token) {
//        String srcUser = principal.getName();System.out.println("传入的token是："+token);String[] args = body.split(": ");String desUser = args[0];String message = String.format("【%s】给你发来消息：%s", "mali", args[1]);// 发送到用户和监听地址simpMessagingTemplate.convertAndSendToUser(desUser, "/queue/customer", message);}

这个方法正是前端发送消息的路径/sendToUser，路由消息的时候使用simpMessageTemplate.convertAndToUser,destUser是前端传过来的，
/queue/customer也是用户订阅的目的地址，发送的消息是message