Utilisation emit() avec express@4.10.2

**Toufik83** · 18/11/2016, 15h02

bonsoir,
Pièce jointe 225233
comme vous voyez dans l'image ci-dessus, le serveur est bien lancé et il écoute le port 3000 et il détecte aussi les utilisateurs qui se connectent.
par-contre la fonction emit(), n'a jamais fonctionné, les messages écrit ne sont pas ajoutés à <ul id="messages"></ul>, et même dans le cmd y'a rien.
les deux fichiers que j'utilise c'est index.html et index.js(server).
index.html :

Code html :

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
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
 
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="" id="form">
      <input id="m" name="messg" autocomplete="off" />
      <input type="button" id="submit" value="Send"/>
	</form><script type="text/javascript" src="../global_jQuery/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="/node_modules/socket.io-client/socket.io.js"></script>
 
 
    <script type="text/javascript">
        
          var io = io.connect("http://localhost:3000/IOSocket");
          
          io.on('this', function (data) {
        $('body').text( $('body').text() + data + '\n' );
          });
          
      io.on('chatmessage', function(msg){
                $('#messages').append($('<li>').text(msg));
                console.log(msg);
      });
          
          io.on('join',function(data){
          console.log(data);
          });
          $(function(){ 
                $('form').on("submit",function(e){
                        e.preventDefault();
                        var _message=$("#m").val();
                        io.emit('chatmessage',_message);
                        $('#m').val('');
          });
          
          });
         
    </script>
 
 
  </body>
</html>

index.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
 
var express=require('express')
, app = express()
, server = require('http').Server(app)
, io = require('socket.io')(server);
 
/*
app.get('/', function(req, res){
  res.sendfile('index.html');
});*/
app.use("/", express.static(__dirname ));
 
io.on('connection', function(socket){
 
	socket.on('join',function(){
		io.emit('this', { will: 'be received by everyone'});
		io.emit('join','Hello World from client');
	});
 
	socket.on('chatmessage',function(msg){console.log('Message :'+msg);});
 
 
 
 
 console.log("utilisateur se connecte !");
});
 
server.listen(3000,function(){console.log("Serveur à l'écoute du port :"+server.address().port );});

je voudrais savoir pourquoi emit n'envois pas de message et aussi si nodejs require un service Windows ou quelque chose comme ça, par-ce que il y'a quelques jours que j'ai arrêté quelques services qui utilisait le port 80, ça me bloquait le xampp.

**Toufik83** · 19/11/2016, 13h39

poussez-moi s'il vous plait, j'ai telechargé 3 projets depuis github et toujours le même problème, serveur lancé, il détecte les utilisateurs en ligne, mais emit() ne fonctionne pas. je commence à douter que le problème à une relation avec un service de Windows. je dis n'importe quoi?

**NoSmoking** · 21/11/2016, 18h34

Bonjour,
il ne te manquerait pas un écouteur ?

Code :

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

var io = require('socket.io').listen(server);

**Toufik83** · 21/11/2016, 21h35

j'ai essayé .listen(server) mais toujours la même chose, la fonction emit n'envois et ne reçois rien, je n'ai aucune erreur dans la console, est ce que nodejs exige un service bien précis sous Windows? je pose cette question par-ce que je suis sûr que le problème est dans ma machine, vu que j'ai testé plusieurs projets sur le net et toujours la même chose avec emit.

**Toufik83** · 23/11/2016, 15h24

bonjour,
s'il vous plait, et si vous avez le temps et l'envie, ce lien est la documentation des socket.io, si quelqu'un peut faire un petit test et voir si ça fonctionne chez lui, ce serai très gentil.
j'ai utilisé tout ces codes, mais emit() ne fonctionne toujours pas.

**Watilin** · 24/11/2016, 18h27

Salut,

Code :

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

1
2
$('form').on('submit', function (e) {
  …

Il n’y a pas de bouton submit dans ton formulaire

il n’est jamais soumis…

**Toufik83** · 24/11/2016, 20h33

si le formulaire est bien émis, j'ai mis une alert() dans

Code :

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

$('form').on('submit',function(){alert('formulaire envoyé');});

et l'alerte est bien là.

**Watilin** · 24/11/2016, 20h59

Ok, je vais tester. Tu es sous quelles versions de Node et Windows ?
Et pourquoi tu utilises XAMPP ? Assure-toi qu’il n’entre pas en conflit avec Node.

**Toufik83** · 24/11/2016, 21h13

la version du node est 6.9.1, j'utilise xampp depuis toujours.
la version de Windows est : Windows 7 édition intégrale. (Modèl : windows se7en titan).
je vous signale que lorsque je tape la commande : node index.js dans le cmd, puis je vais dans le navigateur pour lancer le site depuis localhost, je reçois bien le message 'utilisateur se connecte' (index.js ligne 25), celà veut dire que la connexion entre le serveur et le client est bien lancée.

**Toufik83** · 25/11/2016, 22h16

parfait! le problème est résolu.
je partage la solution, si jamais quelqu'un aura le même souci.

il fallait utiliser le nom d'espace 'namespace', l'arborescence de mes fichier sous htdocs de xampp est comme suite :
Pièce jointe 225901

NOTEZ QUE le fichier serveur (index.js) se trouve dans le dossier 'IOSocket', et IOSocket se trouve dans le dossier racine htdocs de xampp.

le moment quand j'ai fais

Code :

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

var io = io.connect('http://localhost:3000/IOSocket');

au niveau client (index.html ligne :10), la partie IOSocket est prise comme un nom d'espace, et pas comme un dossier, donc pour détecter les messages envoyés par les utilisateurs qui sont connectés a ce nom d'espace, il faut écrire au niveau serveur :

Code :

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

io.of('/IOSocket').on('event',function(){/*....*/});

et NON PAS :

Code :

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

io.on('event',function(){/*....*/});

après ces changements, maintenant la socket fonctionne correctement
Pièce jointe 225903

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
 
<body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" name="messg" autocomplete="off" />
	</form>
	<script type="text/javascript" src="../global_jQuery/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="node_modules/socket.io-client/socket.io.js"></script>
    <script type="text/javascript">
        var io = io.connect('http://localhost:3000/IOSocket');
        $(function () {
            io.on('connect', function () {// io.on('connect') est obligatoire!
                var person = prompt("Entrez un Pseudo");
                console.log(person);
                io.emit('user-join', { user: person, text: ' a rejoint le salon.' });
                io.on('rep-user-join', function (data) {
                    $('#messages').append($('<li>').text(data.user + ':' + data.text));
                    console.log(data);
                });
                io.on('send', function (msg) {
                    $('#messages').append($('<li>').html('<strong>' + msg.user + '</strong> : ' + msg.text));
                    console.log(msg.text);
                });
 
                io.on('rejoint', function (data) {
                    console.log("data :" + data.will);
                    $('body').append("<p>Depuis le serveur :" + data.will + '</p>\n');
                });
 
                $('form').on("submit", function (e) {
                    e.preventDefault();
                    var _message = { text: $("#m").val(), user: person };
                    if (_message.text.trim() !== 0 && _message.user != null) {
                        io.emit('chatmessage', _message);
                        $('#m').val('');
                    }
                    else alert('Formulaire Invalide');
                });
 
            });//fin io.on('connect')
 
        });
 
 
    </script>
 
 
  </body>

index.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
 
var express=require('express')
, app = express()
, server = require('http').Server(app)
, io = require('socket.io')(server)
,NameSpace;
 
app.get('/', function(req, res){
  res.sendFile('index.html');
});
 
io.of('/IOSocket').on('connection', function (socket) {
 
    //this OU io.of('/IOSocket'), c'est la même chose.
    NameSpace = this;
    NameSpace.emit('rejoint', { will: "ce texte sera recu par tout le monde!" });//on utilise this ou io.of('/NameSpace') pour envoyer les données DEPUIS LE SERVEUR VERS LE CLIENT et pas le contraire.
 
    socket.on('user-join', function (data) {//on utilise 'socket' pour détecter les events Clients, (pas 'io.on(...)' ).
        console.log(data.user + data.text);
        NameSpace.emit('rep-user-join', data);// toujours emit avec this ou io.of('/n')
    });
    socket.on('chatmessage', function (msg) {
        console.log(msg.user + ' a ecrit  :' + msg.text);
        NameSpace.emit('send', msg);
 
    });
    //console.log("utilisateur se connecte !");
});
 
server.listen(3000, function () {
    console.log("Serveur à l'ecoute du port :" + server.address().port);
});

Utilisation emit() avec express@4.10.2

NodeJS

Discussions similaires

Partager

Partager