專案中用的 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 不用做任何修改。