1.在项目pom文件中配置
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2.创建user
public class User implements Principal {
private final String name;
public User(String name) {
this.name = name;
}
@Override
public String getName() {
return name;
}
}
3.创建ChannelInterceptor
@Component
public class ChannelInterceptor extends ChannelInterceptorAdapter {
/**
* 获取包含在stomp中的用户信息
*/
@SuppressWarnings("rawtypes")
@Override
public Message<?> preSend(Message<?> message, MessageChannel channel) {
StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
if (StompCommand.CONNECT.equals(accessor.getCommand())) {
Object raw = message.getHeaders().get(SimpMessageHeaderAccessor.NATIVE_HEADERS);
if (raw instanceof Map) {
Object name = ((Map) raw).get("name");
if (name instanceof LinkedList) {
// 设置当前访问器的认证用户
accessor.setUser(new User(((LinkedList) name).get(0).toString()));
}
}
}
return message;
}
}4.创建WebSocketConfig
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/market");
registry.setApplicationDestinationPrefixes("/req");
registry.setPreservePublishOrder(true);
}
@Override
public void configureClientInboundChannel(ChannelRegistration registration) {
registration.interceptors(new ChannelInterceptor());
}
/**
*
* @Title: createUserInterceptor
* @Description: 将客户端渠道拦截器加入spring ioc容器
* @return
*/
@Bean
public ChannelInterceptor createUserInterceptor() {
return new ChannelInterceptor();
}
}5.使用stomp
在所需要操作业务对象中导入一下代码
@Autowired
public SimpMessagingTemplate simpMessagingTemplate;
@PostConstruct
public void init() {
simpMessagingTemplate.setMessageConverter(new SimpleMessageConverter());
}需要将数据推送到前台的代码中添加
simpMessagingTemplate.convertAndSend("/market/demo", "hello word!");6.前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WebSocket</title>
</head>
<body onload="disconnect()">
<div>
<div>
<button id="connect" onclick="connect();">连接</button>
<button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
</div>
</div>
<script src="https://d1fxtkz8shb9d2.cloudfront.net/sockjs-0.3.4.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./protobuf.js"></script>
<script type="text/javascript">
let stompClient = null;
function setConnected(connected) {
document.getElementById('connect').disabled = connected;
document.getElementById('disconnect').disabled = !connected;
$('#response1').html('');
}
function connect() {
let socket = new SockJS('http://127.0.0.1:8080/ws');
stompClient = Stomp.over(socket);
stompClient.connect({
name: 'TEST' // 携带客户端信息
}, function(frame) {
setConnected(true);
var depth =stompClient.subscribe('/market/demo', function(respnose){
$('#response1').html("stomp："+respnose.body);
});
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("断开连接");
}
</script>
</body>
</html>7.如有疑问请在文章评论处评论
