Wie SpringBoot WebSocket zum Senden von Gruppennachrichten verwendet

WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung, das vom W3C als Standard festgelegt wurde. Durch die Verwendung von WebSocket wird der Datenaustausch zwischen Client und Server erheblich vereinfacht. Im WebSocket-Protokoll müssen der Browser und der Server nur einen Handshake durchführen, und für die bidirektionale Datenübertragung kann direkt eine dauerhafte Verbindung zwischen beiden hergestellt werden.

Funktionen

• Wenn Sie WebSocket verwenden, müssen Sie zuerst eine Verbindung erstellen, wodurch Websocket zu einem zustandsbehafteten Protokoll wird. Einige Statusinformationen (z. B. Identitätsauthentifizierung usw.) können im Folgenden weggelassen werden Kommunikationsprozess.

• WebSocket-Verbindungen werden auf Port 80 (ws) oder 443 (wss) erstellt, dem gleichen Port, der auch von HTTP verwendet wird, sodass WebSocket-Verbindungen grundsätzlich nicht von allen Firewalls blockiert werden.

• WebSocket verwendet das HTTP-Protokoll für Handshakes, sodass es ohne zusätzliche Kosten auf natürliche Weise in Webbrowser und HTTP-Server integriert werden kann.

• Heartbeat-Nachrichten (Ping und Pong) werden wiederholt gesendet, um die WebSocket-Verbindung aktiv zu halten.

• Mit diesem Protokoll können sowohl der Server als auch der Client erkennen, wann eine Nachricht initiiert wird oder eintrifft.

• WebSocket sendet eine spezielle Abschlussnachricht, wenn die Verbindung geschlossen wird.

• WebSocket unterstützt domänenübergreifend und kann Ajax-Einschränkungen vermeiden.

• Die HTTP-Spezifikation erfordert, dass Browser die Anzahl gleichzeitiger Verbindungen auf zwei Verbindungen pro Hostnamen begrenzen. Wenn wir jedoch Websocket verwenden, besteht diese Beschränkung nach Abschluss des Handshakes nicht, da die Verbindungen zu diesem Zeitpunkt nicht mehr vorhanden sind ist die HTTP-Verbindung.

• Das WebSocket-Protokoll unterstützt Erweiterungen. Benutzer können das Protokoll erweitern und einige benutzerdefinierte Unterprotokolle implementieren.

• WebSocket bietet eine bessere Binärunterstützung und eine bessere Komprimierung.

1. Abhängigkeiten hinzufügen

<dependency>
    <groupid>org.springframework.boot</groupid>
    <artifactid>spring-boot-starter-websocket</artifactid>
</dependency>

2. WebSocket konfigurieren

Das Spring-Framework bietet STOMP-Unterstützung basierend auf WebSocket, einem einfachen interoperablen Protokoll, das normalerweise über einen Zwischenserver verwendet wird .

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 设置消息代理的前缀，如果消息的前缀为"/topic"，就会将消息转发给消息代理（broker）
        // 再由消息代理广播给当前连接的客户端
        config.enableSimpleBroker("/topic");
        // 下面方法可以配置一个或多个前缀，通过这些前缀过滤出需要被注解方法处理的消息。
        // 例如这里表示前缀为"/app"的destination可以通过@MessageMapping注解的方法处理
        // 而其他 destination（例如"/topic""/queue"）将被直接交给 broker 处理
        config.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 定义一个前缀为"/chart"的endpoint，并开启 sockjs 支持。
        // sockjs 可以解决浏览器对WebSocket的兼容性问题，客户端将通过这里配置的URL建立WebSocket连接
        registry.addEndpoint("/chat").withSockJS();
    }
}

3. Servercode

Gemäß der Konfiguration von WebSocketConfig wird die mit @MessageMapping("/hello") annotierte Methode zum Empfangen von Nachrichten verwendet, die vom Pfad "/app/hello" in der Annotation gesendet werden Methode: Nachdem die Nachricht verarbeitet wurde, wird sie an den durch @SendTo definierten Pfad weitergeleitet. Der @SendTo-Pfad ist ein Pfad mit dem Präfix „/topic“, sodass die Nachricht an den Nachrichtenbroker übergeben und dann vom Broker gesendet wird.

@Controller
public class DemoController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }

}

@Data
public class Message {

    private String name;
    
    private String content;

}

4. Front-End-Code

Erstellen Sie die Seite chat.html im Verzeichnis resources/static als Chat-Seite.

nbsp;html>


    <meta>
    <title>群聊</title>
    <script></script>
    <script></script>
    <script></script>
    <script>
        var stompClient = null;

        // 根据是否已连接设置页面元素状态
        function setConnected(connected) {
            $("#connect").prop("disabled", connected);
            $("#disconnect").prop("disabled", !connected);
            if (connected) {
                $("#conversation").show();
                $("#chat").show();
            }
            else {
                $("#conversation").hide();
                $("#chat").hide();
            }
            $("#greetings").html("");
        }

        // 建立一个WebSocket连接
        function connect() {
            // 用户名不能为空
            if (!$("#name").val()) {
                return;
            }
            // 首先使用 SockJS 建立连接
            var socket = new SockJS(&#39;/chat&#39;);
            // 然后创建一个STOMP实例发起连接请求
            stompClient = Stomp.over(socket);
            // 连接成功回调
            stompClient.connect({}, function (frame) {
                // 进行页面设置
                setConnected(true);
                // 订阅服务端发送回来的消息
                stompClient.subscribe(&#39;/topic/greetings&#39;, function (greeting) {
                    // 将服务端发送回来的消息展示出来
                    showGreeting(JSON.parse(greeting.body));
                });
            });
        }

        // 断开WebSocket连接
        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            setConnected(false);
        }

        // 发送消息
        function sendName() {
            stompClient.send("/app/hello",
                {},
                JSON.stringify({&#39;name&#39;: $("#name").val(),&#39;content&#39;:$("#content").val()}));
        }

        // 将服务端发送回来的消息展示出来
        function showGreeting(message) {
            $("#greetings")
                .append("<div>" + message.name+":"+message.content + "");
        }

        // 页面加载后进行初始化动作
        $(function () {
            $( "#connect" ).click(function() { connect(); });
            $( "#disconnect" ).click(function() { disconnect(); });
            $( "#send" ).click(function() { sendName(); });
        });
    </script>


<div>
    <label>请输入用户名：</label>
    <input>
</div>
<div>
    <button>连接</button>
    <button>断开连接</button>
</div>
<div>
    <div>
        <label>请输入聊天内容：</label>
        <input>
    </div>
    <button>发送</button>
    <div>
        <div>群聊进行中...</div>
    </div>
</div>

• SockJS ist eine Browser-JavaScript-Bibliothek, die WebSocket-ähnliche Objekte bereitstellt. SockJS bietet Ihnen eine konsistente, browserübergreifende Javascript-API, die einen domänenübergreifenden Vollduplex-Kommunikationskanal mit geringer Latenz zwischen dem Browser und dem Webserver erstellt.

• STOMP steht für Simple (oder Streaming) Text Orientated Messaging Protocol. Es bietet ein interoperables Verbindungsformat, das STOMP-Clients die Interaktion mit jedem STOMP-Nachrichtenbroker (Broker) ermöglicht.

• @SendTo-Annotation, die die von der Methode verarbeitete Nachricht an den Broker weiterleitet und der Broker die Nachricht dann sendet. 5. Überprüfungsergebnisse

Das obige ist der detaillierte Inhalt vonWie SpringBoot WebSocket zum Senden von Gruppennachrichten verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!