?springboot篇章整體欄目：?
【一】springboot整合swagger（超詳細
【二】springboot整合swagger（自定義）（超詳細）
【三】springboot整合token（超詳細）
【四】springboot整合mybatis-plus（超詳細）（上）
【五】springboot整合mybatis-plus（超詳細）（下）
【六】springboot整合自定義全局異常處理
【七】springboot整合redis（超詳細）
【八】springboot整合AOP實現(xiàn)日志操作（超詳細）
【九】springboot整合定時任務（超詳細）
【十】springboot整合redis實現(xiàn)啟動服務即將熱點數(shù)據(jù)保存在全局以及redis（超詳細）
【十一】springboot整合quartz實現(xiàn)定時任務優(yōu)化（超詳細）
【十二】springboot整合線程池解決高并發(fā)（超詳細,保你理解）
【十三】springboot整合異步調(diào)用并獲取返回值（超詳細）
【十四】springboot整合WebService（超詳細）
【十五】springboot整合WebService（關(guān)于傳參數(shù)）（超詳細）
【十六】springboot整合WebSocket（超詳細）
【十七】springboot整合WebSocket實現(xiàn)聊天室（超詳細）
【十八】springboot實現(xiàn)自定義全局異常處理
【十九】springboot整合ElasticSearch實戰(zhàn)（萬字篇）
【二十】springboot整合過濾器實戰(zhàn)
【二十一】springboot整合攔截器實戰(zhàn)并對比過濾器
【二十二】springboot整合activiti7（1） 實戰(zhàn)演示篇
【二十三】springboot整合spring事務詳解以及實戰(zhàn)
【二十四】springboot使用EasyExcel和線程池實現(xiàn)多線程導入Excel數(shù)據(jù)
【二十五】springboot整合jedis和redisson布隆過濾器處理緩存穿透
介紹：接下來我會把學習階段學到的框架等知識點進行整合，每一次整合是在前一章的基礎上進行的，所以后面的整合不會重復放前面的代碼。每次的demo我放在結(jié)尾，本次是接著上一章的內(nèi)容延續(xù)的，只增加新增的或者修改的代碼。
最終效果展示：
在上一章對WebService進行了整合，本章將對WebSocket進行整合，后面會寫兩個小demo，本章將寫一個進度條demo，后面會寫一個聊天室demo。
WebSocket：用我自己的話來描述就是，正常的前后端使用是前端寫一個請求，請求接口，每次想要某一個接口的數(shù)據(jù)，都需要去請求他一次，這是正常的流程，但是使用WebSocket，可以實現(xiàn)一次請求之后，前端跟該接口的連接關(guān)系一直都在，后端接口可以主動返回數(shù)據(jù)到前端。
qq交流群導航——>231378628
下面開始展示一步一步實現(xiàn)這個demo
還是先展示一下目錄結(jié)構(gòu)，如下：
框選出來的部分是這章新增的或者修改到的部分。
第一步：導入依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>相比前面的章節(jié)，新增了websocket的依賴。
編寫后端：
第二步：編寫WebSocketConfig配置類
第三步：編寫WebSocket類
//注冊成組件
@Component
//定義websocket服務器端，它的功能主要是將目前的類定義成一個websocket服務器端。注解的值將被用于監(jiān)聽用戶連接的終端訪問URL地址
@ServerEndpoint("/websocket")
//如果不想每次都寫private final Logger logger = LoggerFactory.getLogger(當前類名.class); 可以用注解@Slf4j;可以直接調(diào)用log.info
@Slf4j
public class WebSocket {
//實例一個session，這個session是websocket的session
private Session session;
//存放websocket的集合（本次demo不會用到，聊天室的demo會用到）
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
//前端請求時一個websocket時
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
log.info("【websocket消息】有新的連接, 總數(shù):{}", webSocketSet.size());
}
//前端關(guān)閉時一個websocket時
@OnClose
public void onClose() {
webSocketSet.remove(this);
log.info("【websocket消息】連接斷開, 總數(shù):{}", webSocketSet.size());
}
//前端向后端發(fā)送消息
@OnMessage
public void onMessage(String message) {
log.info("【websocket消息】收到客戶端發(fā)來的消息:{}", message);
}
//新增一個方法用于主動向客戶端發(fā)送消息
public static void sendMessage(String message) {
for (WebSocket webSocket: webSocketSet) {
log.info("【websocket消息】廣播消息, message={}", message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}?有關(guān)方法和參數(shù)的描述代碼里有簡單寫到。
第四步：改造控制器
編寫一個接口方法，調(diào)用websocket的sendMessage方法，如下：
我是寫在以前的codeController里面的，先注入websocket，再新增一個接口方法，如下：
ApiOperation注解是整合的swagger后的注解，沒有跟著前面的章節(jié)整合不需要加，為了顯示效果，我增加了一個線程睡眠0.1秒再累加，返回前端。
注意：若前面跟著一起整合了token，直接訪問該接口不行，要么請求時帶上登錄接口返回的token，要么放行該接口，為了簡單，此處我直接放行的該接口，若未整合token，則不需要管，放行方式如下：
在該配置類下面的該方法增加如圖所示（未整合token不需要管）。
到此后端完畢，開始編寫前端代碼。
編寫前端：
第五步：編寫前端代碼
<!DOCTYPE HTML>
<html>
<head>
<title>進度條</title>
<link rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="progress" style="width: 60%;height: 60px;margin: 0 auto;margin-top: 150px;">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="message"></div>
<input type="button" name="" id="btn" value="開始" />
</body>
<script type="text/javascript">
var websocket = null;
//判斷當前瀏覽器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://localhost:8089/websocket");
}else{
alert('Not support websocket')
}
//連接發(fā)生錯誤的回調(diào)方法
websocket.onerror = function(){
setMessageInnerHTML("發(fā)生錯誤");
};
//連接成功建立的回調(diào)方法
websocket.onopen = function(event){
setMessageInnerHTML("建立連接");
}
//接收到消息的回調(diào)方法
websocket.onmessage = function(event){
console.log(event.data)
// setMessageInnerHTML(event.data);
$(".progress-bar").attr("style","width:"+event.data+"%")
}
//連接關(guān)閉的回調(diào)方法
websocket.onclose = function(){
setMessageInnerHTML("關(guān)閉連接");
}
//監(jiān)聽窗口關(guān)閉事件，當窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
window.onbeforeunload = function(){
alert("已關(guān)閉連接");
websocket.close();
}
//將消息顯示在網(wǎng)頁上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//關(guān)閉連接
function closeWebSocket(){
alert("已關(guān)閉連接");
websocket.close();
}
//開始
$("#btn").click(function(){
$.ajax({
url: "http://localhost:8089/codeController/jinDuTiao",
type:'post',
success: function(HTML) {//返回頁面內(nèi)容
console.log(HTML);
}
});
})
</script>
</html>解釋：
1、
var websocket = null;
?
??? //判斷當前瀏覽器是否支持WebSocket
??? if('WebSocket' in window){
??????? websocket = new WebSocket("ws://localhost:8089/websocket");
??? }else{
??????? alert('Not support websocket')
??? }首先建立websocket連接。
注意：此處的地址的ws://是固定寫法，后面加上你的ip+端口+WebSocket的ServerEndpoint注解配置的路徑。
2、
//連接發(fā)生錯誤的回調(diào)方法
??? websocket.onerror = function(){
??????? setMessageInnerHTML("發(fā)生錯誤");
??? };
?
??? //連接成功建立的回調(diào)方法
??? websocket.onopen = function(event){
??????? setMessageInnerHTML("建立連接");
??? }
?
??? //接收到消息的回調(diào)方法
??? websocket.onmessage = function(event){
?? ??? ?console.log(event.data)
??????? // setMessageInnerHTML(event.data);
?? ??? ?$(".progress-bar").attr("style","width:"+event.data+"%")
??? }
?
??? //連接關(guān)閉的回調(diào)方法
??? websocket.onclose = function(){
??????? setMessageInnerHTML("關(guān)閉連接");
??? }都是websocket的固定寫法，幾個回調(diào)函數(shù)。
3、
//開始
?? ?$("#btn").click(function(){
?? ??? ?$.ajax({
?? ??? ??? ?url: "http://localhost:8089/codeController/jinDuTiao",
?? ??? ??? ?type:'post',
?? ??? ??? ?success: function(HTML) {//返回頁面內(nèi)容
?? ??? ??? ??? ? console.log(HTML);
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ?})開始按鈕，開始請求接口。
注意：此處為了樣式好看點，我導入了bootstrap。運行服務，打開網(wǎng)頁，會自動建立websocket連接，點擊開始。
第六步：演示
第七步：改造
為了體現(xiàn)后端主動向服務器傳數(shù)據(jù)，新增一個接口，如下：
將上面那個接口改成新增成一個定時執(zhí)行的，會發(fā)現(xiàn)，不點擊前端的開始按鈕，也會有效果，說明后端可以主動向客戶端發(fā)送數(shù)據(jù)。
到此，整合完畢。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-406245.html
本期整合到此完畢，接下來會繼續(xù)更新加強整合，盡情期待。
客戶端訪問地址：http://localhost:8090/swagger-ui.html或者http://localhost:8090/doc.html
demo地址：studydemo/整合swagger at main · zrc11/studydemo · GitHub
碼字不易，若幫到各位，幫忙三連，感謝
?文章來源：http://www.zghlxwxcb.cn/news/detail-406245.html
?
?
?
?
到了這里，關(guān)于【十六】springboot整合WebSocket（超詳細）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
