Discussion :

[Silvering]

Bonjour à tous!

J'ai un serveur C qui écoute des commandes sur le port 5260.

Je cherche à mettre en place une interface HTML/JS pour communiquer avec ce serveur. L'objectif est d'avoir plusieurs boutons sur la page page HTML envoyant des messages (simple chaines de caractères) vers le serveur.

Auriez-vous une idée sur comment mettre en place ça?

Merci d'avance!

[SpaceFrog]

avec ajax ...
et avec jquery pour simplifier la gestion .

[Silvering]

Merci pour ta réponse très rapide.
Je cherche des exemples sur lesquels m'appuyer mais je n'arrive pas à trouver. Je ne dois pas chercher correctement.. Aurais-tu un lien/tuto ou autre?

Merci!

[Invité]

Il restera le problème de la Same Origin Policy qui ne sera résolu que si la page initiale (celle qui est livrée avant de recevoir ou d'aller y lire les commandes) vient du même domaine, du même protocole et du même port (The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number).

[Silvering]

Ok donc ma page HTML devra être accessible depuis le port 5260 donc?

[Silvering]

Ok alors j'ai pas mal avancé. J'arrive à envoyer des commandes depuis le client.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
var http = require('http');
var ejs = require('ejs');
var express=require('express');
 
//The url we want is `www.nodejitsu.com:1337/`
var options = {
  host: '192.168.1.154',
  path: '/',
  //since we are listening on a custom port, we need to specify it by hand
  port: '5260',
  //This is what changes the request to a POST request
  method: 'POST'
};
 
callback = function(response) {
  var str = ''
  response.on('data', function (chunk) {
    str += chunk;
  });
 
  response.on('end', function () {
    console.log(str);
  });
}
 
var app = express();
 
app.engine('html', ejs.renderFile);
 
app.set('/', __dirname);
 
app.get('/', function(request,response) {
 
  response.render('index.ejs.html')
})
 
var res = http.request(options, callback);
 
res.write("START_BG;BG1\n");
 
 
app.listen(8080);

Maintenant je voudrais créer une fonction dans ce .js et l'appeler via un bouton dans mon HTML mais je n'arrive pas à avoir quelque chose de fonctionnel.

Je pensais à quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
app.get('/request', function(req, res){
  var res = http.request(options, callback);
  res.write("START_BG;BG1\n");
});

et pour le .html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 <script type="text/javascript">
 
  function playMovie() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/playback', true);
    xhr.send();
}
 
  </script>

cependant ça ne marche pas...

[Invité]

Ok donc ma page HTML devra être accessible depuis le port 5260 donc?

Oui, et si la page d'origine est appelée avec le protocole https, alors la requête ajax devra aussi utiliser ce protocole, sinon la règle est brisée. Etc.

[Invité]

Comme vous ne précisez pas avec quoi vous travaillez, mais que ça ressemble à du expressjs augmenté de embeddedjs, je dirais que ce que vous avez construit dans client.js est un script serveur qui écoute le port 8080. Mais je me trompe peut être.

cependant ça ne marche pas...

Quel est le message d'erreur ?

[Silvering]

En effet, et pardon de ne pas avoir était plus clair, j'ai construit un serveur nodejs en m'aidant d'express. J'envoie les messages sur le port d'écoute du serveur C : 5260 par contre j'ouvre une page html j'ouvre le port 8080 port visualiser la page. Quand j'appui sur le bouton Video GO GO qui est "censé" appeler la fonction playMovie() qui va chercher le message dans le req.write.

Je viens à l'instant de trouver la solution.

La modif sur le client.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
app.post('/play', function(req, res){
  var req = http.request(options, callback);
  req.write("START_BG;BG1\n");
});

il fallait utiliser app.post et non pas app.get

puis la modif du le .html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function playMovie() {
    var xmlhttp = new XMLHttpRequest();
	xmlhttp.open("POST", "/play",true);
	xmlhttp.send();
    }

Quand j'appui sur le bouton, la commande est bien envoyée au serveur mais le serveur nodejs m'affiche cette erreur et se coupe :

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Parse Error
    at Socket.socketOnData (http.js:1583:20)
    at TCP.onread (net.js:527:27)

[Invité]

Pour préciser le contexte,
Vous avez 2 serveurs :
- 1 serveur A qui écoute 8080 et délivre votre page de tests
- 1 serveur C qui écoute 5260 et auquel vous envoyez des commandes depuis la page de tests ??

Avez-vous vérifié si une autre application n'utilise pas déjà un des ces ports ?

[Silvering]

Oui c'est exact. De plus aucune autres application n'utilise les ports en question.

[Invité]

Si votre page de tests provient de la source http://serveurA:8080/test.html et qu'elle contient du code tentant d'exécuter une requête ajax sur l'url http://serveurC:5260/cmd?bla=bla, alors la requête ne passera pas (Same Origin Policy).
Pour éviter cela, tout en continuant avec l'ajax, vous devez modifier la requête ajax pour qu'elle fasse une requête au serveur A, qui est le domaine d'origine de la page de tests, et modifier le code du serveur A pour qu'il fasse cette seconde requête (ou qu'il envoie la commande) au serveur C. Le code modifié retournera le résultat de la requête de A vers C. Le serveur A jouant le rôle d'intermédiaire (mandataire ou proxy) pour votre application cliente, qui elle n'a pas le droit d'envoyer des requêtes directement au serveur C (Same Origin Policy).

[Silvering]

Merci pour votre réponse claire. Cependant je ne vois pas comment "écrire" ça. Que dois-je garder sur mon code actuel et quoi ajouter? Pourriez-vous m'aider?

Merci beaucoup beaucoup à l'avance.

Voici mon code actuel :

client.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var http = require('http');
var ejs = require('ejs');
var express=require('express');
 
var app = express();
 
app.engine('html', ejs.renderFile);
 
app.set('/', __dirname);
 
app.get('/', function(request,response) {
 
  response.render('index.ejs.html');
})
 
var options = {
  host: '192.168.1.21',
  path: '/',
  port: '5260',
  method: 'POST'
};
 
callback = function(response) {
  var str = '';
  response.on('data', function (chunk) {
    str += chunk;
  });
 
  response.on('end', function () {
    console.log(str);
  });
}
 
app.post('/play', function(req, res){
  var res = http.request(options, callback);
  res.write("START_BG;BG1\n");
});
 
app.listen(7777);

index.ejs.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
	<head>
		<script type="text/javascript" src="client.js"></script>
 
	  	<script type="text/javascript">
 
	   		function playMovie() {
	    		var xmlhttp = new XMLHttpRequest();
				xmlhttp.open("POST","/play",true);
				xmlhttp.send();
	    	}
 
	  </script>
	</head>
<body>
<button onclick="playMovie()">VIDEO</button>
</body>
</html>

[Silvering]

Rebonjour. Suite à votre précédente réponse, j'arrive à afficher la commande sur le serveur A via un console.log. Maintenant je ne sais pas comment récupérer cette commande et l'envoyer via AJAX sur le serveur C.

Des idées?

Merci!

[Invité]

Vous n'avez pas bien compris. La requête ajax n'est pas destinée au serveurC, mais au serveurA.
C'est le code dans la page de test qui exécute la requête ajax vers le serveurA et le serveurA qui sert de relais vers le serveurC.

1. Votre navigateur demande la page de test = http://serveurA:8080/test.html.
2. En cliquant sur le bouton, vous déclenchez l'exécution de la requête ajax du client (votre navigateur) vers le serveurA = http://serveurA:8080/proxy?bla=bla.
3. Le serveurA reçoit la requête ajax du client = http://serveurA:8080/proxy?bla=bla.
4. Avec les paramètres reçus dans la requête ajax, il comprend qu'il doit envoyer une commande vers le serveurC = http://serveurC:5260/cmd?bla=bla et attendre sa réponse.
5. Le serveurC reçoit la commande depuis le serveurA = http://serveurC:5260/cmd?bla=bla.
6. Le serveurC exécute la commande, puis renvoi le résultat au serveurA.
7. Lorsque le serveurA reçoit le résultat de la commande exécutée par le serveurC, il retourne ce résultat, éventuellement mis en forme, comme réponse de la requête ajax initale (http://serveurA:8080/proxy?bla=bla).
8. Le navigateur reçoit le résultat de la requête ajax qu'il a envoyé au seveurA et l'affiche ou exécute des traitements sur le résultat.

Chemin aller = Client (la requête ajax est lancée ici)-> serveurA -> serveurC.
Chemin retour = serveurC -> serveurA -> (réponse à la requête ajax) client.