做的項目中需要將后端提供的數據展示在前端頁面，一開始我是用JS的setInterval()方法，設置一個時間，每過時間發起一次ajax請求。雖然也能湊活着實現，但總感覺數據不是實時刷新的，而且還占用資源，所以學習WebSocke，並總結了一下，以下是本人總結的前后端WebSocke相關代碼：
一、后端：
1.pom.xml添加WebSocke依賴
<!-- SpringBoot Websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2.WebSocke配置類
@Configuration
public class WebSocketConfig {
/**
* 這個bean的注冊,用於掃描帶有@ServerEndpoint的注解成為websocket ,如果你使用外置的tomcat就
不需要該配置文件
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}3.WebSocke服務類
@ServerEndpoint(value = "/webSocket")//主要是將目前的類定義成一個websocket服務器端, 注解的值將被用於監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務器端
@Component
@EnableScheduling// cron定時任務
@Data
public class WebSocket {
private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);
/**
* 靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
*/
private static int onlineCount = 0;
/**
* concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
*/
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
/**
* 與某個客戶端的連接會話，需要通過它來給客戶端發送數據
*/
private Session session;
public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {
return webSocketSet;
}
public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {
WebSocket.webSocketSet = webSocketSet;
}
/**
* 從數據庫查詢相關數據信息,可以根據實際業務場景進行修改
*/
@Resource
private IndexService indexService;
private static IndexService indexServiceMapper;
@PostConstruct
public void init() {
WebSocket.indexServiceMapper = this.indexService;
}
/**
* 連接建立成功調用的方法
*
* @param session 會話
*/
@OnOpen
public void onOpen(Session session) throws Exception {
this.session = session;
webSocketSet.add(this);
//查詢當前在線人數
int nowOnline = indexServiceMapper.nowOnline();
this.sendMessage(JSON.toJSONString(nowOnline));
}
/**
* 收到客戶端消息后調用的方法
*
* @param message 客戶端發送過來的消息
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
logger.info("參數信息：{}", message);
//群發消息
for (WebSocket item : webSocketSet) {
try {
item.sendMessage(JSON.toJSONString(message));
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 連接關閉調用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
if (session != null) {
try {
session.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 發生錯誤時調用
*
* @param session 會話
* @param error 錯誤信息
*/
@OnError
public void onError(Session session, Throwable error) {
logger.error("連接異常！");
error.printStackTrace();
}
/**
* 發送信息
*
* @param message 消息
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 自定義消息推送、可群發、單發
*
* @param message 消息
*/
public static void sendInfo(String message) throws IOException {
logger.info("信息:{}", message);
for (WebSocket item : webSocketSet) {
item.sendMessage(message);
}
}
}
4.定時任務（為了給前端實時推送數據，我這里寫了個定時任務，定時任務我用的是cron表達式,不懂的同學可以上這個網址學習：cron表達式）
@Slf4j
@Component
public class IndexScheduled {
@Autowired
private IndexMapper indexMapper;
/**
* 每3秒執行一次
*/
//@Scheduled(cron = "0/3 * * * * ? ") //我這里暫時不需要運行這條定時任務，所以將注解注釋了，朋友們運行時記得放開注釋啊
public void nowOnline() {
System.err.println("********* 首頁定時任務執行 **************");
CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();
int nowOnline = indexMapper.nowOnline();
webSocketSet.forEach(c -> {
try {
c.sendMessage(JSON.toJSONString(nowOnline));
} catch (IOException e) {
e.printStackTrace();
}
});
System.err.println("/n 首頁定時任務完成.......");
}
}二、前端：
前端的代碼非常的簡單，直接上代碼。
<body class="gray-bg">
<div class="online">
<span class="online">測試在線人數：<span id="online"></span> 人</span>
</div>
<script th:inline="javascript">
let websocket = null;
let host = document.location.host;
//判斷當前瀏覽器是否支持WebSocket
if ('WebSocket' in window) {
//連接WebSocket節點
websocket = new WebSocket("ws://" + host + "/webSocket");
} else {
alert('瀏覽器不支持webSocket');
}
//連接發生錯誤的回調方法
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//連接成功建立的回調方法
websocket.onopen = function (event) {
setMessageInnerHTML("open");
};
//接收到消息的回調方法
websocket.onmessage = function (event) {
let data = event.data;
console.log("后端傳遞的數據:" + data);
//將后端傳遞的數據渲染至頁面
$("#online").html(data);
};
//連接關閉的回調方法
websocket.onclose = function () {
setMessageInnerHTML("close");
};
//監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = function () {
websocket.close();
};
//將消息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
};
//關閉連接
function closeWebSocket() {
websocket.close();
};
//發送消息
function send() {
let message = document.getElementById('text').value;
websocket.send(message);
};
</script>
</body>