Express 4 및 Express 생성기의 / bin / www에서 socket.io 사용

93

그래서 여기에 거래가 있습니다 : 나는 익스프레스 프로젝트에서 socket.io를 사용하려고합니다. Express Js 4가 출시 된 후 Express 생성기를 업데이트했으며 이제 ./bin/www해당 변수를 포함한 앱 초기 기능이 파일에 저장됩니다 (www 파일 콘텐츠 : http://jsfiddle.net/avMa5/ ).

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

(확인 npm install -g express-generator후express myApp

즉, socket.io 문서가 어떻게 실행하도록 요청했는지 기억합시다.

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를 어떻게 사용할 수 있습니까?

javascript  node.js  express  socket.io 
— user1576978
소스
가져 오기를 ./bin/www.. 당신 var app이 있는 같은 장소에 두십시오 .
— alandarev
15
사람들이 express-io 제안을 그만두 길 바랍니다. 오래되어 더 이상 유지되지 않습니다.
— Ben Fortune
@Mritunjay은 감사하지만, 그것을 해결하지 않았다 : /
— user1576978
@BenFortune 죄송합니다.
— Mritunjay
@alandarev var app = express () ?? 나는 acctually 그것을 시도, 더 성공
— user1576978하지

답변:

160

app.js에서 socket.io를 사용할 수 있도록하는 솔루션이 있습니다.

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 변수에 액세스 할 수 있으며 module.exports를 매개 변수로 io를 허용하는 함수로 정의하여 경로에서 사용할 수 있도록 할 수도 있습니다.

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에게
3
단순히 io 변수를 앱 개체에 넣는 문제입니다. 또한 다음과 같을 수 있습니다. app.io = socket_io ();
— Gabriel Hautclocq 2015
7
"... 원하는 경우 경로에서 사용할 수도 있습니다." 좋아,하지만 어떻게? 당신이 그것을하는 방법에 대한 예를 줄 수 있다면 좋을 것입니다.
— scaryguy
2
개체에 사용자 지정 속성을 연결하는 것이 나쁘지app 않습니까? 기호 또는 app.set().
— Alexander Gonchiy
3
왜 app.io = io당신이 사용할 수있을 때 module.exports = { app, io }대신
— 만안 메타
56

시작하는 약간 다른 접근 방식으로 socket.io모든 관련 코드를 한곳에 그룹화합니다.

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하나의 모듈에있는 모든 관련 코드와 그것의 기능을 응용 프로그램의 어느 곳에서나 호출 할 수 있습니다.

— 아나톨리
소스
4
이 답변은 더 많은 찬성 투표가 필요합니다! 매우 간단하고 깔끔하며 소켓 경로를 www , app.js 외부 및 index.js 외부 (예, index.js 외부 )에 유지합니다.이 파일에는 Express HTTP 경로 만 포함되어야합니다.
— adelriosantiago
1
— 놀랍고
3
누구든지 socket.io 2.0에 대해 이것을 업데이트 할 수 있습니까? 나를 위해 작동하지 않습니다. io.attach (server) 및 io.listen (server) 모두 "정의되지 않은 속성 X를 읽을 수 없음"을 throw합니다.
— tsujp
1
또한 @tsujp 광산과 이야기하는 것은 동일하게 작동합니다. 올바른 URL을 입력하고 socket.io 클라이언트를 추가하면 작동하는 것을 볼 수 있습니다
— Tamb
@tsujp와 비슷한 문제가 있습니다. socket.io 2.3.0을 사용하고 있습니다.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..... }

네! 이제 작동합니다 ... 그래서 내 http 서버가 시작된 곳이기 때문에 / bin / www 내부에서 socket.io를 시작하는 것 외에는 옵션이 없었습니다. 목표는 이제 다른 파일에 소켓 기능을 구축하여 모듈화를 유지하는 것입니다.require('fileHere')(io);

<3

— user1576978
소스
1
문제는 당신과 같이 할 수 없다io.on('connection', function(socket) { res.render('connection.jade') });
— Gofilord
3
@Gofilord는 소켓의 전체 목적을 무너 뜨리기 때문입니다. 필요한 것은 렌더링을 포함하는 정규 라우팅입니다. 소켓은 http 요청없이 클라이언트와 서버간에 메시지를 보내기 위해 여기에 있습니다. 이 기사를 읽을 수도 있습니다 enterprisewebbook.com/ch8_websockets.html
— Unispaw
19

오래된 "expressjs", 모든 것이 "app.js"파일에서 일어나고 있습니다. 따라서 서버에 대한 socket.io 바인딩도 해당 파일에서 발생합니다. (BTW, 여전히 예전 방식으로 할 수 있으며 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"에 주입됩니다.

— Zhe Hu
소스
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');
— Rickrizzo
소스
7

모든 의견을 읽은 후 Socket.io Server 버전 1.5.0을 사용하여 다음을 생각해 냈습니다.

내가 만난 문제 :

  1. var sockIO = require ( 'socket.io') 는 var sockIO = require ( 'socket.io') () 여야 합니다. ( 출처 : Zhe Hu )

  2. sockIO.attach는 sockIO 여야합니다. 들어라 (Credit to : 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 에게 감사합니다.

— AnnaBanana
소스
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.