Spring Boot の SockJS

Spring Boot には、SockJSWebSocket を実装するための互換性ソリューションがあります。SockJSこの記事では、の原理、使い方、サンプルコードを紹介します。

ここに画像の説明を挿入

SockJSとは何ですか

SockJSこれはブラウザとサーバー間の通信プロトコルであり、ブラウザとサーバーの間に HTTP に基づいた双方向通信チャネルを確立できます。SockJS主な役割は、WebSocket をサポートしていないブラウザでも WebSocket を使用できるように、WebSocket 互換性ソリューションを提供することです。

SockJSWebSocket 互換性レイヤーが実装されており、ブラウザーとサーバーの間に HTTP ベースの通信チャネルを確立し、このチャネルを通じて双方向通信を行うことができます。ブラウザがWebSocketをサポートしていない場合は、SockJS自動的にポーリングまたはロングポーリングに切り替わって通信します。

SockJS の原理

SockJSWebSocketの原理は、HTTPベースの通信チャネルを確立することでWebSocketの双方向通信を実現することです。ブラウザが WebSocket をサポートしている場合は、SockJSWebSocket を直接使用して通信しますが、ブラウザが WebSocket をサポートしていない場合は、SockJS自動的にポーリングまたはロングポーリングに切り替えて通信します。

を使用する場合は、まずクライアント側とサーバー側にそれぞれとを導入し、次にクライアント側でを介して接続を確立するSockJS必要があります。sockjs-client.jssockjs-servernew SockJS(url)SockJS

クライアントとサーバー間の通信はイベントベースであり、クライアントがメッセージを送信すると、サーバーはイベントをトリガーしてonmessage、メッセージをクライアントに送り返します。クライアントはメッセージを受信すると、onmessageイベントをトリガーし、受信したメッセージを処理します。

SockJSの使い方

使い方は非常に簡単SockJSで、Spring Boot では次の内容を構成ファイルに追加するだけです。

spring:
  websocket:
    enabled: true
    broker:
      relay-host: localhost
      relay-port: 61613
      user: guest
      password: guest
      relay-path: /stomp

localhost上記の設定は、WebSocket が有効であり、メッセージがのポートに送信され61613、guest/guestのユーザー名とパスワードが認証に使用され、/stompのパスがメッセージ送信に使用されることを示しています。

次に、クライアントで接続を確立しSockJS、onmessageイベントのコールバックメソッドを実装する必要があります。コードは以下のように表示されます:

var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({
    
    }, function(frame) {
    
    
    stompClient.subscribe('/topic/greetings', function(greeting){
    
    
        showGreeting(JSON.parse(greeting.body).content);
    });
});

上記のコードでは、パスnew SockJS('/gs-guide-websocket')を使用して接続を確立することを意味します。接続が成功した後に実行されるコールバックメソッドを示し、サブスクリプションの宛先を示します。コールバックメソッドは、メッセージが宛先にパブリッシュされるときにトリガーされます。/gs-guide-websocketSockJSstompClient.connect({}, function(frame){...})stompClient.subscribe('/topic/greetings', function(greeting){...})/topic/greetings

最後に、サーバー側でメッセージを送受信する機能を実装する必要があります。コードは以下のように表示されます:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    
    

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
    
    
        registry.enableStompBrokerRelay("/topic")
            .setRelayHost("localhost")
            .setRelayPort(61613)
            .setClientLogin("guest")
            .setClientPasscode("guest")
            .setSystemHeartbeatSendInterval(5000)
            .setSystemHeartbeatReceiveInterval(4000);
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
    
    
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }
}

上記のコードでは、@EnableWebSocketMessageBroker注釈は WebSocket メッセージブローカーが有効であること、configureMessageBrokerメソッドがメッセージブローカーの構成に使用されること、registerStompEndpointsメソッドがSockJSエンドポイントの登録に使用されることを示しています。

次に、コントローラーにメッセージの送受信機能を実装する必要があります。コードは以下のように表示されます:

@Controller
public class GreetingController {
    
    

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
    
    
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }

}

上記のコードにおいて、@MessageMapping("/hello")アノテーションは/hello宛先のメッセージを処理することを意味し、@SendTo("/topic/greetings")アノテーションは処理結果を/topic/greetings宛先に送信することを意味します。greetingこのメソッドはメッセージの処理ロジックを実装します。

サンプルコード

以下は、クライアントコードとサーバーコードを含む完全なサンプルコードです。

クライアントコード

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <script src="/webjars/sockjs-client/1.1.2/dist/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/dist/stomp.min.js"></script>
    <script src="/js/app.js"></script>
</head>
<body>
    <div>
        <label>What is your name?</label>
        <input type="text" id="name" />
        <button type="button" onclick="send()">Send</button>
    </div>
    <div id="greetings">
    </div>
</body>
</html>

var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({
    
    }, function(frame) {
    
    
    stompClient.subscribe('/topic/greetings', function(greeting){
    
    
        showGreeting(JSON.parse(greeting.body).content);
    });
});

function send() {
    
    
    var name = document.getElementById('name').value;
    stompClient.send("/app/hello", {
    
    }, JSON.stringify({
    
     'name': name }));
}

function showGreeting(message) {
    
    
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(message));
    document.getElementById('greetings').appendChild(div);
}

サーバー側のコード

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    
    

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
    
    
        registry.enableStompBrokerRelay("/topic")
            .setRelayHost("localhost")
            .setRelayPort(61613)
            .setClientLogin("guest")
            .setClientPasscode("guest")
            .setSystemHeartbeatSendInterval(5000)
            .setSystemHeartbeatReceiveInterval(4000);
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
    
    
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }
}

@Controller
public class GreetingController {
    
    

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
    
    
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }

}

public class HelloMessage {
    
    

    private String name;

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }

}

public class Greeting {
    
    

    private String content;

    public Greeting(String content) {
    
    
        this.content = content;
    }

    public String getContent() {
    
    
        return content;
    }

}

上記のコードは、単純なチャットルームを実装します。ユーザーは入力ボックスに自分の名前を入力し、送信ボタンをクリックしてメッセージをサーバーに送信します。サーバーは受信したメッセージを処理し、クライアントに送り返します。受信したニュース。複数のユーザーが同時にチャットルームを使用すると、各ユーザーは他のユーザーが送信したメッセージを見ることができます。

要約する

この記事では、 Spring Boot の原則を紹介しますSockJS。SockJS