Passage d'une variable d'une page a une autre
Bonjour !
J'ai débuté JavaScript cette semaine, ce n'est pas mon premier langage mais je n'ai jamais été un pro de la programmation web.
Lors de l'ouverture de la page "\" je demande à l'utilisateur un pseudo. J'aimerais que celui ci reste lorsqu'il navigue entre les pages.
J'ai essayé d'utliser localStorage et sessionStorage, sans succès et je ne sais pas encore farie de cookies.
Voici mon code. Il contient trois pages :le serveur app.js, la page de chat et la page de profil :
le serveur :
Code:
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
|
var app = require('express')(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
ent = require('ent'), // Permet de bloquer les caractères HTML (sécurité équivalente à htmlentities en PHP)
fs = require('fs');
localStorage = require('localStorage');
// Chargement de la page index.html
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html'); // was ist das ?
});
// Chargement de la page index.html
app.get('/profil', function (req, res) {
res.sendfile(__dirname + '/profil.html'); // was ist das ?
});
io.sockets.on('connection', function (socket, pseudo) {
// Dès qu'on nous donne un pseudo, on le stocke en variable de session et on informe les autres personnes
socket.on('nouveau_client', function(pseudo){
pseudo = ent.encode(pseudo);
socket.pseudo = pseudo;
socket.broadcast.emit('nouveau_client', pseudo);
});
// Dès qu'on reçoit un message, on récupère le pseudo de son auteur et on le transmet aux autres personnes
socket.on('message',function(message){
message = ent.encode(message);
socket.broadcast.emit('message',{pseudo : socket.pseudo,message:message});
});
});
server.listen(8080); |
voici la page de chat "index.html" :
Code:
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Super Chat temps réel !</title>
<style>
#zone_chat strong {
color: white;
background-color: black;
padding: 2px;
}
</style>
</head>
<body>
<h1>Le super Chat temps réel !</h1>
<form action="/" method="post" id="formulaire_chat">
<input type="text" name="message" id="message" placeholder="Votre message..." size="50" autofocus />
<input type="submit" id="envoi_message" value="Envoyer" />
</form>
<form action="/profil" method="get" id="profil">
<input type="submit" id="envoi_message" value="Mon profil" />
</form>
<section id="zone_chat">
</section>
<!--Pourquoi ???-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// Connexion à socket.io
var socket = io.connect('http://localhost:8080');
// On demande le pseudo, on l'envoie au serveur et on l'affiche dans le titre
var pseudo = prompt('Quel est votre pseudo ?');
sessionStorage.setItem("pseudo",pseudo);
socket.emit('nouveau_client', pseudo);
document.title = pseudo + ' - ' + document.title; // à quoi ça sert ça ?
// quand on reçoit le message on l'insère dans la page
socket.on('message',function(data){
insereMessage(data.pseudo,data.message);
});
// Quand un nouveau client
socket.on('nouveau_client',function(pseudo){
$('#zone_chat').prepend('<p><em>' + pseudo + ' a rejoint le chat </em></p>');
});
// Lorsqu'on envoie le formulaire, on transmet le message et on l'affiche sur la page
$('#formulaire_chat').submit(function(){
var message = $('#message').val();
socket.emit('message',message);
insereMessage(pseudo,message);
return false;
});
// ajouter un message dans une page
function insereMessage(pseudo,message){
$('#zone_chat').prepend('<p><strong>' + pseudo + '</strong>' + message + '</p>');
}
</script>
</body>
</html> |
Et voici la page de profil, "profil.html" :
Code:
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Super Chat temps réel !</title>
<style>
#zone_chat strong {
color: white;
background-color: black;
padding: 2px;
}
</style>
</head>
<body>
<h1>Votre super profil !</h1>
</body>
<section id="profil">
</section>
<form action="/" method="get" id="profil">
<input type="submit" id="retour_chat" value="Retourner au chat" />
</form>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// Connexion à socket.io
var socket = io.connect('http://localhost:8080');
document.title = localStorage.getItem("pseudo") + ' - ' + document.title;
// ajouter un message dans une page
function inserePseudo(pseudo,message){
$('#zone_chat').prepend('<p><strong> pseudo </strong>' + localStorage.getItem("pseudo") + '</p>');
}
</script>
</html> |
Merci pour votre aide !
