web-dev-qa-db-ja.com

Express 4でsocket.ioおよびエクスプレスジェネレーターの/ bin / wwwを使用する

だからここに契約がある：私は特急プロジェクトでsocket.ioを使用しようとしています。 Express Js 4がリリースされた後、エクスプレスジェネレーターを更新し、アプリの初期関数がこれらの変数を含む./bin/wwwファイルに追加されました（wwwファイルの内容： http://jsfiddle.net/ avMa5 / ）

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

（npm install -g express-generatorで確認してからexpress myAppで確認してください

そうは言っても、socket.io docsがどのようにそれを起動するように要求するかを思い出しましょう：

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

わかりましたが、推奨されているように、app.js内ではできません。動作させるには、。/ bin/wwwでこれを行う必要があります。 ./bin/wwwで、これを機能させるためにできることは次のとおりです。

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

これでうまくいきますが、他の場所ではio varを使用できません。socket.io関数をwwwファイルに配置したくありません。

これは基本的な構文だと思いますが、wwwファイルでmodule.exports = serverまたはserver.exports = serverもmodule.exports.io = app(io)を使用していなくても、これを機能させることはできません。

したがって、質問は次のとおりです。この/ bin/wwwファイルをアプリの開始点として持つsocket.ioをどのように使用できますか？

javascriptnode.jsexpresssocket.io
82
user1576978

それは本当にいくつかの基本的なシンタックスの問題だったことが判明しました.... this socket.io chat tutorial ...

./bin/wwwのvar server = app.listen(.....)の直後

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

そこで、../sockets/base.jsファイルを作成し、この小さな仲間をその中に入れます。

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

うん！これで動作します...ですから、/ bin/www内でsocket.ioを起動する以外にオプションはなかったと思います。これは、httpサーバーが起動した場所だからです。目標は、require('fileHere')(io);により、モジュールを維持しながら、他のファイルにソケット機能を構築できるようになることです。

<3

39
user1576978

Socket.ioを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 );

(...)

このようにして、app.jsのio変数にアクセスし、ioをパラメーターとして受け入れる関数としてmodule.exportsを定義することで、ルートで使用できるようにすることもできます。

index.js

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

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

    return router;
}

次に、セットアップ後にモジュールにioを渡します。

app.js

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

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

socket.ioを開始するための少し異なるアプローチは、すべての関連コードを1つの場所にグループ化します。

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

このようにして、1つのモジュール内のすべてのsocket.io関連コードとそれから機能するアプリケーションのどこからでも呼び出すことができます。

44
Anatoly

古い「expressjs」、すべてが「app.js」ファイルで発生しています。したがって、サーバーへのsocket.ioバインディングもそのファイルで発生します。 （ところで、まだ古い方法でそれを行うことができ、bin/wwwを削除できます）

新しいexpressjsでは、「bin/www」ファイルで発生する必要があります。

さいわい、javascript/requirejsを使用すると、オブジェクトを簡単に渡すことができました。 Gabriel Hautclocqが指摘したように、socket.ioはまだ「app.js」に「インポート」されており、プロパティを介して「app」オブジェクトにアタッチされます

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

Socket.ioは、「bin/www」でサーバーに接続することでライブになります

app.io.attach(server);

「app」オブジェクトは先に「bin/www」に渡されるため

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

それは本当に同じくらい簡単です

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

しかし、それを「難しい」方法で行うことで、app.ioがsocke.ioオブジェクトを保持するようになります。

たとえば、「routes/index.js」でもこのsocket.ioオブジェクトが必要な場合は、同じ原則を使用してそのオブジェクトを渡すだけです。

最初に「app.js」で、

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

次に、「routes/index.js」で

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

    var router = express.Router();



    return router;
 }

したがって、「io」は「index.js」に挿入されます。

19
Zhe Hu

Gabriel Hautclocq の応答の更新：

Wwwファイルでは、Socket.ioの更新により、コードは次のように表示されます。 アタッチがリッスンしました。

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

さらに、その接続を機能させるには、クライアント側のAPIも実装する必要があります。これはExpress固有のものではありませんが、これがないと接続呼び出しは機能しません。 APIはに含まれています

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

このファイルをフロントエンドに含め、以下でテストします。

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

すべてのコメントを読んだ後、Socket.io Server Version：1.5.0を使用して次のことを思いつきました。

私が遭遇した問題：

  1. var sockIO = require（ 'socket.io'）はvar sockIO = require（ 'socket.io'）（）。 （クレジット： Zhe H ）

  2. sockIO.attachはsockIOである必要があります。listen（クレジット： rickrizzo ）

手順

  1. 次のコマンドでSocket.ioをインストールします。

    npm install --save socket.io

  2. 以下をapp.jsに追加します：

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

  3. bin/wwwで、var server = http.createServer（app）の後に、以下を追加します。

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

  4. 機能をテストするには、app.jsで次の行を追加できます。

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

初心者向けチュートリアルfrom Cedric Pabst
アプリチャットのリンクを構成する短い基本は次のとおりです。

express-generateおよびexpress-generateのすべての.ejsファイル標準ルーティングで使用可能なejsエンジンを使用

ファイルbin\wwwを編集して、このapp.io.attach（server）を追加します。このような

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

編集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;

編集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>

楽しんでください:)そして Cedric Pabst に感謝します

5
AnnaBanana

以前の回答の中には機能しないものや、過度に複雑なものがあります。代わりに次の解決策を試してください...

サーバー側とクライアント側のsocket.ioノードモジュールをインストールします。

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

サーバ側

サーバー定義var server = http.createServer(app);の後のbin/wwwに次のコードを追加します。

/**
 * Socket.io
 */

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

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

クライアント側

Webpackを使用している場合、次のコードを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)
});

できたサイトにアクセスして、ブラウザのjs開発者コンソールを確認してください。

2
s2t2