让 angular-socket-io 与 Grunt 一起工作

Question

我无法让 socket.io 与我的使用 Grunt 的项目一起工作。我目前正在通过凉亭使用 angular-socket-io。以下是我到目前为止所做的事情：

1) 通过 bower 安装 angular-socket-io 和 socket.io-client

2) 将以下行完全导入index.html

<script src="bower_components/socket.io-client/socket.io.js"></script>
<script src="bower_components/angular-socket-io/socket.min.js"></script>

3) 在我的 app.js 中添加了“btford.socket-io”

angular.module('angularApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.bootstrap', 'btford.socket-io'])

4) 制作Socket.js 文件

app.factory('Socket', ['socketFactory', '$location',
    function(socketFactory, $location) {
        if($location.host() === "127.0.0.1") {
            return socketFactory({
                prefix: '',
                ioSocket: io.connect($location.protocol() + '://' + $location.host() + ':' + $location.port())
            });
        } else {
            return socketFactory({
                prefix: '',
                ioSocket: io.connect({path: '/node_modules/socket.io'})
            });
        }
    }
]);

项目结构：

Project
|
- node_modules
  |
  - socket.io
- src
  |
  - main
    |
    - webapp
      |
      - app
        |
        - bower_components
        - scripts
          |
          - controllers
          - services
          - app.js
          - Socket.js
        - styles
        - views
        - index.html
- bower.json
- Gruntfile.js
- server.js

但每次投票时我都会收到以下错误：

GET http://127.0.0.1:9000/socket.io/?EIO=3&transport=polling&t=1448635105443-105 404 (Not Found)

可能出了什么问题？是否可以告诉 Angular 导入节点的某些特定模块？我一直在从 stackoverflow 中搜索解决方案，并且在 Google 上搜索了很多天，但我没有找到任何解决方案。

但是我发现，当它尝试使用该地址获取 socket.io 时，它会尝试从 node_modules 路径中获取它。我已经在那里安装了，以防socket.io通过npm。

我还阅读了 Github angular-socket-io angular-socket-io 的说明

编辑* 我试图创建server.js，其中包括以下几行：

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(9000, "127.0.0.1");

function handler (req, res) {
      fs.readFile(__dirname + '/src/main/webapp/app/index.html',
      function (err, data) {
        if (err) {
          res.writeHead(500);
          return res.end('Error loading index.html');
        }

        res.writeHead(200);
        res.end(data);
      });
    }

io.sockets.on('connection', function(socket){
    socket.emit('news', {message: 'hello world'});
    socket.on('my event', function(data){
        console.log(data);
    })
})

但它仍然说同样的话。

Answer 1

我终于让它工作了。因此，对于使用 grunt serve 或 grunt connect 将 Grunt 作为服务器运行的任何人来说，这里都是答案。

首先执行上述所有四个步骤。

其次，当您使用 Grunt 运行服务器时，您需要安装和使用名为 grunt-contrib-connect 的 npm 包，该包将具有 onCreateServer 功能。这个函数将允许我们将 socket.io 与 Grunt 一起使用。此功能至少包含在 grunt-contrib-connect 的 0.11.2 版本中。你需要在你的 Gruntfile 中加载这个包。如果您还没有这样做，那么您只需将以下行添加到您的Gruntfile.js

grunt.loadNpmTasks('grunt-contrib-connect')

现在您已经加载了该 npm 任务，您现在可以使用 onCreateServer 函数来使用 socket.io，如下所示：

grunt.initConfig({
  connect: {
    server: {
      options: {
        port: 8000,
        hostname: 'localhost',
        onCreateServer: function(server, connect, options) {
          var io = require('socket.io').listen(server);
          // do something with socket
          io.sockets.on('connection', function(socket) {
              io.sockets.on('connection', function(socket) {
                  socket.emit('news', {message: 'hello world'});
                  socket.on('my event', function(data){
                  console.log(data);
                  })
              });
          });
        }
      }
    }
  }
});

最后你可以去你的控制器并使用你在客户端做的套接字工厂（在我们的例子中是Socket.js）。这是控制器的示例：

angular.module('angularApp').controller('MyCtrl', ['$rootScope', '$scope', '$resource', 'Socket', function($rootScope, $scope, $resource, Socket ){
    Socket.on('news', function(data){
        console.log(data);
        Socket.emit('my event', {my: 'data'});
    })
}]);

提示：如果您在server.options 中使用livereload，则不必担心。您可以将livereload 与socket.io 一起使用。