simon/led-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixing the websocket http led client example

Browse Source
This commit is contained in:
simon 2019-04-28 23:30:44 +02:00
parent 1cf70b19a9
commit f31e1a6330
1 changed files with 84 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
clients/controller-html/htmlstrip.html
View File

@ -1,85 +1,89 @@
<html>
<head>
</head>
<body ng-app="stripApp" ng-controller="stripCtrl" >
{{data}}
<div class="col-12" ng-repeat="led in data" style="border-style: solid;display: table">
<div ng-repeat="(key, value) in led" style="width: 60px; height: 60px; background: {{key}}; display: table-cell;">
{{value}}
</div>
<head>
</head>
<body ng-app="stripApp" ng-controller="stripCtrl">
{{data}}
<div class="col-12" ng-repeat="led in data" style="border-style: solid;display: table">
<div ng-repeat="(key, value) in led"
style="width: 60px; height: 60px; background: {{key}}; display: table-cell;">
{{value}}
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/reconnecting-websocket/dist/reconnecting-websocket-iife.min.js"></script>
<script>
var app = angular.module('stripApp',[]);
app.factory('socket', [function() {
var stack = [];
var onmessageDefer;
var host = "localhost"
if (window.location.hostname != ""){
host = window.location.hostname
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/reconnecting-websocket/dist/reconnecting-websocket-iife.min.js"></script>
<script>
var app = angular.module('stripApp', []);
app.factory('socket', [function () {
var stack = [];
var onmessageDefer;
var host = "localhost"
if (window.location.hostname != "") {
host = window.location.hostname
}
var socket = {
ws: new ReconnectingWebSocket("ws://" + host + ":8001", null, { debug: false, reconnectInterval: 2000 }),
send: function (data) {
if (socket.ws.readyState == 1) {
socket.ws.send(data);
} else {
stack.push(data);
}
},
onmessage: function (callback) {
if (socket.ws.readyState == 1) {
socket.ws.onmessage = callback;
} else {
onmessageDefer = callback;
}
}
var socket = {
ws: new ReconnectingWebSocket("ws://"+host+":8001", null, {debug: false, reconnectInterval: 2000}),
send: function(data) {
if (socket.ws.readyState == 1) {
socket.ws.send(data);
} else {
stack.push(data);
}
},
onmessage: function(callback) {
if (socket.ws.readyState == 1) {
socket.ws.onmessage = callback;
} else {
onmessageDefer = callback;
}
}
};
socket.ws.onopen = function(event) {
for (i in stack) {
socket.ws.send(stack[i]);
}
stack = [];
if (onmessageDefer) {
socket.ws.onmessage = onmessageDefer;
onmessageDefer = null;
}
};
return socket;
}]);
};
socket.ws.onopen = function (event) {
for (i in stack) {
socket.ws.send(stack[i]);
}
stack = [];
if (onmessageDefer) {
socket.ws.onmessage = onmessageDefer;
onmessageDefer = null;
}
};
return socket;
}]);
app.controller('stripCtrl', ['$scope', 'socket', function($scope, socket) {
app.controller('stripCtrl', ['$scope', 'socket', function ($scope, socket) {
$scope.connected = false;
$scope.data = {}
$scope.connected = false;
$scope.data = {}
socket.ws.addEventListener('close',function(event) {
$scope.$apply(function(){
$scope.connected = false
});
socket.ws.addEventListener('close', function (event) {
$scope.$apply(function () {
$scope.connected = false
});
socket.ws.addEventListener('open',function(event) {
$scope.$apply(function(){
socket.send(
JSON.stringify({
'register_client_type': 1,
'client_name': "htmlstrip",
})
);
$scope.connected = true
});
});
socket.ws.addEventListener('open', function (event) {
$scope.$apply(function () {
socket.send(
JSON.stringify({
'register_client_type': 1,
'client_name': "htmlstrip",
})
);
$scope.connected = true
});
});
socket.onmessage(function(event) {
$scope.$apply(function(){
console.log(event.data)
json = JSON.parse(event.data)
$scope.data = json
});
socket.onmessage(function (event) {
$scope.$apply(function () {
console.log(event.data)
json = JSON.parse(event.data)
$scope.data = json
});
}]);
</script>
</body>
});
}]);
</script>
</body>
</html>