IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

NodeJS Discussion :

Chatter en temps réel


Sujet :

NodeJS

  1. #1
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Janvier 2016
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 30
    Localisation : Canada

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2016
    Messages : 1
    Points : 4
    Points
    4
    Par défaut Chatter en temps réel
    Salut les developpeurs

    D’abord je vais vous remercie parce que j'ai suivi les deux tutoriels a propos de node js

    http://atinux.developpez.com/tutorie...vec-socket-io/

    http://atinux.developpez.com/tutorie...ser-socket-io/



    Probleme :

    Comment je peux ajouter une nouvelle chambre !!


    Nom : Sans titre.jpg
Affichages : 275
Taille : 101,9 Ko

    Pièce jointe 200710


    Voici le code source de serveur (app.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 express = require('express'),
    	app = express();
     
    app.configure(function () {
    	app.use(express.static(__dirname + '/public'));
    });
     
    var server = app.listen(80);
    console.log('Server listen on http://localhost:80/');
     
    // Use Socket.io
    var io = require('socket.io').listen(server);
     
    var rooms = ['chatHommesFemmes', 'chatHommes', 'chatFemmes', 'chatAnimaux'];
    var sentences = {
    	chatHommesFemmes: 'Bienvenue à tous !',
    	chatHommes: 'Bienvenue à tous les hommes !',
    	chatFemmes: 'Bienvenue à toutes les femmes !',
    	chatAnimaux: 'Waouf miaouh...Grrrr haiii pikacchhuuuu !',
    };
    var messages = {};
     
    // Pour chaque chambre...
    rooms.forEach(function (room) {
    	// On créé la liste des messages
    	messages[room] = [];
    	// On créé la chambre et pour chaque connection...
    	io.of('/'+room).on('connection', function (socket) {
    		// on envoie le titre du chat + la liste des messages
    		socket.emit('connected', { title: sentences[room], messages: messages[room] });
    		// À chaque nouveau message
    		socket.on('message', function (hash) {
    			var message = {
    				username: hash.username || 'Inconnu',
    				text: hash.text || ''
    			};
    			// On l'ajoute à la liste
    			messages[room].push(message);
    			// On l'envoie à tous les clients connectés à cette chambre
    			socket.broadcast.emit('newMessage', message);
    		});
    	});
    });
    - Coté client ( index.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
    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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    <html>
    	<title>Multi-chats avec Socket.io par Atinux.fr</title>
    	<head>
    		<meta charset="utf-8">
    		<link rel="stylesheet" type="text/css" href="css/kube.min.css" />
    		<link rel="stylesheet" type="text/css" href="css/main.css" />
    	</head>
    <body>
    	<div id="content">
    		<h3 class="title">Multi chats</h3>
    		<form id="choixChat" class="forms columnar bgWhite">
    			<fieldset>
    			<ul>
    				<li>
    					<label class="bold">Groupe</label>
    					<select class="chambre" name="chambre">
    						<option value="chatHommesFemmes">Chat hommes/femmes</option>
    						<option value="chatHommes">Chat hommes</option>
    						<option value="chatFemmes">Chat femmes</option>
    						<option value="chatAnimaux">Chat animaux</option>
    					</select>
    				</li>
    				<li>
    					<label class="bold">Pseudonyme</label>
    					<input type="text" class="username" name="username">
    				</li>
    				<li class="push">
    					<input type="submit" name="enter" value="Entrer" class="btn">
    				</li>
    			</ul>
    			</fieldset>
    		</form>
    		<div class="chat" style="display:none;">
    			<div class="back bgWhite">
    				<button class="close btn">Close this chat</button>
    			</div>
    			<div class="overflowMessages">
    				<table class="messages bordered bgWhite"></table>
    			</div>
    			<form id="send" class="forms columnar bgWhite">
    				<fieldset>
    					<ul>
    						<li style="margin-bottom: 0px;">
    							<label class="bold" style="width: 50px;">Message</label>
    							<input type="text" name="message" class="message" value="" style="width: 400px;">
    							<input type="submit" class="btn" name="send" value="envoyer">
    						</li>
    					</ul>
    				</fieldset>
    			</form>
    		</div>
    		<div class="loader bgWhite" style="display: none;">
    			<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
    		</div>
    		<h5>Par <a href="http://www.twitter.fr/Atinux" target="_blank">Sébastien Chopin</a> pour <a href="http://www.atinux.fr" target="_blank">Atinux.fr</a></h5>
    	</div>
    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
    	<script type="text/javascript">
    	$(function () {
    		// Utils
    		function htmlspecialchars(string) { return $('<span>').text(string).html(); }
    		// Variables jQuery
    		var $chat = $('.chat'),
    			$loader = $('.loader'),
    			$title = $('.title'),
    			$messages = $('.messages', $chat);
    			$message = $('.message', $chat);
    		// Variables "globales"
    		var socket,
    			username;
    		// Fonctions
    		function newMessage(hash) {
    			$('<tr>').html('<td class="username bold">'+htmlspecialchars(hash.username)+'</td><td>' + htmlspecialchars(hash.text) + '</td>').appendTo($messages);
    			$messages.find('.noMess').remove();
    			$('.overflowMessages').stop().animate({
    				scrollTop: $messages.height()
    			}, 400);
    		}
    		// On attends qu'il choisisse son chat
    		$('#choixChat').submit(function () {
    			// On récupère le namespace choisit
    			var namespace = $('.chambre', this).val();
    			username = $('.username', this).val() || ('User'+ Math.ceil(Math.random() * 100000));
    			$(this).hide();
    			$loader.show();
    			// on se connecte à ce namespace
    			socket = io.connect('/'+namespace, {
    				"force new connection": true // Juste pour pouvoir bien re-rentrer dans l'evénement "connected"
    			});
    			// Envoie l'évènement que j'ai bien sauvegardé
    			socket.on('connected', function (res) {
    				// On affiche le chat
    				$loader.hide();
    				$chat.show();
    				$title.html(res.title);
    				// Si aucun messages...
    				if (!res.messages.length) {
    					$messages.html('<tr class="noMess"><td>Aucun messages pour le moment, qu\'attendez vous ?</td></tr>');
    				}
    				else {
    					// On affiche le titre personnalisé à ce chat
    					for (var i = 0, l = res.messages.length; i < l; i++) {
    						newMessage(res.messages[i]);
    					}
    				}
    				// Focus sur l'input
    				$message.focus();
    			});
    			// Pour chaque nouveau message...
    			socket.on('newMessage', newMessage);
    			// On previent l'évènement de continuer et de raffrichir la page
    			return false;
    		});
    		// Quand il publie un message sur son chat
    		$('#send').submit(function () {
    			var text = $.trim($message.val());
    			if (!text.length) return false;
    			var hash = {
    				username: username,
    				text: text
    			};
    			$message.val('').focus();
    			socket.emit('message', hash);
    			newMessage(hash)
    			return false;
    		});
    		$('.close').click(function () {
    			socket.disconnect();
    			$chat.hide();
    			$title.html('Multi chats');
    			$messages.html('');
    			$message.val('');
    			$('#choixChat').show();
    		});
    	});
    	</script>
    </body>
    </html>



    Mercii d'avance les ami(e)s

    bonne soiré

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Salut !

    Pour l'instant, tes quatre chambres sont inscrites en dur dans ton code source.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var rooms = ['chatHommesFemmes', 'chatHommes', 'chatFemmes', 'chatAnimaux'];
    Pour pouvoir ajouter des chambres à volonté, il faut que tu rendes cette liste dynamique, ce qui signifie :
    1. choisir un moyen de la stocker de manière persistante (base de donnée, fichier texte ou autre),
    2. ajouter à ton script les fonctions pour interagir avec ce moyen de stockage.


    À mon humble avis, le plus simple pour débuter, c'est d'opter pour un stockage dans un fichier texte. L'API file system offre tout ce dont tu as besoin pour manipuler ledit fichier. Regarde en particulier les fonctions fs.readFile et fs.writeFile.

    À toi de jouer
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

Discussions similaires

  1. [XML] Traiter xml en temps réel avec simple xml
    Par thibaut06 dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 03/12/2007, 21h30
  2. Réponses: 2
    Dernier message: 26/08/2007, 13h22
  3. Déplacer des objets en temps réel avec la souris.
    Par johnnyjohnny dans le forum MATLAB
    Réponses: 4
    Dernier message: 03/07/2007, 15h54
  4. [Temps Réel] avec du C++ ?
    Par poukill dans le forum C++
    Réponses: 35
    Dernier message: 26/02/2007, 09h22
  5. Informatique temps réel avec VxWorks
    Par Mastero dans le forum C++
    Réponses: 3
    Dernier message: 02/09/2005, 23h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo