tchat avec node Js
Développement Web Entreprise 64
Bonjour,
Voila je rencontre un petit problème avec mon code.
J'essai de suivre le tutoriel sur la création d'un tchat avec node.js; mais je suis face à un problème d'execution de script que je ne comprend pas. J'en suis à la partie concernant l'affichage de tout les utilisateur présent dans le salon lors d'une nouvelle connexion.
En effet, je lance le script server pour être à l'écoute d'évènement JS, j'ouvre 2 navigateurs A et B, j'ai bien les formulaire de login qui apparaissent.
Du coup je connecte un utilisateur sur le navigateurA (qui est ensuite affiché comme connecté dans le navigateur A), puis je passe au navigateur B pour faire la même opération. Dans la théorie, au moment ou le second utilisateur se connecte, je devrais avoir d'afficher à dans mon navigateur B à la fois l'utilisateur du navigateur B, et l'utilisateur du navigateur A, Or à la connexion, seul l'utilisateur B est affiché. En cause: mon script qui ne s'execute pas jusqu'au bout quand un second utilisateur se connecte.
Process du script du server lors de la détection d'une nouvelle connexion au server:
-
navigateur A (sans utilisateur présent avant enregistrement):
1 - écoute du server
2 - écoute de l'évènement "login"
3 - execution du script de l'évènement "login"
4 - lecture de la boucle for (pour afficher tout les utilisateur présent)
5 - écoute de l'évènement de déconnection (s'il y en a un) -
navigateur B (avec un utilisateur déjà présent):
1 - ecoute du server
2 - écoute de l'évènement "login"
3 - execution de l'évènement "login"
4 - ARRÊT du script (alors qu'il devrait me lire la boucle "for" pour afficher les autre utilisateurs.
Je ne comprend pas cet arrêt de lecture dans le navigateur B alors qu'avec le navigateur A ce script n'est pas arrêté...
Voici mon code côté serveur, si quelqu'un pouvait m'expliquer s'il vous plaît :) :
var app=require('express')();
var http=require('http');
var httpServer=http.createServer(app);
var io = require('socket.io')(httpServer);
var md5=require('md5');
var $ =require ('jquery');
app.get('/css/wood.jpg', (req, res)=>{
res.sendFile(__dirname+'/css/wood.jpg');
});
app.get('/css/style.css', (req, res)=>{
res.sendFile(__dirname+'/css/style.css');
});
app.get('/js/client.js', (req, res)=>{
res.sendFile(__dirname+'/js/client.js');
});
app.get('/mustache/mustache.js', (req, res)=>{
res.sendFile(__dirname+'/node_modules/mustache/mustache.js');
});
app.get('/', (req, res)=>{
res.sendFile(__dirname+'/index.html');
});
var userTab={};
io.sockets.on('connection',(socket)=>{
var stockUser=false;
console.log("valeur de userTab à la connexion : ");
console.log(userTab);
for(var k in userTab){
console.log("valeur a l'affichage de tout les user");
console.log(userTab);
socket.emit('newuser', userTab[k]);
}
socket.on('login', (user)=>{
console.log("valeur à la connesion de l'user : ");
console.log(userTab);
stockUser=user;
stockUser.id=user.mail.replace('@', '-').replace('.', '-');
stockUser.avatar='https://gravatar.com/avatar/'+md5(user.mail)+'?s=50'; //s = size
socket.emit('logged');
userTab[stockUser.id]=stockUser;
console.log("valeur après connexion de l'user");
console.log(userTab);
io.sockets.emit('newuser', stockUser);
});
console.log("valeur à la fin de la connexion : ");
console.log(userTab);
console.log("====================================================");
socket.on('disconnect', ()=>{
if(!stockUser){
return false;
}
delete userTab[stockUser.id];
io.sockets.emit('disconnectUser', stockUser);
});
});
httpServer.listen(3000,()=>{
console.log('ecoute sur port 3000');
});mon code côté client:
(function($){
var socket=io().connect('http://localhost:3000');
$('#loginForm').submit(function(e){
e.preventDefault();
socket.emit('login', {
username: $('#username').val(),
mail: $("#mail").val()
});
socket.on('newuser',(stockUser)=>{
$("#user").append('<img src="'+stockUser.avatar+'">');
});
socket.on('logged',()=>{
console.log($);
$("#login").fadeOut();
});
socket.on('disconnectUser', function(stockUser){
$('#' + stockUser.id).remove();
});
});
})(jQuery);et mon code html:
<!DOCTYPE html>
<html>
<head>
<title>tchat test socket</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="body">
<div id="user" class="col-12"></div>
<div id="messages" class="col-12" style="display:none;">
<div class="message" id="msgTemplate">
<img class="img-fluid" src="{{{user.avatar}}}">
<div class="info">
<p><strong>{{user.username}}</strong></p>
<p>{{message}}</p>
<span class="date">{{h}}:{{m}}</span>
</div>
</div>
</div>
<div id="login" class="col-12">
<form action="" id="loginForm" role="form">
<h1>Bienvenu</h1>
<p>Ceci est un test de tchat pour NodeJS, entrez votre pseudo et votre email (utilisé pour l'avatar gravatar)</p>
<input type='text' name="login" id="username" placeholder="Nom d'utilisateur" class="form-control"/>
<input type="mail" name="mail" id="mail" placeholder="E-mail" class="form-control"/>
<input type="submit" class="btn btn-primary" value="envoyer">
</form>
</div>
<form action="" id="form" role="form" class="col-12">
<input type="text" id="message" class="text form-control"/>
<!-- <input type="submit" id="send" value="Envoyer mon message!" class="submit"/>-->
<button type="submit" id="send" class="btn btn-primary submit">Envoyer</button>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="mustache/mustache.js"></script>
<script src="js/client.js"></script>
</body>
</html>