javascript - Usando socket.io en Express 4 y express-generator''s/bin/www

node.js

Question

Así que aquí está el trato: estoy tratando de usar socket.io en un proyecto express. Después de que se lanzó Express Js 4, actualicé mi generador de expresiones y ahora las funciones iniciales de la aplicación ./bin/www en el archivo ./bin/www , incluidos los archivos ./bin/www (www file contents: http://jsfiddle.net/avMa5/ )

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

(compruébalo con npm install -g express-generator y luego express myApp

Dicho esto, recordemos cómo socket.io nos pide que lo activemos:

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

Ok, pero no puedo hacerlo dentro de app.js, como recomendado. Esto debe hacerse en ./bin/www para poder funcionar. en ./bin/www esto es lo que puedo hacer para que funcione:

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

Ok, esto funciona, pero no puedo usar el io var en ningún otro lado, y realmente no quiero poner mis funciones socket.io en el archivo www .

Supongo que esto es solo una sintaxis básica, pero no puedo hacer que esto funcione, ni siquiera usando module.exports = server o server.exports = server ni module.exports.io = app(io) en el archivo www

Entonces, la pregunta es: ¿cómo puedo usar socket.io teniendo este archivo / bin / www como punto de partida de mi aplicación?

Answer 1

Actualización a la respuesta de :

En el archivo www, el código debería aparecer como el siguiente debido a las actualizaciones con Socket.io. Attach ahora es Listen.

/**
 * 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);`

Además, para que esa conexión funcione también es necesario implementar la API del lado del cliente. Esto no es específico de Express, pero sin él la llamada de conexión no funcionará. La API está incluida en

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

Incluya este archivo en la interfaz y pruebe con lo siguiente:

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

Answer 2

Algunas respuestas anteriores no funcionan y otras son demasiado complicadas. Pruebe la siguiente solución en su lugar ...

Instale los módulos de nodo socket.io del lado del servidor y del lado del cliente:

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

Lado del servidor

Agregue el siguiente código a bin / www después de la definición del servidor, 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'' });
});

Lado del cliente

Si usa el paquete web, agregue el siguiente código a su archivo 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)
});

Hecho. Visite su sitio y consulte la consola de desarrollador de js del navegador.

Answer 3

Después de leer todos los comentarios, se me ocurrió lo siguiente al usar Socket.io Server Version: 1.5.0

Problemas con los que me encontré:

1. var sockIO = require (''socket.io'') debe ser var sockIO = require (''socket.io'') () . (Crédito a: )

2. sockIO.attach debería ser sockIO. escuchar (crédito a: )

Pasos

1. Instale Socket.io con el siguiente comando:

   npm install --save socket.io

2. Agregue lo siguiente a app.js :

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

3. En bin / www , después de var server = http.createServer (app) , agregue lo siguiente:

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

4. Para probar la funcionalidad, en app.js , puede agregar la línea:

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

Answer 4

Los viejos "expressjs", todo está sucediendo en el archivo "app.js". Entonces el enlace de socket.io al servidor también ocurre en ese archivo. (Por cierto, uno todavía puede hacerlo de la manera antigua, y eliminar bin / www)

Ahora con el nuevo expressjs, tiene que suceder en el archivo "bin / www".

Afortunadamente, javascript / requirejs facilitó el paso de objetos. Como señaló Gabriel Hautclocq, socket.io todavía se "importa" en "app.js" y se adjunta al objeto "aplicación" a través de una propiedad

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

El socket.io se crea en vivo adjuntando el servidor en "bin / www"

app.io.attach(server); 

porque el objeto "aplicación" se pasa a "bin / www" antes

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

Es realmente tan simple como

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

Pero hacerlo de la manera "difícil" asegura que app.io ahora contiene el objeto socke.io.

Ahora, si necesita este objeto socket.io también en "routes / index.js" por ejemplo, simplemente use el mismo principio para pasar ese objeto.

Primero en "app.js", hazlo

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

Luego en "routes / index.js"

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

    var router = express.Router();



    return router;
 }

Entonces, "yo" se inyecta en "index.js".

Answer 5

Resultó que realmente era un problema sintaxis básico ... Obtuve estas líneas de este tutorial de chat de socket.io ...

en ./bin/www, justo después de var server = app.listen(.....)

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

así que ahora creo el archivo ../sockets/base.js y coloco a este pequeño compañero dentro de él:

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

¡Sí! Ahora funciona ... Así que supongo que realmente no tuve más opción que iniciar socket.io dentro de / bin / www, porque ahí es donde se inició mi servidor http. El objetivo es que ahora pueda construir una funcionalidad de socket en otro (s) archivo (s), manteniendo la cosa modular, por require(''fileHere'')(io);

<3

Answer 6

Tengo una solución para hacer que socket.io esté disponible en 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 esta forma, puede acceder a la variable io en su app.js, e incluso ponerla a disposición de sus rutas definiendo module.exports como una función que acepta io como parámetro.

index.js

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

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

    return router;
}

Luego, pase io al módulo después de que esté configurado:

app.js

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

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

Answer 7

Un enfoque un poco diferente para iniciar socket.io , agrupa todo el código relacionado en un solo lugar:

www / bin

/**
 * 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 esta forma, todo el código relacionado con socket.io en un módulo y su función puedo invocar desde cualquier lugar de la aplicación.

Answer 8

Un tutorial para principiantes de Cedric Pabst
aquí están los conceptos básicos breves del enlace para un chat de aplicaciones:

utilizando express-generate y el motor ejs utilizable en cada enrutamiento estándar de archivo .ejs en express-generate

edite el archivo bin / www y agregue esta aplicación.io.attach (servidor); Me gusta esto

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

editar en 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;

editar en 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>

Diviértete :) y muchas gracias a Cedric Pabst