SpringBoot的WebSocket實現(xiàn)單聊群聊
本文實例為大家分享了SpringBoot的WebSocket實現(xiàn)單聊群聊,供大家參考,具體內(nèi)容如下
說在開頭
在HTTP協(xié)議中,所有的請求都是由客戶端發(fā)送給服務(wù)端,然后服務(wù)端發(fā)送請求
要實現(xiàn)服務(wù)器向客戶端推送消息有幾種methods:
1、輪詢
大量無效請求,浪費資源
2、長輪詢
有新數(shù)據(jù)再推送,但這會導(dǎo)致連接超時,有一定隱患
3、Applet和Flash
過時,安全隱患,兼容性不好
消息群發(fā)
創(chuàng)建新項目:
添加依賴:
<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>
創(chuàng)建WebSocket配置類:WebSocketConfig
@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,用來連接 } }
創(chuàng)建Bean
/** * 群消息類 */ public class Message { private String name; private String content; //省略getter& setter }
定義controller的方法:
/** * MessageMapping接受前端發(fā)來的信息 * SendTo 發(fā)送給信息WebSocket消息代理,進(jìn)行廣播 * @param message 頁面發(fā)來的json數(shù)據(jù)封裝成自定義Bean * @return 返回的數(shù)據(jù)交給WebSocket進(jìn)行廣播 * @throws Exception */ @MessageMapping("/hello") @SendTo("/topic/greetings") public Message greeting(Message message) throws Exception { return message; }
<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; } //創(chuàng)建SockJs實例,建立連接 var sockJS = new SockJS("/chat"); //創(chuàng)建stomp實例進(jìn)行發(fā)送連接 stompClient = Stomp.over(sockJS); stompClient.connect({}, function (frame) { setConnected(true); //訂閱服務(wù)端發(fā)來的信息 stompClient.subscribe("/topic/greetings", function (greeting) { //將消息轉(zhuǎn)化為json格式,調(diào)用方法展示 showGreeting(JSON.parse(greeting.body)); }); }); } //斷開連接 function disconnect() { if (stompClient !== null) { stompClient.disconnect(); } setConnected(false); } //發(fā)送信息 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="聊天內(nèi)容"> </div> <button id="send" type="button">發(fā)送</button> <div id="greetings"> <div id="conversation" style="display: none;">群聊進(jìn)行中</div> </div> </div> </body> </html>
私聊
既然是私聊,就要有對象目標(biāo),也是用戶,可以用SpringSecurity引入
所以添加額外依賴:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency>
配置SpringSecurity
@Configuration public 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"
@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,用來連接 } }
創(chuàng)建Bean:
public class Chat { private String to; private String from; private String content; //省略getter& setter }
添加controller方法:
/** * 點對點發(fā)送信息 * @param principal 當(dāng)前用戶的信息 * @param chat 發(fā)送的信息 */ @MessageMapping("chat") public void chat(Principal principal, Chat chat) { //獲取當(dāng)前對象設(shè)置為信息源 String from = principal.getName(); chat.setFrom(from); //調(diào)用convertAndSendToUser("用戶名","路徑","內(nèi)容"); simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat); }
創(chuàng)建頁面:
<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> 請輸入聊天內(nèi)容 <input type="text" id="content" placeholder="聊天內(nèi)容"> <input type="text" id="to" placeholder="目標(biāo)用戶"> <button type="button" id="send">發(fā)送</button> </div> </div> </body> </html>
暫結(jié)!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Spring中@Controller和@RestController的區(qū)別詳解
這篇文章主要介紹了Spring中@Controller和@RestController的區(qū)別詳解,@RestController?是?@Controller?和?@ResponseBody?的結(jié)合體,單獨使用?@RestController?的效果與?@Controller?和?@ResponseBody?二者同時使用的效果相同,需要的朋友可以參考下2023-10-10在SpringBoot項目中使用Java8函數(shù)式接口的方法示例
在Spring Boot項目中,Java 8 的函數(shù)式接口廣泛用于實現(xiàn)各種功能,如自定義配置、數(shù)據(jù)處理等,函數(shù)式接口在Spring Boot中非常有用,本文展示了在SpringBoot項目中使用Java8的函數(shù)式接口的方法示例,需要的朋友可以參考下2024-03-03Java ArrayList中存放引用數(shù)據(jù)類型的方式
這篇文章主要介紹了Java ArrayList中存放引用數(shù)據(jù)類型的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-10-10SpringBoot監(jiān)聽?wèi)?yīng)用程序啟動的生命周期事件的四種方法
在 Spring Boot 中,監(jiān)聽?wèi)?yīng)用程序啟動的生命周期事件有多種方法,本文給大家就介紹了四種監(jiān)聽?wèi)?yīng)用程序啟動的生命周期事件的方法,并通過代碼示例講解的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-07-07說一說java關(guān)鍵字final和transient
這篇文章主要和大家說一說java關(guān)鍵字final和transient,感興趣的小伙伴們可以參考一下2016-06-06