web-dev-qa-db-fra.com

Utilisation de socket.io dans Express 4 et de / bin / www

Alors voici le deal: j'essaye d'utiliser socket.io dans un projet express. Après le lancement d’Express Js 4, j’ai mis à jour mon générateur d’express et maintenant les fonctions initiales de l’application sont placées dans le fichier ./bin/www, Y compris ces vars (contenu du fichier www: http://jsfiddle.net/avMa5 / )

var server = app.listen(app.get('port'), function() {..}

(vérifiez par npm install -g express-generator puis par express myApp

cela dit, rappelons-nous comment les documents socket.io nous demandent de le déclencher:

var app = require('express').createServer();
var io = require('socket.io')(app);

Ok mais je ne peux pas le faire dans app.js, comme recommandé. Cela devrait être fait dans ./bin/www pour pouvoir fonctionner. dans ./bin/www, voici ce que je peux faire pour le faire fonctionner:

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

Ok cela fonctionne, mais je ne peux pas utiliser la var io ailleurs, et je ne veux vraiment pas mettre mes fonctions socket.io sur le fichier www.

Je suppose que ceci est juste une syntaxe de base, mais je ne peux pas le faire fonctionner, même pas avec module.exports = server Ou server.exports = server Ni module.exports.io = app(io) sur le fichier www

La question est donc: comment utiliser socket.io avec ce fichier/bin/www comme point de départ de mon application?

javascriptnode.jsexpresssocket.io
82
user1576978

Il s’avère que c’est vraiment un problème de base avec sintax .... Je reçois ces lignes de ce tutoriel sur le chat socket.io ...

sur ./bin/www, juste après var server = app.listen(.....)

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

alors maintenant, je crée le fichier ../sockets/base.js et j'y place ce petit bonhomme:

module.exports = function (io) { // io stuff here... io.on('conection..... }

Ouais! Maintenant ça marche ... Donc je suppose que je n'avais vraiment pas d'autre choix que de démarrer socket.io dans/bin/www, car c'est là que mon serveur http a été démarré. Le but est que je puisse maintenant créer la fonctionnalité de socket dans un ou plusieurs autres fichiers, en gardant la chose modulaire, par require('fileHere')(io);

<3

39
user1576978

J'ai une solution pour rendre socket.io disponible dans app.js.

app.js:

var express      = require( "express"   );
var socket_io    = require( "socket.io" );

// Express
var app          = express();

// Socket.io
var io           = socket_io();
app.io           = io;

(...)

// socket.io events
io.on( "connection", function( socket )
{
    console.log( "A user connected" );
});

module.exports = app;

// Or a shorter version of previous lines:
//
//    var app = require( "express"   )();
//    var io  = app.io = require( "socket.io" )();
//    io.on( "connection", function( socket ) {
//        console.log( "A user connected" );
//    });
//    module.exports = app;

bin/www:

(...)

/**
 * Create HTTP server.
 */

var server = http.createServer( app );


/**
 * Socket.io
 */

var io     = app.io
io.attach( server );

(...)

De cette façon, vous pouvez accéder à la variable io dans votre app.js et même la rendre disponible pour vos routes en définissant module.exports comme une fonction qui accepte io en tant que paramètre.

index.js

module.exports = function(io) {
    var app = require('express');
    var router = app.Router();

    io.on('connection', function(socket) { 
        (...) 
    });

    return router;
}

Ensuite, passez io dans le module après sa configuration:

app.js

// Socket.io
var io = socket_io();
app.io = io;

var routes = require('./routes/index')(io);
155
Gabriel Hautclocq

Une approche légèrement différente pour initier socket.io, Elle regroupe tous les codes associés en un seul endroit:

bin/www

/**
 * Socket.io
 */
var socketApi = require('../socketApi');
var io = socketApi.io;
io.attach(server);

socketApi.js

var socket_io = require('socket.io');
var io = socket_io();
var socketApi = {};

socketApi.io = io;

io.on('connection', function(socket){
    console.log('A user connected');
});

socketApi.sendNotification = function() {
    io.sockets.emit('hello', {msg: 'Hello World!'});
}

module.exports = socketApi;

app.js

// Nothing here

De cette façon, tout le code lié à socket.io Dans un module et qui fonctionne à partir de celui-ci peut être appelé de n'importe où dans l'application.

44
Anatoly

Les anciens "expressjs", tout se passe dans le fichier "app.js". Ainsi, la liaison socket.io au serveur se produit également dans ce fichier. (BTW, on peut toujours le faire à l'ancienne, et enlever bin/www)

Maintenant, avec les nouveaux expressjs, cela doit se passer dans le fichier "bin/www".

Heureusement, javascript/requirejs facilitait le transfert d'objets. Comme l'a souligné Gabriel Hautclocq, socket.io est toujours "importé" dans "app.js" et il est attaché à l'objet "app" via une propriété.

app.io = require('socket.io')();

Le socket.io est rendu live en y attachant le serveur dans "bin/www"

app.io.attach(server);

car l'objet "app" est passé dans "bin/www" plus tôt

app = require("../app");

C'est vraiment aussi simple que

require('socket.io')().attach(server);

Mais le faire de manière "difficile" garantit que app.io contient maintenant l'objet socke.io.

Maintenant, si vous avez besoin de cet objet socket.io également dans "routes/index.js" par exemple, utilisez simplement le même principe pour le transmettre.

D'abord dans "app.js", do

app.use('/', require('./routes/index')(app.io));

Puis dans "routes/index.js"

module.exports = function(io){
    //now you can use io.emit() in this file

    var router = express.Router();



    return router;
 }

Donc "io" est injecté dans "index.js".

19
Zhe Hu

Mise à jour de la réponse de Gabriel Hautclocq :

Dans le fichier www, le code devrait apparaître comme suit à cause des mises à jour avec Socket.io. Attach est maintenant à l'écoute. 

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);


/**
 * Socket.io
 */
var io = app.io;
io.listen(server);`

De plus, pour que cette connexion fonctionne, il faut également implémenter l'API côté client. Ce n’est pas spécifique à Express, mais sans cela, l’appel de connexion ne fonctionnera pas. L'API est inclus dans

/node_modules/socket.io-client/socket.io.js.

Incluez ce fichier sur le serveur et testez-le avec les éléments suivants:

var socket = io.connect('http://localhost:3000');
9
rickrizzo

Après avoir lu tous les commentaires, je suis arrivé à ce qui suit en utilisant Version du serveur Socket.io: 1.5.0

Problèmes que j'ai rencontrés:

  1. var sockIO = require ('socket.io') devrait être var sockIO = require ('socket.io') () . (Crédit à: Zhe H )

  2. sockIO.attach devrait être sockIO. listen (crédit à: rickrizzo )

Étapes

  1. Installez Socket.io avec la commande suivante:

    npm install --save socket.io

  2. Ajoutez ce qui suit à app.js :

    var sockIO = require('socket.io')();
app.sockIO = sockIO;

  3. Dans bin/www , après var serveur = http.createServer (app), ajoutez les éléments suivants:

    var sockIO = app.sockIO;
sockIO.listen(server);

  4. Pour tester la fonctionnalité, dans app.js , vous pouvez ajouter la ligne suivante:

    sockIO.on('connection', function(socket){
    console.log('A client connection occurred!');
});
6
Brian

Un tutoriel pour débutants de Cedric Pabst
Voici les notions de base qui forment le lien pour un chat d'application:

utilisant express-generate et le moteur ejs utilisable dans tous les routages standard de fichiers .ejs dans express-generate

éditez le fichier bin\www et ajoutez cette app.io.attach (serveur); comme ça

...
/*
 * Create HTTP server.
/*  
var server = http.createServer(app);
/*
 * attach socket.io
/*  
app.io.attach(server); 
/*
 * Listen to provided port, on all network interfaces.
/*  
...

éditer dans app.js 

//connect socket.io
... var app = express();
// call socket.io to the app
app.io = require('socket.io')();

//view engine setup
app.set('views', path.join(_dirname, 'views'));
...



...
//start listen with socket.io
app.io.on('connection', function(socket){
console.log('a user connected');

// receive from client (index.ejs) with socket.on
socket.on('new message', function(msg){
      console.log('new message: ' + msg);
      // send to client (index.ejs) with app.io.emit
      // here it reacts direct after receiving a message from the client
      app.io.emit('chat message' , msg);
      });
});
...
module.exports = app;

éditer dans index.ejs 

 <head>  
   <title><%= title %></title>
   <link rel='stylesheet' href='/stylesheets/style.css' />
   <script src="/socket.io/socket.io.js"></script>
   //include jquery
   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
   <script>
   var socket = io();
   //define functions socket.emit sending to server (app.js) and socket.on receiving 
     // 'new message' is for the id of the socket and $('#new-message') is for the button
     function sendFunction() {
     socket.emit('new message', $('#new-message').val());
     $('#new-message').val('');
   }
    // 'chat message' is for the id of the socket and $('#new-area') is for the text area
   socket.on('chat message', function(msg){
     $('#messages-area').append($('<li>').text(msg));
   });
   </script>
 </head>  

 <body>  
   <h1><%= title %></h1>
   <h3>Welcome to <%= title %></h3>
   <ul id="messages-area"></ul>
   <form id="form" onsubmit="return false;">
     <input id="new-message" type="text" /><button onclick="sendFunction()">Send</button>
   </form>
 </body>

Amusez-vous bien :) et merci beaucoup à Cedric Pabst

5
AnnaBanana

Certaines réponses précédentes ne fonctionnent pas et d'autres sont trop compliquées. Essayez plutôt la solution suivante ...

Installez les modules de noeud socket.io côté serveur et côté client:

npm install --save socket.io socket.io-client

Du côté serveur

Ajoutez le code suivant à bin/www après la définition du serveur, var server = http.createServer(app);:

/**
 * Socket.io
 */

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

io.on("connection", function(socket){
  console.log("SOCKET SERVER CONNECTION");
  socket.emit('news', { hello: 'world' });
});

Côté client

Si vous utilisez Webpack, ajoutez le code suivant à votre fichier Webpack entry.js:

var socket = require('socket.io-client')();
socket.on('connect', function(){
  console.log("SOCKET CLIENT CONNECT")
});

socket.on('news', function(data){
  console.log("SOCKET CLIENT NEWS", data)
});

Terminé. Visitez votre site et vérifiez la console de développement js du navigateur.

2
s2t2