Spring MVCでStompとSockJSエンドポイントを正しく設定する方法は？

Question

これは、 Websocket - InvalidStateError: The connection has not been established yetと重複している可能性があります。

通知システムを実装しています。ユーザーがログインしたときにソケット接続を初期化し、通知を表示したい場合や、イベントが発生した場合にも通知します。

マイコードスニペットは次のとおりです。

websocket.js：

var stompClient = null; 
function connect(temp) { 
    alert(temp); 
    //var socket = new SockJS("/websock"); 
    //var socket = new SockJS("/websock"+temp); 
    var socket = new SockJS(context_path+"/websock"+temp); 
    //context_path == "/SupportCenter" 
    stompClient = Stomp.over(socket); 
    stompClient.connect({}, function(frame){ 
     console.log("Connected :- "+frame); 
     stompClient.subscribe("/topic/notifications", function(notifications) { 
      alert(notifications); 
     }); 
    }, function(error) { 
     alert(error); 
    }); 
    alert(); 
    getNotifications(); 
} 

function getNotifications() { 
    stompClient.send("/app/hello", {}, "Hiiiiii"); 
} 

WebSocketConfig.java：

@Configuration 
@EnableWebSocketMessageBroker 
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { 

    /* (non-Javadoc) 
    * @see org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer#registerStompEndpoints(org.springframework.web.socket.config.annotation.StompEndpointRegistry) 
    */ 
    @Override 
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) { 
     stompEndpointRegistry.addEndpoint("/websock").withSockJS(); 
    } 
    @Override 
    public void configureMessageBroker(MessageBrokerRegistry config) { 
     // TODO Auto-generated method stub 
     config.enableSimpleBroker("/topic"); 
     config.setApplicationDestinationPrefixes("/app"); 
    } 
} 

WebSocketController.java：

@Controller 
public class WebSocketController { 

    @MessageMapping(value="/hello") 
    @SendTo("/topic/notifications") 
    public Notify hello() { 
     try { 
      Thread.sleep(2000); 
     } catch (InterruptedException e) { 
      // TODO Auto-generated catch block 
      e.printStackTrace(); 
     } 
     Notify notify = new Notify(); 
     notify.setMessage("Hello World !!!"); 
     return notify; 
    } 
} 

いくつかのコードHom.jsp：Networkタブでステータスコードは200 OKている間

<script type="text/javascript" src="<c:url value="/resources/js/sockjs.min.js"/>"></script> 
<script type="text/javascript" src="<c:url value="/resources/js/stomp.min.js"/>"></script> 
<script type="text/javascript" src="<c:url value="/resources/js/websocket.js"/>"></script> 


<script type="text/javascript"> 
$(document).ready(function() { 
    //... 

    connect('${nsec}'); 
}); 

なぜFirefoxのコンソールがXML Parsing Error: no root element found Location:を与えます。

コンソールタブ

ネットワークタブ

Answer 1

もともとはthis questionに投稿されました。

これは、stompClient.connect()メソッドが非同期であるためです。私は接続が確立するまで待って実行を中断しません。 alert()の直後にgetNotifications()と電話すると、接続が確立されていない可能性があります（alert()に接続するのに十分な時間がかかる場合があります）。

stompClient.connect()コールバックで（stompClient.subscribe()と同じように）getNotifications()を呼び出して、呼び出されるまでに接続が確立されていることを確認する必要があります。例えば

：サーバーからの初期メッセージを取得するには、JavaScriptから明示的なメッセージを取り除くために、あなたのJavaコードで@SubscribeMappingのアノテーションを使用することを検討しているのに加えて

stompClient.connect({}, function(frame){ 
    console.log("Connected :- "+frame); 
    stompClient.subscribe("/topic/notifications", function(notifications) { 
     alert(notifications); 
    }); 
    getNotifications(); 
}, function(error) { 
    alert(error); 
}); 

。このようにして、サーバーはサブスクリプションが確立されるとすぐに最初のメッセージを送信します。

@MessageMapping(value="/hello") 
@SubscribeMapping("/notifications") 
@SendTo("/topic/notifications") 
public Notify hello() { 
    try { 
     Thread.sleep(2000); 
    } catch (InterruptedException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } 
    Notify notify = new Notify(); 
    notify.setMessage("Hello World !!!"); 
    return notify; 
} 

そして、クライアントコードは次のようになります：たとえば

stompClient.connect({}, function(frame){ 
    console.log("Connected :- "+frame); 
    stompClient.subscribe("/topic/notifications", function(notifications) { 
     alert(notifications); 
    }); 
}, function(error) { 
    alert(error); 
});