2016-05-11 3 views
0

私は、Springサーバー用に連続して送信されたデータを表示するためにAngularアプリケーションを行っています。私のAngular Appは正しく接続していますが、サーバーが送信しているデータを購読する方法はわかりません。angular-websocketを使って連続データを購読する

サーバー、WebSocketConfiguration

... 
@Configuration 
@EnableWebSocketMessageBroker 
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer { 
    @Override 
    public void registerStompEndpoints(final StompEndpointRegistry registry){ 
     registry.addEndpoint("/random") 
     .setAllowedOrigins("*") 
     .withSockJS(); 
    } 
.... 

サーバー、dataGeneratorを

... 
@SuppressWarnings("deprecation") 
@Component 
public class JapcDataGenerator implements ApplicationListener<BrokerAvailabilityEvent> { 
[...] 
public void sendDataUpdates(int val) { 
     System.out.println("sending : " + val); 
     this.messagingTemplate.convertAndSend("/data", val); 
    } 
... 

は、クライアント、index.htmlを

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <title>WebSocket chart example</title> 
    </head> 
    <body ng-app="WebSocketAngularApp"> 
     <div ng-controller="socktCtrl"> 
      <p>{{data}}</p> 
     </div> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
     <script type="text/javascript" src="node_modules/angular-websocket/angular-websocket.js"></script> 
     <script type="text/javascript" src="resources/application.js" ></script> 
    </body> 
</html> 
0123私はあなたに私のコードを表示します

var socktApp = angular.module('WebSocketAngularApp',['ngWebSocket']); 

socktApp.factory('mySockt',function($websocket){ 
    var ws = $websocket('ws://137.138.245.169:8888/serverEx/random/websocket'); 
    var collection = []; 

    ws.onMessage(function(message){ 
     console.info("message: ", message); 
     collection.push(JSON.parse(message.data)); 
    }); 

    ws.onOpen(function(message){ 
     console.log("Connection open!",message); 
    }); 

    ws.onClose(function(){ 
     console.log("Closing the socket.") 
    }); 

    ws.onError(function(message){ 
     console.info("Error in socket", message); 
    }); 

    var methods = { 
     collection: collection, 
     get: function(){ 
      ws.send(JSON.stringify({action: 'data'})); 
     } 
    }; 
    return methods; 
}); 

socktApp.controller ('socktCtrl', function($scope, mySockt){ 
    $scope.data = mySockt; 
}); 

結果は、接続ログを示しているが、決してメッセージ私は、このデータの流れ(ライン:this.messagingTemplate.convertAndSend("/data", val);)へのサブスクリプションを行う方法を知らないので:

クライアントが application.js。

答えて

0

は、サーバからemitedイベント名であることws.on('message', function...

messageを使用してみてください。

+0

私はアンドリューを試しましたが、私が受け取るのは次のとおりです。 'angular.js:13550 TypeError:ws.onは関数ではありません。 ' リクエストいただきありがとうございます。 –

+0

私は、角ソケット-IO v0.7.0を使用して、私のSocketFactoryはこのようになりますよ: .factory([ 'のSocketFactory'、機能(のSocketFactory){ VAR mySocket =のSocketFactory()... ... ; return mySocket; }]); そして、私のSocketFactory.on( 'event_name'、function ... を使ってみてください。すべてうまく動作していますか?テストすることはできますか? –

+0

他の試みで作ったサーバを接続しようとしました: 'io.connect( 'ws://137.138.245.169:8888/serverEx/random/websocket');';次のエラーを返します: 'リソースの読み込みに失敗しました: 404(Not Found)のステータス:http://137.138.245.169:8888/socket.io /?EIO = 3&transport = polling&t = LIWPK4v'。接続していません。これは接続されていないからです。 –

関連する問題