it-swarm.com.de

Verwenden von socket.io in Express 4 und des Express-Generators / bin / www

Also hier ist der Deal: Ich versuche, socket.io in einem Express-Projekt zu verwenden. Nachdem Express Js 4 gestartet wurde, habe ich meinen Express-Generator aktualisiert und jetzt werden die anfänglichen Funktionen der App in der Datei ./bin/www Abgelegt, einschließlich dieser Variablen (Inhalt der WWW-Datei: http://jsfiddle.net)/avMa5 / )

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

(Überprüfen Sie dies mit npm install -g express-generator und dann mit express myApp.

denken wir jedoch daran, wie socket.io docs uns auffordert, es auszulösen:

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

Ok, aber ich kann es nicht in app.js tun, wie empfohlen. Dies sollte in ./bin/www erfolgen, um zu arbeiten. Dies ist, was ich tun kann, um es zum Laufen zu bringen:

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

Ok, das funktioniert, aber ich kann das io var nirgendwo anders verwenden, und ich möchte meine socket.io-Funktionen wirklich nicht in die www -Datei einfügen.

Ich denke, dies ist nur eine einfache Syntax, aber ich kann sie nicht zum Laufen bringen, auch nicht mit module.exports = server Oder server.exports = server Oder module.exports.io = app(io) in einer WWW-Datei

Die Frage ist also: Wie kann ich socket.io verwenden, wenn ich diese/bin/www-Datei als Ausgangspunkt für meine App habe?

82
user1576978

Es stellte sich heraus, dass es sich wirklich um ein grundlegendes Problem mit Sintax handelte ... Ich habe diese Zeilen von diesem Tutorial für Socket.io-Chats ...

am ./bin/www, kurz nach var server = app.listen(.....)

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

so, jetzt erstelle ich die Datei ../sockets/base.js und setze diesen kleinen Kerl hinein:

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

Ja! Jetzt funktioniert es ... Also ich glaube, ich hatte wirklich keine andere Wahl als socket.io in/bin/www zu starten, weil dort mein http-Server gestartet wurde. Das Ziel ist, dass ich jetzt Socket-Funktionalität in andere Datei (en) einbauen kann, indem ich das Ding modular halte, indem ich require('fileHere')(io);

<3

39
user1576978

Ich habe eine Lösung, um socket.io in app.js verfügbar zu machen.

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 );

(...)

Auf diese Weise können Sie auf die Variable io in Ihrer app.js zugreifen und sie sogar für Ihre Routen verfügbar machen, indem Sie module.exports als eine Funktion definieren, die io als Parameter akzeptiert.

index.js

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

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

    return router;
}

Übergeben Sie dann io an das Modul, nachdem es eingerichtet wurde:

app.js

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

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

Ein etwas anderer Ansatz zum Einleiten von socket.io gruppiert den gesamten zugehörigen Code an einem Ort:

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

Auf diese Weise alle socket.io verwandter Code in einem Modul und Funktion daraus Ich kann von überall in der Anwendung aufrufen.

44
Anatoly

Die alten "expressjs", alles passiert in der Datei "app.js". Die socket.io-Bindung an den Server findet also auch in dieser Datei statt. (Übrigens, man kann es immer noch auf die alte Weise tun und bin/www entfernen)

Mit den neuen Expressjs muss dies nun in der Datei "bin/www" geschehen.

Glücklicherweise machte es Javascript/requirejs einfach, Objekte weiterzugeben. Wie Gabriel Hautclocq betonte, wird socket.io immer noch in "app.js" "importiert" und über eine Eigenschaft an das "app" -Objekt angehängt

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

Die socket.io wird live geschaltet, indem der Server in "bin/www" daran angehängt wird

app.io.attach(server); 

weil das "app" -Objekt früher an "bin/www" übergeben wurde

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

Es ist wirklich so einfach wie

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

Aber die "schwierige" Art, es zu tun, stellt sicher, dass app.io enthält jetzt das Objekt socke.io.

Wenn Sie dieses socket.io-Objekt beispielsweise auch in "routes/index.js" benötigen, verwenden Sie einfach dasselbe Prinzip, um dieses Objekt weiterzugeben.

Zuerst in "app.js" machen

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

Dann in "routes/index.js"

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

    var router = express.Router();



    return router;
 }

Also wird "io" in "index.js" eingefügt.

19
Zhe Hu

Update auf Gabriel Hautclocq s Antwort:

In der www-Datei sollte der Code aufgrund von Aktualisierungen mit Socket.io wie folgt aussehen. Attach is now 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);`

Um diese Verbindung zum Laufen zu bringen, muss außerdem die clientseitige API implementiert werden. Dies ist nicht Express-spezifisch, aber ohne es wird der Verbindungsaufruf nicht funktionieren. Die API ist in enthalten

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

Fügen Sie diese Datei in das Front-End ein und testen Sie sie wie folgt:

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

Nachdem ich alle Kommentare gelesen hatte, kam ich zu folgendem Ergebnis mit Socket.io Server Version: 1.5.

Probleme, auf die ich gestoßen bin:

  1. var sockIO = require ('socket.io') sollte sein var sockIO = require ('socket.io') (). (Dank an: Zhe H )

  2. sockIO.attach sollte sockIO sein .listen (Credit to: rickrizzo )

Schritte

  1. Installieren Sie Socket.io mit dem folgenden Befehl:

    npm install --save socket.io
    
  2. Fügen Sie Folgendes zu app.js hinzu:

    var sockIO = require('socket.io')();
    app.sockIO = sockIO;
    
  3. Fügen Sie in bin/www nach var server = http.createServer (app) Folgendes hinzu:

    var sockIO = app.sockIO;
    sockIO.listen(server);
    
  4. Um die Funktionalität zu testen, können Sie in app.js die folgende Zeile hinzufügen:

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

Ein Tutorial für Anfänger von Cedric Pabst
hier sind die kurzen Grundlagen, die den Link für einen App-Chat bilden:

mit express-generate und der in jeder .ejs-datei verwendbaren ejs engine standard routing in express-generate

bearbeite die Datei bin\www und füge diese app.io.attach (server) hinzu; so was

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

edit in 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;

edit in 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>

Viel Spaß :) und vielen Dank an Cedric Pabst

5
AnnaBanana

Einige frühere Antworten funktionieren nicht und andere sind zu kompliziert. Versuchen Sie stattdessen die folgende Lösung ...

Installieren Sie serverseitige und clientseitige socket.io-Knotenmodule:

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

Serverseitig

Fügen Sie nach der Serverdefinition var server = http.createServer(app); den folgenden Code zu bin/www hinzu:

/**
 * Socket.io
 */

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

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

Client-Seite

Wenn Sie ein Webpack verwenden, fügen Sie Ihrem Webpack den folgenden Code hinzu entry.js file:

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)
});

Getan. Besuchen Sie Ihre Site und überprüfen Sie die js-Entwicklerkonsole des Browsers.

2
s2t2