需求:頁面每分鐘獲取最新告警。
問題:最開始前端使用定時器每一分鐘去服務端取告警,這樣導致session永遠不會超時。
解決:使用websocket協議來推送告警。
pom中增加:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
增加配置類,使用ServerEndpoint創建websocket endpoint
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
後端具體實現類
@ServerEndpoint("/alarm")
@Component
@Slf4j
public class AlarmSocket {
@Autowired
IndexService indexService;
/**
* 用於存放所有在線客戶端
*/
private static Map<String, Session> clients = new ConcurrentHashMap<>();
@OnOpen
public void onOpen(Session session) {
log.info("有新的客戶端上線: {}", session.getId());
clients.put(session.getId(), session);
}
@OnClose
public void onClose(Session session) {
String sessionId = session.getId();
log.info("有客戶端離線: {}", sessionId);
clients.remove(sessionId);
}
@OnError
public void onError(Session session, Throwable throwable) {
String sessionId = session.getId();
if (clients.get(sessionId) != null) {
log.info("發生了錯誤,移除客戶端: {}", sessionId);
clients.remove(sessionId);
}
throwable.printStackTrace();
}
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到客戶端發來的消息: {}", message);
}
/**
* 每一分鐘羣發一次告警消息
*/
@Scheduled(cron="0 0/1 * * * ?")
private void sendAll() {
String msg=JSON.toJSONString(R.ok(indexService.getTopAlarm()));
for (Map.Entry<String, Session> sessionEntry : clients.entrySet()) {
try {
sessionEntry.getValue().getAsyncRemote().sendText(msg);
}catch (Exception e){
log.error("發送告警消息失敗,刪除session"+sessionEntry.getValue());
try {
clients.remove(sessionEntry.getKey());
}catch (Exception e1){
log.error("根據sessionId刪除失敗,清除sessionMap");
clients.clear();
}
}
}
}
}
前端代碼
function startSocket() {
let url='ws://localhost:8088/monitor/alarm';
//用於告警定時刷新,解決session不超時問題
var webSocket = null;
if ('WebSocket' in window) {
webSocket = new WebSocket(url);
}
else {
alert('Not support websocket')
}
webSocket.onerror = function (event) {
onError(event)
};
webSocket.onopen = function (event) {
onOpen(event)
};
webSocket.onmessage = function (event) {
onMessage(event)
};
function onMessage(event) {
var res = eval('(' + event.data + ')');
console.log(res);
}
function onOpen(event) {
console.log('Connection established');
start();
}
function onError(event) {
console.log('socket error==='+event.data);
}
function start() {
webSocket.send('你好');
return false;
}
}