Bonjour à tous,
Je suis nouveau sur les forum donc veuillez m'excuser si il manque des infos où si mon sujet est mal placé...
Pour résumer (je ne suis pas ds le web, je bidouille) :
Pour mon projet de Domotique, j'ai un Raspberrry qui reçois toutes les infos de mon arduino.
Via node-red sur le pi, je transmet les infos (format Json) a des pages web (sur pi aussi) via des websocket.
J'arrive a envoyer différentes infos via différents lien websocket (ws://localhost/ws/lien1, ws://localhost/ws/lien2, etc...) et j'ai différentes pages HTML (lien1.html lien2.html) qui affichent proprement les infos de chaque socket.
Jusque là, ça marche très bien.
Voulant faire une sorte de page avec des widgets, j'ai utilisé la fonction php include pour insérer mes résultats dans ma page principale (php).
Mon problème est que je ne peux pas avoir afficher le résultat de plusieurs websocket sur la même page car il n'y en a qu'un qui marche.
Mais sur différentes pages en simultané ca marche. Le problème vient donc du fait d'inclure mes pages dans une autre (enfin je pense)...
J'espère être compréhensible et que quelqu'un peu m'aider...
Merci d'avance.
Voici mon code de mon "widget" (widget/lien1.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Temp</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
var server = window.location.hostname;
var topics = {};
var wsMouv = "ws://localhost/ws/lien1";
function wsConnectallmouv() {
console.log("connect",wsMouv);
var ws = new WebSocket(wsMouv);
ws.onmessage = function(msg) {
var allmouvObj = JSON.parse(msg.data);
console.log(allmouvObj);
var output = "";
for (var property in allmouvObj) {
output += '<li class="list-group-item"><strong>' +property + '</strong>' + ': ' + allmouvObj[property]+'</li>';
}
document.getElementById('messages').innerHTML = output;
}
ws.onopen = function() {
document.getElementById('status').innerHTML = "<small>connexion établie</small>";
console.log("connected");
}
ws.onclose = function() {
document.getElementById('status').innerHTML = "pas de connection";
setTimeout(wsConnectallmouv,1000);
}
}
</script>
<body onload="wsConnectallmouv();" onunload="ws.disconnect;">
<div class="container">
<div class="panel panel-success" margin: 15px;>
<div class="btn btn-info btn-lg"><h3>All Mouvements</h3></div>
<div class="panel-body" id="messages">
<ul class="list-item" id="messages">
</ul>
</div>
<div class="panel-footer" id="status"><small>déconnectés</small></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Voici le code de ma page principal :
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ma domotik</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php include("include/menu.php"); ?>
<h1>Ma maison</h1>
<div class="row">
<div class="col-xs-6 col-sm-3"><?php include("widget/lien1.html"); ?></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3"><?php include("widget/lien2.html"); ?></div>
<div class="clearfix visible-xs-block"></div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bonjour à tous,
Je suis nouveau sur les forum donc veuillez m'excuser si il manque des infos où si mon sujet est mal placé...
Pour résumer (je ne suis pas ds le web, je bidouille) :
Pour mon projet de Domotique, j'ai un Raspberrry qui reçois toutes les infos de mon arduino.
Via node-red sur le pi, je transmet les infos (format Json) a des pages web (sur pi aussi) via des websocket.
J'arrive a envoyer différentes infos via différents lien websocket (ws://localhost/ws/lien1, ws://localhost/ws/lien2, etc...) et j'ai différentes pages HTML (lien1.html lien2.html) qui affichent proprement les infos de chaque socket.
Jusque là, ça marche très bien.
Voulant faire une sorte de page avec des widgets, j'ai utilisé la fonction php include pour insérer mes résultats dans ma page principale (php).
Mon problème est que je ne peux pas avoir afficher le résultat de plusieurs websocket sur la même page car il n'y en a qu'un qui marche.
Mais sur différentes pages en simultané ca marche. Le problème vient donc du fait d'inclure mes pages dans une autre (enfin je pense)...
J'espère être compréhensible et que quelqu'un peu m'aider...
Merci d'avance.
Voici mon code de mon "widget" (widget/lien1.html)
[html]<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Temp</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
var server = window.location.hostname;
var topics = {};
var wsMouv = "ws://localhost/ws/lien1";
function wsConnectallmouv() {
console.log("connect",wsMouv);
var ws = new WebSocket(wsMouv);
ws.onmessage = function(msg) {
var allmouvObj = JSON.parse(msg.data);
console.log(allmouvObj);
var output = "";
for (var property in allmouvObj) {
output += '<li class="list-group-item"><strong>' +property + '</strong>' + ': ' + allmouvObj[property]+'</li>';
}
document.getElementById('messages').innerHTML = output;
}
ws.onopen = function() {
document.getElementById('status').innerHTML = "<small>connexion établie</small>";
console.log("connected");
}
ws.onclose = function() {
document.getElementById('status').innerHTML = "pas de connection";
setTimeout(wsConnectallmouv,1000);
}
}
</script>
<body onload="wsConnectallmouv();" onunload="ws.disconnect;">
<div class="container">
<div class="panel panel-success" margin: 15px;>
<div class="btn btn-info btn-lg"><h3>All Mouvements</h3></div>
<div class="panel-body" id="messages">
<ul class="list-item" id="messages">
</ul>
</div>
<div class="panel-footer" id="status"><small>déconnectés</small></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>[/html]
[b]Voici le code de ma page principal :[/b]
[html]<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ma domotik</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php include("include/menu.php"); ?>
<h1>Ma maison</h1>
<div class="row">
<div class="col-xs-6 col-sm-3"><?php include("widget/lien1.html"); ?></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3"><?php include("widget/lien2.html"); ?></div>
<div class="clearfix visible-xs-block"></div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>[/html]
