server:
port: 9908
3.WebSocketConfig.java
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
/**
-
@Author JCccc
-
@Description EnableWebSocketMessageBroker-注解開啟STOMP協(xié)議來傳輸基于代理的消息，此時(shí)控制器支持使用@MessageMapping
-
@Date 2021/6/30 8:53
*/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
//topic用來廣播，user用來實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)
config.enableSimpleBroker(“/topic”, “/user”);
}
/**
-
開放節(jié)點(diǎn)
-
@param registry
*/
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
//注冊(cè)兩個(gè)STOMP的endpoint，分別用于廣播和點(diǎn)對(duì)點(diǎn)
//廣播
registry.addEndpoint(“/publicServer”).setAllowedOrigins(“*”).withSockJS();
//點(diǎn)對(duì)點(diǎn)
registry.addEndpoint(“/privateServer”).setAllowedOrigins(“*”).withSockJS();
}
}
4.推送消息的實(shí)體類?Message.java
/**
-
@Author JCccc
-
@Description
-
@Date 2021/8/20 9:26
*/
public class Message {
/**
- 消息編碼
*/
private String code;
/**
- 來自（保證唯一）
*/
private String form;
/**
- 去自（保證唯一）
*/
private String to;
/**
- 內(nèi)容
*/
private String content;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getForm() {
return form;
}
public void setForm(String form) {
this.form = form;
}
public String getTo() {
return to;
}
public void setTo(String to) {
this.to = to;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
5.前端簡(jiǎn)單調(diào)試頁(yè)面
① publicExample.html 監(jiān)聽廣播消息的測(cè)試頁(yè)面
Seems your browser doesn’t support Javascript! Websocket relies on Javascript being
enabled. Please enable
Javascript and reload this page!
連接廣播頻道
Connect
取消連接
Disconnect
廣播消息
Send
接收到的消息:
簡(jiǎn)析：
趁熱打鐵，我們模擬系統(tǒng)后端給前端推送廣播消息，通過接口模擬：
TestController.java
/**
-
@Author JCccc
-
@Description
-
@Date 2021/8/20 8:53
*/
@Controller
public class TestController {
@Autowired
public SimpMessagingTemplate template;
/**
-
廣播
-
@param msg
*/
@ResponseBody
@RequestMapping(“/pushToAll”)
public void subscribe( @RequestBody Message msg) {
template.convertAndSend(“/topic/all”, msg.getContent());
}
}
簡(jiǎn)析：
我們推送消息，直接用?SimpMessagingTemplate ，
用的是convertAndSend 廣播方式推送到對(duì)于的主題目的地 destination 。
（可以看到其實(shí)還有convertAndSendToUser ，不著急，后面會(huì)說，這是發(fā)送給某個(gè)連接用戶的）
直接把項(xiàng)目跑起來，打開頁(yè)面開始測(cè)試：
我們先點(diǎn)擊connect ，連接成功：
可以看到實(shí)際上stomp.min.js 最終也是轉(zhuǎn)化成為 ws/wss這種方式成功連接：
調(diào)用測(cè)試接口，推送廣播消息：
在console其實(shí)也能看到：
廣播功能就到這，接下來是 點(diǎn)對(duì)點(diǎn)。
前端頁(yè)面：
privateExample.html
Seems your browser doesn’t support Javascript! Websocket relies on Javascript being
enabled. Please enable
Javascript and reload this page!
連接用戶
自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進(jìn)入阿里一直到現(xiàn)在。
深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長(zhǎng)或者是報(bào)班學(xué)習(xí)，但對(duì)于培訓(xùn)機(jī)構(gòu)動(dòng)則幾千的學(xué)費(fèi)，著實(shí)壓力不小。自己不成體系的自學(xué)效果低效又漫長(zhǎng)，而且極易碰到天花板技術(shù)停滯不前！
因此收集整理了一份《2024年Web前端開發(fā)全套學(xué)習(xí)資料》，初衷也很簡(jiǎn)單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。
既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗(yàn)的小伙伴深入學(xué)習(xí)提升的進(jìn)階課程，基本涵蓋了95%以上前端開發(fā)知識(shí)點(diǎn)，真正體系化！
由于文件比較大，這里只是將部分目錄截圖出來，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且會(huì)持續(xù)更新！
如果你覺得這些內(nèi)容對(duì)你有幫助，可以掃碼獲?。。。▊渥ⅲ呵岸耍?/strong>
最后
一個(gè)好的心態(tài)和一個(gè)堅(jiān)持的心很重要，很多沖著高薪的人想學(xué)習(xí)前端，但是能學(xué)到最后的沒有幾個(gè)，遇到困難就放棄了，這種人到處都是，就是因?yàn)橛械臇|西難，所以他的回報(bào)才很大，我們?cè)u(píng)判一個(gè)前端開發(fā)者是什么水平，就是他解決問題的能力有多強(qiáng)。
分享一些簡(jiǎn)單的前端面試題以及學(xué)習(xí)路線給大家，狂戳這里即可免費(fèi)領(lǐng)取
收集整理了一份《2024年Web前端開發(fā)全套學(xué)習(xí)資料》，初衷也很簡(jiǎn)單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。**
[外鏈圖片轉(zhuǎn)存中…(img-s36xuAIM-1712206379101)]
[外鏈圖片轉(zhuǎn)存中…(img-ZzwrEM3y-1712206379101)]
既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗(yàn)的小伙伴深入學(xué)習(xí)提升的進(jìn)階課程，基本涵蓋了95%以上前端開發(fā)知識(shí)點(diǎn)，真正體系化！
[外鏈圖片轉(zhuǎn)存中…(img-6VJZM56H-1712206379102)]
由于文件比較大，這里只是將部分目錄截圖出來，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且會(huì)持續(xù)更新！
如果你覺得這些內(nèi)容對(duì)你有幫助，可以掃碼獲?。。。▊渥ⅲ呵岸耍?/strong>
最后
一個(gè)好的心態(tài)和一個(gè)堅(jiān)持的心很重要，很多沖著高薪的人想學(xué)習(xí)前端，但是能學(xué)到最后的沒有幾個(gè)，遇到困難就放棄了，這種人到處都是，就是因?yàn)橛械臇|西難，所以他的回報(bào)才很大，我們?cè)u(píng)判一個(gè)前端開發(fā)者是什么水平，就是他解決問題的能力有多強(qiáng)。
分享一些簡(jiǎn)單的前端面試題以及學(xué)習(xí)路線給大家，狂戳這里即可免費(fèi)領(lǐng)取
[外鏈圖片轉(zhuǎn)存中…(img-tmen1yzS-1712206379102)]文章來源：http://www.zghlxwxcb.cn/news/detail-857530.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-857530.html
到了這里，關(guān)于Springboot 整合 WebSocket ，使用STOMP協(xié)議 ，前后端整合實(shí)戰(zhàn) （一）(1)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
