?

首先是pom

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.5.RELEASE</version><relativePath /> <!-- lookup parent from repository --></parent><groupId>com.baidu.websocket</groupId><artifactId>websocket</artifactId><version>0.0.1-SNAPSHOT</version><name>websocket</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><version>1.2.3</version></dependency><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-core</artifactId><version>RELEASE</version></dependency><!-- 進(jìn)行頁面跳轉(zhuǎn) --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.1.0</version></dependency><!-- 熱部署 --><!-- devtools可以實現(xiàn)頁面熱部署（即頁面修改后會立即生效，這個可以直接在application.properties文件中配置spring.thymeleaf.cache=false來實現(xiàn)） --><!-- 實現(xiàn)類文件熱部署（類文件修改后不會立即生效），實現(xiàn)對屬性文件的熱部署。 --><!-- 即devtools會監(jiān)聽classpath下的文件變動，并且會立即重啟應(yīng)用（發(fā)生在保存時機），注意：因為其采用的虛擬機機制，該項重啟是很快的 --><!-- （1）base classloader （Base類加載器）：加載不改變的Class，例如：第三方提供的jar包。 --><!-- （2）restart classloader（Restart類加載器）：加載正在開發(fā)的Class。 --><!-- 為什么重啟很快，因為重啟的時候只是加載了在開發(fā)的Class，沒有重新加載第三方的jar包。 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><!-- optional=true, 依賴不會傳遞, 該項目依賴devtools; 之后依賴boot項目的項目如果想要使用devtools, 需要重新引入 --><optional>true</optional></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

?接下來是配置文件sockjs的配置文件

package com.baidu.websocket.config;import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer; import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; import org.springframework.web.socket.config.annotation.StompEndpointRegistry;/*** 配置WebSocket*/ @Configuration //注解開啟使用STOMP協(xié)議來傳輸基于代理(message broker)的消息,這時控制器支持使用@MessageMapping,就像使用@RequestMapping一樣 @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{@Override//注冊STOMP協(xié)議的節(jié)點(endpoint),并映射指定的urlpublic void registerStompEndpoints(StompEndpointRegistry registry) {//注冊一個STOMP的endpoint,并指定使用SockJS協(xié)議registry.addEndpoint("/endpointOyzc").setAllowedOrigins("*").withSockJS();}@Override//配置消息代理(Message Broker)public void configureMessageBroker(MessageBrokerRegistry registry) {//點對點應(yīng)配置一個/user消息代理，廣播式應(yīng)配置一個/topic消息代理,群發(fā)（mass），單獨聊天（alone）registry.enableSimpleBroker("/topic","/user","/mass","/alone");//點對點使用的訂閱前綴（客戶端訂閱路徑上會體現(xiàn)出來），不設(shè)置的話，默認(rèn)也是/user/registry.setUserDestinationPrefix("/user");}}

?接下來是Controller

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.handler.annotation.SendTo; import org.springframework.messaging.simp.SimpMessagingTemplate; import org.springframework.stereotype.Controller;import com.baidu.websocket.model.ChatRoomRequest; import com.baidu.websocket.model.ChatRoomResponse;@Controller public class qunfacontroller {@Autowiredprivate SimpMessagingTemplate template;//websocket前端向后端發(fā)送的地址@MessageMapping("/qunfamassage")//websocket后端向前端發(fā)送的地址@SendTo("/topic/getResponse")public ChatRoomResponse mass(ChatRoomRequest chatRoomRequest){//方法用于群發(fā)測試System.out.println("姓名是 = " + chatRoomRequest.getName());System.out.println("消息是 = " + chatRoomRequest.getChatValue());ChatRoomResponse response=new ChatRoomResponse();response.setName(chatRoomRequest.getName());response.setChatValue(chatRoomRequest.getChatValue());return response;} }

?接下來是ChatRoomResponse類

public class ChatRoomResponse {private String userId;private String name;private String chatValue;public String getUserId() {return userId;}public void setUserId(String userId) {this.userId = userId;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getChatValue() {return chatValue;}public void setChatValue(String chatValue) {this.chatValue = chatValue;} }

接下來是ChatRoomRequest類

public class ChatRoomRequest {private String userId;private String name;private String chatValue;public String getUserId() {return userId;}public void setUserId(String userId) {this.userId = userId;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getChatValue() {return chatValue;}public void setChatValue(String chatValue) {this.chatValue = chatValue;} }

接下來寫前端

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>這是一個群發(fā)的Message</title><style type="text/css"> * {margin: 0;padding: 0; }#top {text-align: center;margin-top: 10px; }#left {width: 700px;height: 600px;float: left;background: #dddddd;border: 1px solid #a1a1a1;;border-radius: 25px;margin-left: 30px;margin-top: 30px; }#right {width: 700px;height: 600px;float: right;background: #dddddd;border: 1px solid #a1a1a1;;border-radius: 25px;margin-right: 30px;margin-top: 30px; }#selectuser {text-align: center;margin-top: 10px; }#sendChatValue {width: 90%;height: 400px;margin-top: 20px;margin-right: 20px;margin-left: 20px;margin-bottom: 20px; }#input {text-align: center; }#message {margin-top: 20px;margin-left: 20px; }input {font-size: 15px;height: 30px;width: 50px;border-radius: 4px;border: 2px solid #c8cccf;color: #6a6f77; }select {font-size: 15px;height: 30px;border-radius: 4px;border: 2px solid #c8cccf;color: #6a6f77; } </style> </head> <body><!-- 頭部 --><div id="top"><h1>這是一個群發(fā)的Message</h1></div><div id="left"><div id="selectuser"><select id="selectName"><option value="1">請選擇發(fā)送用戶</option><option value="張三">張三</option><option value="李四">李四</option><option value="王五">王五</option><option value="小六">小六</option></select></div><div><textarea name="sendChatValue" id="sendChatValue"class="sendChatValue"></textarea><div id="input"><input type="button" name="sendMessage" id="sendMessage"class="btn btn-default" onclick="sendMassMessage()" value="發(fā)送"></div></div></div><div id="right"><div id="message"></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script><script type="text/javascript" src="js/qunfa.js" charset="utf-8"></script><script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script><script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script> </body> </html>

?接下來寫qunfa.js

var stompClient = null;//加載完瀏覽器后 調(diào)用connect（），打開雙通道 $(function(){//打開雙通道connect() })//強制關(guān)閉瀏覽器 調(diào)用websocket.close（）,進(jìn)行正常關(guān)閉 window.onunload = function() {disconnect() }//打開雙通道 function connect(){var socket = new SockJS('/endpointOyzc'); //連接SockJS的endpoint名稱為"endpointAric"stompClient = Stomp.over(socket);//使用STMOP子協(xié)議的WebSocket客戶端stompClient.connect({},function(frame){//連接WebSocket服務(wù)端console.log('Connected:' + frame);//廣播接收信息console.log('開始接受消息...');stompTopic();console.log('消息接受完畢');}); }//關(guān)閉雙通道 function disconnect(){if(stompClient != null) {stompClient.disconnect();}console.log("Disconnected"); }//廣播（一對多） function stompTopic(){console.log('進(jìn)入廣播接受模式...');//通過stompClient.subscribe訂閱/topic/getResponse 目標(biāo)(destination)發(fā)送的消息（廣播接收信息）stompClient.subscribe('/topic/getResponse',function(response){var message=JSON.parse(response.body);//展示廣播的接收的內(nèi)容接收var response = $("#message");response.append("<p>發(fā)消息的人是：<span style='color:#F00'>"+message.name+"&nbsp &nbsp</span>發(fā)送的信息是：<span style='color:#F00'>"+message.chatValue+"</span></p>");}); }//群發(fā)消息 function sendMassMessage(){var postValue={};var chatValue=$("#sendChatValue");var userName=$("#selectName").val();postValue.name=userName;postValue.chatValue=chatValue.val();if(userName==1||userName==null){alert("請選擇你是誰！");return;}if(chatValue==""||userName==null){alert("不能發(fā)送空消息！");return;}stompClient.send("/qunfamassage",{},JSON.stringify(postValue));chatValue.val("");console.log('消息已發(fā)出'); }

?

總結(jié)

以上是生活随笔為你收集整理的springboot+sockjs进行消息推送（群发）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。