WebSocket のフロントエンドとバックエンドの相互作用

WebSocket を使用すると、クライアントとサーバー間のデータ交換が容易になり、サーバーがアクティブにデータをクライアントにプッシュできるようになります。WebSocket APIでは、ブラウザとサーバーがハンドシェイクを完了するだけで、両者間で直接永続的な接続を確立し、双方向のデータ送信を行うことができます。

実際の戦闘シナリオをシミュレートします。バックエンドは WebSocket を通じてアラーム情報をフロントエンドにプッシュし、フロントエンドはバックエンドに情報を送信します。

バックエンド WebSocket 関連のコード:

このうち、websocket パッケージは websockt に関連する構成コードであり、ジョブはアラームメッセージのプッシュを担当するタイミングタスクです。



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();
    }
}

WebSocketConfig クラスは /websocket パス下のすべてのドメインからのリクエストをリッスンします。実際の開発時に設定してください。

AllowedOrigins は内部フロントエンド ページのドメイン名です。


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);
    }
}

MyWebSocketHandler クラスは AbstractWebSocketHandler を継承します。

主に接続確立後の操作とフロントエンドメッセージ受信後の操作を書き換えます。送信エラーまたは接続が閉じられた後、セッション プールはセッションを削除します。


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));
        }
    }
}

サービス層は、セッションプール内のすべての接続にメッセージをプッシュします。

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("告警推送");
    }
}

スケジュールされたジョブをプッシュします

フロントエンドページのコード:

<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>

実際の効果:

WebSocket のフロントエンドとバックエンドの相互作用

おすすめ