在此记录一下!欢迎指教!
第一步、application启动入口配置
@EnableScheduling//先由后台计划推送,可以更改为调用方法推送
第二步、创建WebSocketConfig.java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
//setAllowedOrigins允许指定的域名或IP(含端口号)建立长连接,如果只允许自家域名访问,这里轻松设置。如果不限时使用"*"号,如果指定了域名,则必须要以http或https开头。
//setClientLibraryUrl 前后端版本不一致的问题具体可以搜一下
stompEndpointRegistry.addEndpoint("/webSocketServer").setAllowedOrigins("*").withSockJS().setClientLibraryUrl("//cdn.jsdelivr.net/sockjs/1/sockjs.min.js");
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
}
}
第三步、创建WsController.java
@Controller
public class WsController {
@Autowired
private EventService eventService;
@Resource
private SimpMessagingTemplate simpMessagingTemplate;
// @Scheduled(fixedRate = 60000)//计划一秒推送一次
// @MessageMapping("/getWebsocketMessage")//配置消息访问请求路径,类似于RequestMapping
public void autoSend(){
String str = "success!"
System.out.println("websocket推送消息成功!");
this.simpMessagingTemplate.convertAndSend("/topic/ResponseMessage", str ); //主动推送消息代码
}
}
第四步、前台页面请求js
引入sockjs.min.js
stomp.js
jquery-3.1.1.js
//连接方法
function connect() {
var socket = new SockJS('/webSocketServer');//地址需要配置ip和端口号,如果配置了nginx需要在nginx配置文件里面修改nginx配置文件
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
console.log('Connected:' + frame);
stompClient.subscribe('/topic/ResponseMessage', function (response) {//此处配置订阅消息地址,不需要ip和端口号;
console.dir("success")
})
});
}
function send() {
stompClient.send("/getWebsocketMessage", {}, JSON.stringify({'name': name}));//此处地址配置为MessageMapping地址
}