本文實例為大家分享了SpringBoot的WebSocket實現單聊群聊，供大家參考，具體內容如下
說在開頭
在HTTP協議中，所有的請求都是由客戶端發送給服務端，然后服務端發送請求
要實現服務器向客戶端推送消息有幾種methods:
1、輪詢
大量無效請求，浪費資源
2、長輪詢
有新數據再推送，但這會導致連接超時，有一定隱患
3、Applet和Flash
過時，安全隱患，兼容性不好
消息群發
創建新項目:
添加依賴：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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> <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId></dependency> |
創建WebSocket配置類:WebSocketConfig
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@Configuration@EnableWebSocketMessageBroker//注解開啟webSocket消息代理public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置webSocket代理類 * @param registry */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic"); //代理消息的前綴 registry.setApplicationDestinationPrefixes("/app"); //處理消息的方法前綴 } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/chat").withSockJS(); //定義一個/chat前綴的endpioint,用來連接 }} |
創建Bean
|
1
2
3
4
5
6
7
8
|
/** * 群消息類 */public class Message { private String name; private String content;//省略getter& setter} |
定義controller的方法:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/** * MessageMapping接受前端發來的信息 * SendTo 發送給信息WebSocket消息代理，進行廣播 * @param message 頁面發來的json數據封裝成自定義Bean * @return 返回的數據交給WebSocket進行廣播 * @throws Exception */ @MessageMapping("/hello") @SendTo("/topic/greetings") public Message greeting(Message message) throws Exception { return message; } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<html lang="en"><head> <meta charset="UTF-8"> <title>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> var stompClient = null; //點擊連接以后的頁面改變 function setConnected(connection) { $("#connect").prop("disable",connection); $("#disconnect").prop("disable",!connection); if (connection) { $("#conversation").show(); $("#chat").show(); } else { $("#conversation").hide(); $("#chat").hide(); } $("#greetings").html(""); } //點擊連接按鈕建立連接 function connect() { //如果用戶名為空直接跳出 if (!$("#name").val()) { return; } //創建SockJs實例,建立連接 var sockJS = new SockJS("/chat"); //創建stomp實例進行發送連接 stompClient = Stomp.over(sockJS); stompClient.connect({}, function (frame) { setConnected(true); //訂閱服務端發來的信息 stompClient.subscribe("/topic/greetings", function (greeting) { //將消息轉化為json格式，調用方法展示 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(); }) }) </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">斷開連接</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> |
私聊
既然是私聊，就要有對象目標，也是用戶，可以用SpringSecurity引入
所以添加額外依賴：
|
1
2
3
4
|
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId></dependency> |
配置SpringSecurity
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@Configurationpublic class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Bean PasswordEncoder passwordEncoder(){ return new BCryptPasswordEncoder(); } @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { auth.inMemoryAuthentication() .withUser("panlijie").roles("admin").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi") .and() .withUser("suyanxia").roles("user").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi"); } @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .anyRequest().authenticated() .and() .formLogin() .permitAll(); }} |
在原來的WebSocketConfig配置類中修改：也就是多了一個代理消息前綴:"/queue"
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@Configuration@EnableWebSocketMessageBroker//注解開啟webSocket消息代理public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置webSocket代理類 * @param registry */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic","/queue"); //代理消息的前綴 registry.setApplicationDestinationPrefixes("/app"); //處理消息的方法前綴 } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/chat").withSockJS(); //定義一個/chat前綴的endpioint,用來連接 }} |
創建Bean:
|
1
2
3
4
5
6
|
public class Chat { private String to; private String from; private String content;//省略getter& setter} |
添加controller方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/*** 點對點發送信息* @param principal 當前用戶的信息* @param chat 發送的信息*/@MessageMapping("chat")public void chat(Principal principal, Chat chat) {//獲取當前對象設置為信息源String from = principal.getName();chat.setFrom(from);//調用convertAndSendToUser("用戶名","路徑","內容");simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat);} |
創建頁面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html lang="en"><head> <meta charset="UTF-8"> <title>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> var stompClient = null; function connect() { var socket = new SockJS("/chat"); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { stompClient.subscribe('/user/queue/chat', function (chat) { showGreeting(JSON.parse(chat.body)); }); }); } function sendMsg() { stompClient.send("/app/chat",{},JSON.stringify({'content' : $("#content").val(), 'to': $("#to").val()})); } function showGreeting(message) { $("#chatsContent").append("<div>" + message.from + ":" + message.content + "</div>"); } $(function () { connect(); $("#send").click(function () { sendMsg(); }); }); </script></head><body><div id="chat"> <div id="chatsContent"> </div> <div> 請輸入聊天內容 <input type="text" id="content" placeholder="聊天內容"> <input type="text" id="to" placeholder="目標用戶"> <button type="button" id="send">發送</button> </div></div></body></html> |
暫結！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/coding_deliver/article/details/109568091
