Front-End- und Back-End-Interaktion von WebSocket

WebSocket erleichtert den Datenaustausch zwischen Client und Server, indem es dem Server ermöglicht, Daten aktiv an den Client zu übertragen. In der WebSocket-API müssen der Browser und der Server nur einen Handshake durchführen, und eine dauerhafte Verbindung kann direkt zwischen den beiden hergestellt und eine bidirektionale Datenübertragung durchgeführt werden.

Simulieren Sie tatsächliche Kampfszenarien: Das Backend sendet Alarminformationen über den Websocket an das Frontend, und das Frontend sendet einige Informationen an das Backend.

Backend-Websocket-bezogener Code:

 Darunter ist das Websocket-Paket der Konfigurationscode für Websockt, und der Job ist die Timing-Aufgabe, die für die Übermittlung der Alarmmeldung verantwortlich ist

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/websocket").setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyWebSocketHandler();
    }
}

Die WebSocketConfig-Klasse hört auf Anfragen von allen Domänen unter dem /websocket-Pfad. Bitte legen Sie dies in der tatsächlichen Entwicklung fest

AllowedOrigins ist der Domänenname der internen Frontend-Seite

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.HashSet;
import java.util.Set;

public class MyWebSocketHandler extends TextWebSocketHandler {

    public static Set<WebSocketSession> sessions = new HashSet<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
        session.sendMessage(new TextMessage("客户端连接成功"));
    }


    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message)
            throws Exception {
        System.out.println("收到消息: " + message.getPayload());
        session.sendMessage(new TextMessage("后端已经收到： " + message.getPayload()));

    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        sessions.remove(session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }
}

Die MyWebSocketHandler-Klasse erbt von AbstractWebSocketHandler

Es schreibt hauptsächlich die Vorgänge nach dem Herstellen der Verbindung und die Vorgänge nach dem Empfang der Front-End-Nachricht neu. Nach dem Übertragungsfehler oder dem Schließen der Verbindung entfernt der Sitzungspool die Sitzung.

import org.springframework.stereotype.Service;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;

import java.io.IOException;

@Service
public class WebscoketService {


    public void sendAllMessages(String text) throws IOException {
        for (WebSocketSession session : MyWebSocketHandler.sessions) {
            session.sendMessage(new TextMessage(text));
        }
    }
}

Die Serviceschicht sendet Nachrichten an alle Verbindungen im Sitzungspool.

import com.hn.managmentsystem.websocket.WebscoketService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import java.io.IOException;

@Component
public class AlarmPushJob {

    @Autowired
    private WebscoketService webscoketService;

    @Scheduled(cron = "*/5 * * * * ?")
    private void pushAlarm() throws IOException {
        System.out.println("开始执行");
        webscoketService.sendAllMessages("告警推送");
    }
}

Geplante Jobs übertragen

Frontend-Seitencode:

<html>
<script type="text/javascript">
    if ("WebSocket" in window) {
        var ws = new WebSocket("ws://localhost:18080/websocket");
        ws.onopen = function () {

        };

        ws.onmessage = function (evt) {
            document.getElementById('messageDiv').innerHTML += evt.data + "</br>";
        };

        ws.onclose = function () {
            console.log("close connect");
        };
    } else {
        alert("您的浏览器不支持 WebSocket!");
    }

    function send() {
        ws.send(document.getElementById("message").value);
    }
</script>

</head>
<body>
<a href="#" onclick="send();">发送消息</a>: <input id="message"/>
<div id="messageDiv"></div>
</body>
</html>

tatsächlicher Effekt: