使用 angular-websocket 订阅连续数据
Posted
技术标签:
【中文标题】使用 angular-websocket 订阅连续数据【英文标题】：Subscribe to a continuous data with angular-websocket 【发布时间】：2016-05-11 14:48:52 【问题描述】：我正在做一个 Angular 应用程序来显示为 spring 服务器连续发送的数据。我的 Angular 应用程序连接正确，但我不知道如何订阅服务器正在发送的数据。我给你看我的代码：
服务器、WebSocketConfiguration：
...
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer
@Override
public void registerStompEndpoints(final StompEndpointRegistry registry)
registry.addEndpoint("/random")
.setAllowedOrigins("*")
.withSockJS();
....
服务器、数据生成器：
...
@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>
客户端应用程序.js：
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);）。
【问题讨论】：
【参考方案1】：尝试使用ws.on('message', function...
message 是服务器发出的事件名称。
【讨论】：
我试过 Andrew，但我收到的是：angular.js:13550 TypeError: ws.on is not a function 谢谢你的请求。
我正在使用 angular-socket-io v0.7.0，我的 socketFactory 看起来像这样： ... ... .factory(['socketFactory', function (socketFactory) var mySocket = socketFactory (); 返回 mySocket; ]);然后在任何控制器中，我使用我的 SocketFactory.on('event_name', function... 一切正常，你能测试一下吗？
我已经尝试过使用它，但是当我尝试连接我的服务器时：io.connect('ws://137.138.245.169:8888/serverEx/random/websocket');;它给了我下一个错误：Failed to load resource: the server responded with a status of 404 (Not Found) http://137.138.245.169:8888/socket.io/?EIO=3&transport=polling&t=LIWPK4v。连不上，我问的是另一种方法，因为我认为它更高级，因为这个连不上。
看一下ngSocket，并尝试实现它。这样它就可以正常工作了。
我会尝试，但根据文档，它与 angular-websocket 相同，所以我猜我会遇到同样的问题：angluar-socketngSocket以上是关于使用 angular-websocket 订阅连续数据的主要内容，如果未能解决你的问题，请参考以下文章