让 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) 添加 'btford.socket-io' 到我的 app.js

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 导入节点的某些特定模块？我一直在从 Whosebug 上搜索这个问题的解决方案，也用谷歌搜索了很多天，但我还没有找到任何解决方案。

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

我也阅读了 angular-socket-io 的说明 Github 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

我终于让它工作了。所以这里是任何使用运行宁 G运行t 作为服务器使用 grunt serve 或 grunt connect.

的人的答案

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

其次，当您使用 G运行t 到运行您的服务器时，您需要安装和使用名为 grunt-contrib-connect 的 npm 包，它将具有 onCreateServer 功能。这个函数将允许我们使用 socket.io 和 G运行t。此功能至少包含在 grunt-contrib-connect 的 0.11.2 版本中。您需要将此包加载到您的 G运行t 文件中。如果您还没有这样做，那么您只需将以下行添加到您的 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 工厂（在我们的例子中是 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.

一起使用

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

Getting angular-socket-io working with Grunt

javascript

node.js

socket.io

angularjs