SpringBoot-2.1.1系列二：使用websocket
阿新 • • 發佈：2018-12-17
1.什麼是websocket？
WebSocket協議是基於TCP的一種新的網路協議。它實現了瀏覽器與伺服器全雙工(full-duplex)通訊——允許伺服器主動傳送資訊給客戶端。
2.為什麼需要使用websocket？
之前遊覽器想獲取伺服器資料，只有不斷髮起請求，輪詢獲取。既效率低下，資料時效性也得不到保障。如果伺服器能主動向客戶端推送訊息，這樣就完美了。在這種想法下，websocket誕生了！
3.怎樣使用websocket？
3.1.使用maven引入jar依賴
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
3.2.編寫配置類
首先建立伺服器端點bean
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}再編寫具體的端點請求處理類
package com.chenyuwen.demo; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/websocket") @Component public class WebSocket { private static final Logger log = LoggerFactory.getLogger(WebSocket.class); /** * 連線建立成功呼叫的方法 * @param session */ @OnOpen public void onOpen(Session session) { log.info("建立連線"); } /** * 連線關閉呼叫的方法 */ @OnClose public void onClose() { log.info("連線關閉"); } /** * 收到客戶端訊息後呼叫的方法 * @param session * @param message 客戶端傳送過來的訊息 */ @OnMessage public void onMessage(Session session, String message) { log.info("收到訊息：{}", message); } /** * 發生錯誤時呼叫 * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { log.error("發生錯誤", error); } }
3.3.前端js編寫
<!DOCTYPE HTML> <html> <head> <title>My WebSocket</title> </head> <body> Welcome<br/> <input id="text" type="text"/> <button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button> <div id="message"> </div> </body> <script type="text/javascript"> var websocket = null; //判斷當前瀏覽器是否支援WebSocket if ('WebSocket' in window) { //使用http只需ws://,使用https則為wss:// websocket = new WebSocket("wss://localhost/websocket"); } else { alert('Not support websocket') } //連線發生錯誤的回撥方法 websocket.onerror = function () { setMessageInnerHTML("error"); }; //連線成功建立的回撥方法 websocket.onopen = function (event) { setMessageInnerHTML("open"); } //接收到訊息的回撥方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); } //連線關閉的回撥方法 websocket.onclose = function () { setMessageInnerHTML("close"); } //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。 window.onbeforeunload = function () { websocket.close(); } //將訊息顯示在網頁上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //關閉連線 function closeWebSocket() { websocket.close(); } //傳送訊息 function send() { var message = document.getElementById('text').value; websocket.send(message); } </script> </html>
3.4.檢視效果
當我們進入頁面時，控制檯會輸出：
當我們輸入“hello world！”並點選“Send”傳送時：
控制檯會輸出：
當點選“Close”關閉連線時：
以上即實現了websocket在springboot中的簡單使用。