Spring boot 工程设置上下文路径时的 Websocket 配置

项目中用的 Websocket，可以参考 Using WebSocket to build an interactive web application ，我用的是 Maven 构建的工程。教程不难，但是有几个新手需要注意的地方，特别是重构老工程，容易眼花。

第一个就是 Websocket 前后端的纽带配置，也就是继承了 AbstractWebSocketMessageBrokerConfigurer 的实现类：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
//        config.setApplicationDestinationPrefixes("/edc");
}

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS();
}
}

再就是新建一个 Websocket 具体请求的实现类，他需要有三个注解：@RestController / @MessageMapping / @SendTo 。

 * @RestController ： 标记当前的类为 Websocket 请求处理类

 * @MessageMapping ： 类上的路径 + 方法上的路径 = 前端请求需要的路径

 * @SendTo ： 响应放入的消息代理地址，前端实时获取里面的信息

我在改老工程的时候，就是使用的 @RequestMapping 而不是 @MessageMapping，导致老是连不通。

由于我们使用 SpringBoot 构建的工程，我们在 application.properties 里面设置了项目名称，也就是上下文路径：

# 当前应用在部署后的应用名
server.contextPath=/edc

这样，前端在做 websocket 连接时，路径就需要带上这个应用名。

function connect() {
var socket = new SockJS('/edc/websocket'); //1
stompClient = Stomp.over(socket);//2
stompClient.connect({}, function(frame) {//3
stompClient.subscribe('/topic/resultMsg', function(respnose){ //4
console.log("connnnnnnnected!!!!!!!!!!!!")
});
});
}

后端 websocket 实现类如下：

@RestController
@RequestMapping("topic")
@MessageMapping("topic")
@Api("问卷题目的操作")
public class TopicsController {
private Logger logger = LoggerFactory.getLogger(TopicsController.class);

@Autowired
private TopicService topicService;

@ApiOperation(value="删除题目")
@RequestMapping(value="deletion",method=RequestMethod.POST)
@MessageMapping("deletion")
@SendTo("/topic/resultMsg")
public BaseResponse<String> deleteTopic(Topic topic) throws Exception {
logger.debug("进入删除题目  deleteTopic()");
BaseResponse resp = new BaseResponse<>(RESPONSE_STATUS.SUCCESS);
topicService.deleteTopic(topic);
resp.setMsg(EdcConstants.WEBSOCKET_SUCCESS);
return resp;
}
}

可以看到，整个处理类的删除题目的 @MessageMapping 路径就是 "/topic/deletion" ，这个就是前端在发删除题目的 Websocket 请求时的路径：

function sendName() {
stompClient.send("/topic/deletion", {}, JSON.stringify({ 'id': 9, 'surveyId': 1 }));//5
}

假如我们在 WebSocketMessageBroker 设置了 setApplicationDestinationPrefixes() 并且值为 “edc”, 则前端的删除题目请求路径为：

function sendName() {
stompClient.send("/edc/topic/deletion", {}, JSON.stringify({ 'id': 9, 'surveyId': 1 }));//5
}

而 Controller 类里面的 @MessageMapping 不用做任何修改。