（本項目用的maven為IDEA創建springboot項目時常用的maven依賴）

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope><exclusions><exclusion><groupId>org.junit.vintage</groupId><artifactId>junit-vintage-engine</artifactId></exclusion></exclusions></dependency><!--下面兩個依賴為后添加的--><dependency><groupId>org.springframework</groupId><artifactId>spring-messaging</artifactId><version>5.2.12.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-websocket</artifactId><version>5.2.12.RELEASE</version></dependency>

1.先創建websocket的配置類? WebSocketConfig

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;@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {@Overridepublic void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {/** 路徑"/webSocket"被注冊為STOMP端點，對外暴露(允許跨域)，客戶端通過該路徑接入WebSocket服務* setAllowedOrigins("192.168.1.1") 這里添加的是允許訪問的站點 我這里寫成了*，就是允許所有的客戶端接入站點【不安全】** html中js創建socket對象時候 用的就是這里的"/webSocket"： var socket = new SockJS('/webSocket');*/stompEndpointRegistry.addEndpoint("/webSocket").setAllowedOrigins("*").withSockJS();}@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {/** 用戶可以訂閱來自"/topic"和"/user"的消息，* 在Controller中，可通過@SendTo注解指明發送目標，這樣服務器就可以將消息發送到 訂閱相關消息的客戶端 【所有人或者某個人】** 在本例子中，使用topic來達到群發效果，使用user進行一對一發送** 客戶端只可以訂閱這兩個前綴的主題*/registry.enableSimpleBroker("/topic", "/user");/** 客戶端發送過來的消息，需要以"/topic"為前綴，再經過Broker轉發給響應的Controller* 訂閱主題：'/topic/get/broadcast'* 推送方式：1.@SendTo("/topic/get/broadcast")* 2.ResponseMessage responseMessage = new ResponseMessage("hello everyone!");*/registry.setApplicationDestinationPrefixes("/topic");/** 一對一發送的前綴* 訂閱主題（html）：'/user/huoLaoShu/get/somebodyMessage'* 推送方式：1、@SendToUser("/get/somebodyMessage")* 2、messagingTemplate.convertAndSendToUser(userName, "/get/somebodyMessage", responseMessage);;*/registry.setUserDestinationPrefix("/user");} }

2.然后創建springboot項目??控制層? WsController? 【類中引用了兩個我自定義的bean：RequestMessage 和 ResponseMessage】

package org.xlx.websocket.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.messaging.simp.annotation.SendToUser; import org.springframework.messaging.simp.stomp.StompHeaderAccessor; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestBody; import org.xlx.websocket.bean.RequestMessage; import org.xlx.websocket.bean.ResponseMessage;@Controller @CrossOrigin public class WsController {/** 使用restful風格*/private final SimpMessagingTemplate messagingTemplate;/** 實例化Controller的時候，注入SimpMessagingTemplate*/@Autowiredpublic WsController(SimpMessagingTemplate messagingTemplate) {this.messagingTemplate = messagingTemplate;}/*** 廣播* @param message* @return*/@MessageMapping("/send/broadcast") //前臺發送廣播消息的時候, 地址為 /topic/send/broadcast@SendTo("/topic/get/broadcast") //前臺訂閱這個消息的時候 為 /topic/get/broadcast// 因為我html里傳過來的值為 {"name": "發送內容"} 所以接收的對象可以直接轉成我自己定義的bean RequestMessage// 【里面只有一個name屬性】 后續可以根據自己的業務邏輯修改自己需要的類public ResponseMessage broadcast(@RequestBody RequestMessage message, StompHeaderAccessor headerAccessor){//TODO 此處可以添加自己的業務邏輯// 將 message.getName() 通過廣播發送給所有訂閱了廣播的 在線客戶端ResponseMessage responseMessage = new ResponseMessage(message.getName());return responseMessage;}/*** 發送私聊* @param message* @param headerAccessor* @return*/@MessageMapping("/send/somebody") //前臺發送私聊消息的時候, 地址為 /topic/send/somebody 例如：stompClient.send("/topic/send/somebody", {"username": "xuelongxin"}, JSON.stringify({"data": message}));@SendToUser("/get/somebodyMessage") //前臺訂閱這個私聊消息的時候 為 /user/{userName}/get/somebodyMessage 例如： stompClient.subscribe('/user/xuelongxin/get/somebodyMessage', function (response) { 處理response }）public ResponseMessage sendSomebody(@RequestBody RequestMessage message,StompHeaderAccessor headerAccessor) {//獲取{"username": "huolaoshu"} 中的huolaoshu 確定私聊是給誰發的// 這里 headerAccessor.getNativeHeader("username") 的值是 ：[huolaoshu]// 至于為啥會有個中括號 我也不清楚String userName = headerAccessor.getNativeHeader("username").toString().replace("[","").replace("]","");//把消息放到responseMessage 后定向發送 給 huolaoshuResponseMessage responseMessage = new ResponseMessage(message.getName());messagingTemplate.convertAndSendToUser(userName, "/get/somebodyMessage", responseMessage);return responseMessage;} }

3.兩個自定義類：

public class RequestMessage {private String name;public String getName() {return name;} } public class ResponseMessage {private String responseMessage;public ResponseMessage(String responseMessage) {this.responseMessage = responseMessage;}public String getResponseMessage() {return responseMessage;} }

4.接下來是html+js文件

（1）guangbo.html

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"/><title>廣播式WebSocket</title> <!-- 附件 stomp支持js--><script src="js/sockjs.min.js"></script><script src="js/stomp.min.js"></script> </head> <!--頁面加載后 如果原來就有socket對象 就先斷開--> <body onload="disconnect()"> <!--檢測瀏覽器是否支持websocket --> <noscript><h2 style="color: #e80b0a;">Sorry，瀏覽器不支持WebSocket</h2></noscript> <div><div><!-- 創建并注冊 websocket 這里注冊的是廣播【本頁面連帶發送和接收廣播】--><button id="connect" onclick="connect();">連接</button><button id="disconnect" disabled="disabled" onclick="disconnect();">斷開連接</button></div><div id="conversationDiv"><label>輸入你的名字</label><input type="text" id="name"/><!-- 點擊發送后 就能發送廣播 --><button id="sendName" onclick="sendName();">發送</button><p id="response"></p></div> </div> <script type="text/javascript">var stompClient = null;//設置當前的連接狀態function setConnected(connected) {document.getElementById("connect").disabled = connected;document.getElementById("disconnect").disabled = !connected;document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';document.getElementById("response").innerHTML = "";}//點擊連接 時候觸發的事件 【這個函數 除了更改自己url 或者添加自己的業務邏輯 一般不用修改 】function connect() {//創建socket對象 和服務器的 /webSocket 注冊連接var socket = new SockJS('/webSocket');stompClient = Stomp.over(socket);stompClient.connect({}, function () {setConnected(true);//注冊到springboot中controller中的廣播中 --》 @SendTo("/topic/get/broadcast")//和controller里的 @SendTo("/topic/get/broadcast") 相對應stompClient.subscribe('/topic/get/broadcast', function (response) {//這里獲取 從后臺 傳來的數據 然后使用下面的 showResponse（） 函數展示到頁面showResponse(JSON.parse(response.body).responseMessage);})});}//斷開連接function disconnect() {if (stompClient != null) {stompClient.disconnect();}setConnected(false);console.log('Disconnected');}//發送私聊function sendName() {var name = document.getElementById("name").value;stompClient.send("/topic/send/broadcast", {}, JSON.stringify({"name": name}));}//展示 返回的消息function showResponse(message) {document.getElementById("response").innerHTML = message;} </script> </body> </html>

（2）siliao.html

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"/><title>廣播式WebSocket</title><!-- 附件 stomp支持js--><script src="js/sockjs.min.js"></script><script src="js/stomp.min.js"></script> </head> <!--頁面加載后 如果原來就有socket對象 就先斷開--> <body onload="disconnect()"> <!--檢測瀏覽器是否支持websocket --> <noscript><h2 style="color: #e80b0a;">Sorry，瀏覽器不支持WebSocket</h2></noscript> <div><div><!-- 創建并注冊 websocket 這里注冊的是廣播【本頁面連帶發送和接收廣播】--><button id="connect" onclick="connect();">連接</button><button id="disconnect" disabled="disabled" onclick="disconnect();">斷開連接</button></div><div id="conversationDiv"><label>輸入你的名字</label><input type="text" id="name"/><!-- 點擊發送后 就能發送私信--><button id="sendName" onclick="sendName();">發送</button><p id="response"></p></div> </div> <script type="text/javascript">var stompClient = null;//設置當前的連接狀態function setConnected(connected) {document.getElementById("connect").disabled = connected;document.getElementById("disconnect").disabled = !connected;document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';document.getElementById("response").innerHTML = "";}//點擊連接 時候觸發的事件 【這個函數 除了更改自己url 或者添加自己的業務邏輯 一般不用修改 】function connect() {//創建socket對象 和服務器的 /webSocket 注冊連接var socket = new SockJS('/webSocket');stompClient = Stomp.over(socket);stompClient.connect({}, function () {setConnected(true);// 這里是向服務器注冊 這里的huolaoshu 就是給服務器說 凡是要發給huolaoshu的信息 都給我發過來 你可以修改成登錄者的id//和 controller里的 @SendToUser("/get/somebodyMessage") 相對應 前面的/user 和 WebSocketConfig類里的配置對應stompClient.subscribe('/user/huolaoshu/get/somebodyMessage', function (response) {//這里獲取 從后臺 傳來的數據 然后使用下面的 showResponse（） 函數展示到頁面showResponse(JSON.parse(response.body).responseMessage);})});}//斷開連接function disconnect() {if (stompClient != null) {stompClient.disconnect();}setConnected(false);console.log('Disconnected');}//發送私聊function sendName() {var name = document.getElementById("name").value;// 我這里只發送給了 huolaoshu 這個人[也就是我自己，這里為了好測試]，// 以后可以根據自己項目業務，改成某人的id，然后進行私發//后面的 JSON.stringify({"name": name}) 是要發送給服務器的私聊信息stompClient.send("/topic/send/somebody", {"username": "huolaoshu"}, JSON.stringify({"name": name}));}//展示 返回的消息function showResponse(message) {document.getElementById("response").innerHTML = message;} </script> </body> </html>

5.兩個html文件均引用了兩個js文件 【sockjs.min.js和stomp.min.js】因為這兩個js文件為第三方提供的庫，太長，這里我提供下載地址：sockjs.min.js+stomp.min.js-Javascript文檔類資源-CSDN下載sockjs.min.js+stomp.min.jshtml+js實現websocket的第更多下載資源、學習資料請訪問CSDN下載頻道.https://download.csdn.net/download/q18792880831/85547431。

6.下面附上項目 目錄

?7.實現的簡單效果：

【廣播】

?

?【私聊】

8.各種解釋已經寫在代碼注釋里了，這里主要是實現了 用springboot作為后臺，html+js為前臺，實現簡單的廣播 和 私聊 功能，私聊這里我只是發送給了我自己? ?大家可以試試 多注冊幾個不同的用戶【最簡單的就是再新建幾個siliao.html? 然后修改里面的

stompClient.subscribe('/user/huolaoshu/get/somebodyMessage', function (response) {xxxxxx}

huolaoshu 然后只私發給huolaoshu? 看看其他人是否能收到消息】大家可以多做嘗試 ，如果對以上代碼有任何疑問的，歡迎在評論區留言。

總結

以上是生活随笔為你收集整理的java+js+html 实现webSocket广播及私聊的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。