Express 4およびexpress-generatorの/ bin / wwwでのsocket.ioの使用

93

だからここに取り引きがあります：私は高速プロジェクトで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を他の場所で使用することはできませんwww。また、socket.io関数をファイルに配置したくありません。

私は、これは単なる基本的な構文であると思いますが、私は仕事にこれを取得することはできません、でも使用していないmodule.exports = serverかserver.exports = serverもmodule.exports.io = app(io)WWWのファイルに

それで問題は、この/ bin / wwwファイルを私のアプリの開始点としてsocket.ioを使用するにはどうすればよいですか？

javascript  node.js  express  socket.io 
— user1576978
ソース
インポートをに置く必要はありません./bin/www.。同じ場所に置いてくださいvar app。
— alandarev 2014
15
人々がexpress-ioを提案するのをやめてほしいです。それは時代遅れで、もはや維持されていません。
— ベンフォーチュン
@Mritunjayありがとう、しかしそれはそれを解決しませんでした：/
— user1576978
@BenFortuneごめんなさい。
— Mritunjay 2014
@alandarev var app = express（）?? 私は実際に試してみましたが、成功しませんでした
— user1576978 '07 / 07/14

回答:

160

私は、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);
— ガブリエル・オートクロック
ソース
1
NodeJSは初めてです。ファイルのこの行app.io = io;で正確に何が行われているのか説明してください app.js
— Aryak Sengupta '25
3
それは単にio変数をappオブジェクトに入れることの問題です。次の場合もあります。app.io = socket_io（）;
— Gabriel Hautclocq 2015
7
「...そして、必要に応じて、ルートで利用できるようにします。」わかりました、でもどうやって？それを行う方法の例を挙げていただければ幸いです。
— scaryguy
2
オブジェクトにカスタムプロパティをアタッチするのは悪いことではありませんappか？記号またはを使用することをお勧めしますapp.set()。
— Alexander Gonchiy 16年
3
代わりにapp.io = io使用できる理由module.exports = { app, io }
— Manan Mehta
56

を開始するための少し異なるアプローチで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

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

— アナトリー
ソース
4
この回答は、より多くの賛成票に値します！非常にシンプルでクリーンなため、www、app.jsおよびindex.jsの外（そう、index.jsの外）でもソケットルートが維持されます。このファイルにはExpress HTTPルートのみを含める必要があります。
— adelriosantiago 2017
1
すごい、とてもきれい
— sanket 2017
3
誰かがsocket.io 2.0のためにこれを更新できますか？うまくいきません。io.attach（server）とio.listen（server）はどちらも「未定義のプロパティXを読み取れません」をスローします。
— tsujp
1
@tsujpと話すことも同じです。適切なURLにアクセスし、socket.ioクライアントを追加する必要があります。それが機能することがわかります
— Tamb
私はsocket.io 2.3.0を使用していると私は取得しています、@tsujpと同様の問題を抱えているio.attach is not a function
— raquelhortab
43

それは本当にいくつかの基本的なシンタックスの問題だったことがわかりました ...私はこのsocket.ioチャットチュートリアルからこれらの行を取得しました...

./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

— user1576978
ソース
1
問題は、次のようなことはできないことですio.on('connection', function(socket) { res.render('connection.jade') });
— Gofilord 2014年
3
@Gofilordは、ソケットの目的全体を無効にするためです。必要なのは、レンダリングを含む通常のルーティングです。ソケットは、HTTPリクエストなしでクライアントとサーバー間でメッセージを送信するためにここにあります。多分この記事を読んでくださいenterprisewebbook.com/ch8_websockets.html
— Unispaw
19

古い「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」に挿入されます。

— 胡湖
ソース
9

Gabriel Hautclocqの応答の更新：

wwwファイルでは、Socket.ioの更新により、コードは次のようになります。Attachが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);`

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

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

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

var socket = io.connect('http://localhost:3000');
— リクリッツォ
ソース
7

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

私が遭遇した問題：

  1. var sockIO = require（ 'socket.io'）は、 var sockIO = require（ 'socket.io'）（）である必要があります。（クレジット：Zhe Hu）

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

手順

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

    npm install --save socket.io

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

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

  3. ではビン/ WWW、後VARサーバ= http.createServer（アプリ）、次の行を追加します。

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

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

    sockIO.on('connection', function(socket){
    console.log('A client connection occurred!');
});
— ブライアン
ソース
5

Cedric Pabstの初心者向けのチュートリアルは
、アプリチャットのリンクからの短い基本事項です。

express-generateのすべての.ejsファイル標準ルーティングで使用可能なexpress-generateおよび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に感謝します

— アンナバナナ
ソース
2

以前のいくつかの回答は機能しておらず、他の回答は非常に複雑です。代わりに次の解決策を試してください...

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

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

サーバ側

次のコードをサーバー定義の後にあるbin / wwwに追加します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' });
});

クライアント側

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開発者コンソールを確認してください。

— s2t2
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.