Nodejs : Socket.io

Socket.io ne semble pas s'initialiser. Utilisé avec AngularJS.

a marqué ce sujet comme résolu.

Bonjour, j'ai essayé de créer un chat sur mon site web à l'aide de socket.io, seulement, ce dernier ne semble pas fonctionner. Le problème est que je n'ai aucun message d'erreur. De plus le message "User connected" ne s'affiche pas dans l'invite de commande alors que c'est la première chose qui devrait s'afficher lors de la connexion sur le site. En effet voici le début du fichier chat.js:

1
2
io.sockets.on("connection", function(socket) {
  console.log("User connected");

Peut-être l'utilisation de socket.io est différente avec AngularJS ? Voici les codes :)

Client :

 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
  login.controller("chat", function($scope, profileData) {

    var socket = io.connect('http://localhost:8080'); // Socket io

    $scope.chat = {
      //users: [{
      //        pseudo: new String(),
      //        gravatar: new String()
      //       }],
      //blocks: [{
      //         pseudo: new String(),
      //         time: new String(),
      //         message: new String()
      //        }]
    }

    $scope.getMessageType = function(pseudo) {
      return {
      //  messageByMe: pseudo == $scope.user.pseudo,
      //  messageByAnother: pseudo != $scope.user.pseudo
      }
    }

    $scope.me = profileData.getProfile()
      .then(function(profile) { // On get le profile, une fois que c'est fait, on l'ajoute dans la var
      $scope.user = profile;
      socket.emit("connect", {user: $scope.user.pseudo, gravatar: $scope.user.gravatar});
    }, function(msg) {
      alert("msg"); // Sinon message d'erreur
    });

    $scope.sendMessage = function(event) {
      if($scope.box.message) {
        socket.emit("message", {message: $scope.box.message}) // Lorsqu'on envoi un nouveau message
        $("#boxMessage").val(" "); // On vide le textarea
      }
      event.preventDefault();
    }

    socket.on("newMessage", function(message) {
      console.log("new message");
      $scope.chat.blocks.push(message);
      $("#message").animate({scrollTop: $("#message").prop("scrollHeight")}, 500);
    });

    socket.on("newUser", function(data) {
      console.log("user connected")
      $scope.chat.users.push({pseudo: data.user, gravatar: data.gravatar}); // On ajoute l'user
    })
    socket.on("disconnect", function(user) {
      console.log("user disconnected");
      $scope.chat.users.slice(indexOf(user), 1); // On retire l'user
    })
  });

Serveur :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var express = require("express"); // Routes
var app = express();
var http = require("http");
var server = http.Server(app);
var io = require("socket.io")(server); // Socket io

io.sockets.on("connection", function(socket) {
  console.log("User connected");

  socket.on("connect", function(data){
    console.log("ok");
    console.log("user");
    console.log("gravatar");
    console.log(data.user + "est connecté");
    socket.emit("newUser", data);
  });

  socket.on("message", function(user, message) {
    console.log(user + ": " + message);
    socket.emit("newMessage", message)
  });

});

En espérant que quelqu'un puisse m'éclairer, Merci d'avance. Mathieu.

Petit rappel de l'API Webscoket coté client (Angular) :

  • socket.onopen : écoute la connexion (savoir si la connexion vers le serveur WS est bien faite)
  • socket.onmessage : récupère les messages
  • socket.send : envoie un message

Une petite idée d'application de ces fonctions sur Angular :

 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
// Tableau vide contenant les prochains messages
$scope.messages = [];

// Connexion au serveur WS
var socket = new WebSocket("ws://localhost:8080/ws");

// Pas de connexion avec le serveur WS
socket.onclose = function(e) {
    console.error('Déconnecté');
};

// Connexion avec le serveur WS
socket.onopen = function(e) {
    console.log('Connecté');
};

// Réception des messages en provenance du serveur WS
socket.onmessage = function(e){
    $scope.$apply(function(){
        $scope.messages.push(data);
    });
};

// Envoi d'un message
$scope.send = function() {
    data = {
      "content": $scope.msg,
    }
    // Envoi des données au serveur (au format JSON)
    socket.send(JSON.stringify(data));
    $scope.msg = "";
}

Sur Chrome, va dans l'outil de développeur (F12) puis dans l'onglet "Networks", cliques sur l'onglet "WS" correspondant à ton serveur WS et ensuite sur "frame". Si ton application marche correctement, tu devrais voir les messages envoyés à ton serveur WS.

+0 -0

Le problème est que je n'ai aucun message d'erreur. De plus le message "User connected" ne s'affiche pas dans l'invite de commande alors que c'est la première chose qui devrait s'afficher lors de la connexion sur le site. En effet voici le début du fichier chat.js:

1
2
io.sockets.on("connection", function(socket) {
  console.log("User connected");

Mathieu.

Matiuso

Cela marche de mon coté en ayant consulté cet article http://gulivert.ch/create-a-chat-app-with-nodejs-express-and-socket-io

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte