后台步骤
1.maven 配置,在pom.xml文件中依赖项添加如下依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.springboot配置,添加websocketConf.java文件。其中"/test/Socket"为前端订阅地址,前端以http请求方式访问该地址即可连接socket。当做前后端分离,需要跨域时,需要添加setAllowedOrigins("*")容许跨域。
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/test/Socket").setAllowedOrigins("*").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
registry.setApplicationDestinationPrefixes("/app");
}
}
3.声明SimpMessagingTemplate (或者使用@SendTo和@SendToUser注解)
在需要用到推送的地方如Controller,service,Component等地方声明SimpMessagingTemplate
@Resource
private SimpMessagingTemplate messagingTemplate;
当需要向客户端推送消息时,调用convertAndSend方法,即可推送消息,此处“/topic/send”可随意设置,所有前端订阅该url的客户端都可以收到推送的消息。
messagingTemplate.convertAndSend("/topic/send", result);
前端步骤
1.导入sockjs.min.js,stomp.min.js,下载地址
3.定义socket对象(可替换成函数)
function Socket(url) {
this.stompClient = null;
this.connect = function(obj, socketUrl, subscribeUrl, uid){
var _this = this;
var socket = new SockJS(socketUrl);
this.stompClient = Stomp.over(socket);
this.stompClient.connect({}, function (frame) {
_this.subscribe(obj, subscribeUrl, uid);
});
}
this.disconnect = function(){
if (this.stompClient != null) {
this.stompClient.disconnect();
}
console.log("Disconnected");
}
this.subscribe = function(obj, subscribeUrl, uid){
this.stompClient.subscribe(subscribeUrl, function(message){
});
}
}
4.连接socket
var socket = new Socket();
socket.connect(that, http://localhost:8080/test/Socket, "/topic/send", uid);
//这里uid可以省略,加上uid是当后台推送消息时,前端做消息识别
5.断开socket
socket.disconnect();