<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator-core -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.35</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/sockjs-client -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>sockjs-client</artifactId>
<version>1.1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/stomp-websocket -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>stomp-websocket</artifactId>
<version>2.3.3-1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1-1</version>
</dependency>Spring-boot-starter-websocket依赖时WebSocket相关依赖，其他的都是前端库，使用jar包的形式对这些前端库进行统一管理，使用webjsr添加到项目中的前端库，在Spring Boot项目中已经默认添’加了静态资源，因此可以直接使用
2.配置WebSocket
Spring框架提供了基于WebSocket的STOMP支持，STOMP是一个简单的可交互操作的协议，通常被用于通过中间服务器在客户端之间进行异步消息传递，WebSocket配置如下：
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
registry.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS();
}
}代码解释：
（1）自定义WebSocketConfig继承自WebSocketMessageBrokerConfigurer进行WebSocket配置，然后通过@EnableWebSocketMessageBroker注解开启了WebSocket消息代理
（2）registry.enableSimpleBroker("/topic")表示设置消息代理的前缀，即如果消息的前缀是”/topic”，就会将消息转发给代理（broker）,再由消息代理将消息广播给当前连接的客户端
（3）registry.setApplicationDestinationPrefixes("/app")表示配置一个或多个前缀，通过这些前缀过滤出需要被注解方法处理的消息
（4）registry.addEndpoint("/chat").withSockJS()表示定义一个前缀为”/chat”的edPoint,并开启sockjs支持，sockjs可以解决浏览器对WebSocket的兼容性问题，客户端将通过这里配置的URL来建立WebSocket连接
3.定义Controller
定义Controller用来实现对消息的处理
@RestController
public class GreetingController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Message greeting(Message message)throws Exception{
return message;
}
}根据第二部配置，@MessageMapping("/hello")注解的方法将用来接收”/app/hello”路径发送来的消息，在注解方法中对 对消息进行处理后，再将消息转发到@SendTo定义的路径上，而@SendTo的路径是一个以”/topic”的路径，因此该消息将被交给消息代理broker,再由broker进行广播
4.前台页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单聊</title>
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/chat.js"></script>
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>群聊</title>
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/app.js"></script>
</head>
<body>
<div>
<label for="name">请输入用户名：</label>
<input type="text" id="name" placeholder="用户名">
</div>
<div>
<button id="connect" type="button">连接</button>
<button id="disconnect" type="button" disabled="disabled">断开连接</button>
</div>
<div id="chat" style="display: none;">
<div>
<label for="name">请输入聊天内容：</label>
<input type="text" id="content" placeholder="聊天内容">
</div>
<button id="send" type="button">发送</button>
<div id="greetings">
<div id="conversation" style="display: none">群聊进行中...</div>
</div>
</div>
</body>
</html>
<body>
<div id="chat">
<div id="chatsContent"></div>
<div>
请输入聊天内容： <input type="text" id="content" placeholder="聊天内容">
目标用户： <input type="text" id="to" placeholder="目标用户">
<button id="send" type="button">发送</button>
</div>
</div>
</body>
</html>5.页面以及websocket的js逻辑
var stompClient = null;
function setConnected(connected) {
$("#connect").prop("disabled", connected);
$("#disconnect").prop("disabled", !connected);
if (connected) {
$("#conversation").show();
$("#chat").show();
} else {
$("#conversation").hide();
$("#chat").hide();
}
$("#greetings").html("");
}
function connect() {
if (!$("#name").val()) {
return;
}
var socket = new SockJS(‘/chat‘);
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
stompClient.subscribe(‘/topic/greetings‘, function(greeting) {
showGreeting(JSON.parse(greeting.body));
});
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
setConnected(false);
}
function sendName() {
stompClient.send("/app/hello", {}, JSON.stringify({
‘name‘ : $("#name").val(),
‘content‘ : $("#content").val()
}));
}
function showGreeting(message) {
$("#greetings").append(
"<div>" + message.name + ":" + message.content + "</div>");
}
$(function() {
$("#connect").click(function() {
connect();
});
$("#disconnect").click(function() {
disconnect();
});
$("#send").click(function() {
sendName();
});
});代码解释：
（1）connect方法表示建立一个WebSocket连接，在建立WebSocket连接时，用户必须先输入用户名，然后才能建立连接
（2）方法体中的意思:使用SockJS建立连接，然后创建一个STOMP实例发起请求，在连接成功回调方法中，首先调用setConnected(true)；方法进行页面设置，然后调用STOPM中的subscribe方法订阅服务端发送回来的消息，并将服务端发送来的消息展示出来（使用showGreeting方法）
（3）调用STOMP中的disconnect方法可以断开一个WebScoket连接
5.实体类
public class Message {
private String name;
private String content;
........getter,setter..............
}6.改造消息发送Controller
消息发送使用到了@SendTo注解，该注解讲方法处理过的消息转发到broker,再由broker进行广播，除了@SendTo注解外，Spring还提供了SimpMessagingTemplate类来让开发者更加灵活的发送消息，使用SimpMessagingTemlate可以对上面的Controller进行改造，改造结果如下：
@RestController
public class GreetingController {
@Autowired
SimpMessagingTemplate simpMessagingTemplate;
@MessageMapping("/hello")
public void greeting(Message message)throws Exception{
simpMessagingTemplate.convertAndSend("/topic/greetings",message);
}
}四．消息点对点发送
1.添加依赖
既然是点对点发送，就应该有用户的观念，因此首先在项目中加入Spring Security的依赖，代码如下：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>2.配置Spring Security
对spring security进行配置，添加两个用户，同时配置所有地址都认证后才能访问，代码如下：
@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{
@Bean
PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
/**
* 密码加密过：123
*/
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.inMemoryAuthentication()
.withUser("齐**")
.password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
.roles("admin")
.and()
.withUser("辛**")
.password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
.roles("user")
.and()
.withUser("李**")
.password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
.roles("user")
.and()
.withUser("岳**")
.password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
.roles("user")
.and()
.withUser("尚**")
.password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
.roles("user");
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.anyRequest()
.authenticated()
.and()
.formLogin()
.permitAll();
}
}
3.改造WebSocket配置代码如下：
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic","/queue");
registry.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS();
}
}代码解释：
这里修改了registry.enableSimpleBroker("/topic"),又增加了个前缀"/queue",方便对群发消息和点对点消息进行管理
4.配置Controller
对WebSocket的Controller进行改造，代码如下：
@RestController
public class GreetingController {
@Autowired
SimpMessagingTemplate simpMessagingTemplate;
/**
* 消息群发
* @param message
* @return
* @throws Exception
*/
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Message greeting(Message message) throws Exception {
return message;
}
/**
* 点对点发送
* @param principal
* @param chat
* @throws Exception
*/
@MessageMapping("/chat")
public void chat(Principal principal, Chat chat) throws Exception {
String from=principal.getName();
chat.setFrom(from);
simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat);;
}
}
代码解释：
（1）群发消息依然使用@SendTo来实现，点对点则用SimpMessagingTemplate来实现
（2）@MessageMapping("/chat")表示来自”/app/chat”路径的消息将被chat方法处理，chat方法的第一个参数Principal可以用来获取当前登录用户的信息，第二个参数则是客户端发送来的消息
（3）在chat方法中，首先获取当前登录用户的用户名，设置给chat对象的from属性，再将消息发送出去，发送的目标就是chat的to属性
（4）消息发送使用的方法是convertAndSendToUser,该方法内部调用了convertAndSend方法，并对消息路径做了处理
5.消息实体类：
public class Chat {
private String to;
private String from;
private String content;
........getter,setter省略............
}代码解释：
Chat是一个普通的javaBean,to属性表示消息的目标用户，form表示消息从哪里来，content则是消息的主体内容
6.前台页面——在线聊天页面（创建在onlinechat.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单聊</title>
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/chat.js"></script>
</head>
<body>
<div id="chat">
<div id="chatsContent"></div>
<div>
请输入聊天内容： <input type="text" id="content" placeholder="聊天内容">
目标用户： <input type="text" id="to" placeholder="目标用户">
<button id="send" type="button">发送</button>
</div>
</div>
</body>
</html>5.页面以及websocket的js逻辑
var stompClient = null;
function setConnected(connected) {
$("#connect").prop("disabled", connected);
$("#disconnect").prop("disabled", !connected);
if (connected) {
$("#conversation").show();
$("#chat").show();
} else {
$("#conversation").hide();
$("#chat").hide();
}
$("#greetings").html("");
}
function connect() {
if (!$("#name").val()) {
return;
}
var socket = new SockJS(‘/chat‘);
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
stompClient.subscribe(‘/topic/greetings‘, function(greeting) {
showGreeting(JSON.parse(greeting.body));
});
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
setConnected(false);
}
function sendName() {
stompClient.send("/app/hello", {}, JSON.stringify({
‘name‘ : $("#name").val(),
‘content‘ : $("#content").val()
}));
}
function showGreeting(message) {
$("#greetings").append(
"<div>" + message.name + ":" + message.content + "</div>");
}
$(function() {
$("#connect").click(function() {
connect();
});
$("#disconnect").click(function() {
disconnect();
});
$("#send").click(function() {
sendName();
});
});代码解释：
（1）连接成功后，订阅地址为”/user/queue/chat”，该地址比服务端配置的地址多了”/user”前缀，这是因为，SimpMessagingTemplate类中自动添加了路径前缀
（2）聊天消息发送路径为”/app/chat”
（3）发送的消息内容中有一个to字段，该字段用来描述消息发送的目标用户
Spring Boot整合WebSocket及Spring Security实例
原文：https://blog.51cto.com/13501268/2403079