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。
私はアンドリューを試しましたが、私が受け取るのは次のとおりです。 'angular.js:13550 TypeError:ws.onは関数ではありません。 ' リクエストいただきありがとうございます。 –
私は、角ソケット-IO v0.7.0を使用して、私のSocketFactoryはこのようになりますよ: .factory([ 'のSocketFactory'、機能(のSocketFactory){ VAR mySocket =のSocketFactory()... ... ; return mySocket; }]); そして、私のSocketFactory.on( 'event_name'、function ... を使ってみてください。すべてうまく動作していますか?テストすることはできますか? –
他の試みで作ったサーバを接続しようとしました: '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'。接続していません。これは接続されていないからです。 –