1、配置websocket
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;
@Configuration
//通过该注解开启使用STMP协议来传输基于代理(message broker)的消息,
//这时控制器支持使用@MessageMapping,就像使用@RequestMapping一样
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {//注册STOMP协议的节点(endpoint),并映射的指定的URL
registry.addEndpoint("/endpointWisely").withSockJS();//注册一个STOMP的endpoint,并指定使用Sockjs协议
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {//配置消息代理(Message Broker)
registry.enableSimpleBroker("/topic");//广播式应配置一个/topic消息代理
}
}
复制代码
2、消息类的定义
package com.yijialuo.websocket.domain;
//浏览器向服务器发送的消息用此类接受
public class WiselyMessage {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
复制代码
//服务端向浏览器发送此类消息
public class WiselyResponse {
private String responseMessage;
public WiselyResponse(String responseMessage){
this.responseMessage=responseMessage;
}
public String getResponseMessage() {
return responseMessage;
}
public void setResponseMessage(String responseMessage) {
this.responseMessage = responseMessage;
}
}复制代码
3、控制器
import com.yijialuo.websocket.domain.WiselyMessage;
import com.yijialuo.websocket.domain.WiselyResponse;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
@Controller
public class Wscontroller {
@MessageMapping("/welcome")//当浏览器向服务端发送请求时,通过@MessageMapping映射/welcome这个地址,类似于@RequestMapping
@SendTo("/topic/getResponse")//当服务端有消息时,会对订阅了@SendTo中的路径的浏览器发送消息
public WiselyResponse say(WiselyMessage message) throws Exception{
Thread.sleep(3000);
return new WiselyResponse("Welcome,"+message.getName()+"!");
}
}
复制代码
4、配置viewController,为前端提供便捷的路径映射
public class WebMvcConfig extends WebMvcConfigurerAdapter{
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ws").setViewName("/ws");
}
}
复制代码
前端:
引入sockjs.min.js和stomp.min.js
连接代码:
var socket = new SocketJS('/endpointWisely');
//和后台的registry.addEndpoint("/endpointWisely").withSockJS();对应
stompClient =Stomp.over(socket)//使用STOMP子协议的WebSocket客户端
stompClient.connect({}, function(fram) ) {//连接WebSocket服务器
stompClient.subscribe('/topic/getResponse' , function(respnose) {
//订阅/topic/getResponse(控制器的@SendTo),接收到消息触发function,数据在 //respnose.body
}
)
}
发送数据代码:
stompClient send("/welcome",{},JSON.stringify({'name':name}));
//welcome和后台Controller对应