Javascript 使用Grunt获得角度套接字io

我在让socket.io处理使用Grunt的项目时遇到问题。我目前正在通过bower使用angular socket io。到目前为止，我做了以下几件事：

1） 通过bower安装的角度插座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>

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_模块路径获取它。我已经通过npm安装了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);
    })
})

---

但它仍然说同样的话。

我终于让它工作了。因此，对于使用

Grunt-service

或

Grunt-connect

运行Grunt作为服务器的任何人来说，下面是答案

首先，完成上述所有四个步骤

其次，当您使用Grunt运行服务器时，需要安装并使用名为的npm包，该包将具有

onCreateServer

功能。此函数允许我们将socket.io与Grunt一起使用。此功能至少包含在

grunt contrib connect

的0.11.2版中。您需要在GrunFile中加载此包。如果您还没有这样做，那么您可以简单地将以下行添加到

grunfile.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'});
    })
}]);

---

提示：如果您在

服务器中使用
livereload
。选项

，则您无需担心。您可以将

livereload

与

socket.io

一起使用，我终于让它工作了。因此，对于使用

Grunt-service

或

Grunt-connect

运行Grunt作为服务器的任何人来说，下面是答案

首先，完成上述所有四个步骤

其次，当您使用Grunt运行服务器时，需要安装并使用名为的npm包，该包将具有

onCreateServer

功能。此函数允许我们将socket.io与Grunt一起使用。此功能至少包含在

grunt contrib connect

的0.11.2版中。您需要在GrunFile中加载此包。如果您还没有这样做，那么您可以简单地将以下行添加到

grunfile.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'});
    })
}]);

---

提示：如果您在

服务器中使用
livereload
。选项

，则您无需担心。您可以将

livereload

与

socket.io一起使用

尝试使用io.on而不是io.sockets。on@Gary：已尝试但没有帮助。客户端正在尝试与服务器联系这一事实很好，因为这意味着您很可能已正确设置客户端。您的问题似乎在服务器端。您能够加载index.html吗？确保您的服务器正在实际运行。@Gary:我正在使用

grunt-serve

运行我的前端。我在

grunfile.js

中配置了将监视

server.js

文件。我还做了一个简单的测试，我写了这行

console.log（“测试”）

在

server.js

中，然后运行

grunt-serve

命令，它可以很好地打印，但当然不是在浏览器控制台中，而是在命令提示符中，因为我在Windows环境中使用localhost运行我的项目。关于加载index.html，至少我没有收到“Error loading index.html”消息，所以我假设我没有收到来自这方面的错误。尝试使用io.on而不是io.sockets。on@Gary：已尝试但没有帮助。客户端正在尝试与服务器联系这一事实很好，因为这意味着您很可能已正确设置客户端。您的问题似乎在服务器端。您能够加载index.html吗？确保您的服务器正在实际运行。@Gary:我正在使用

grunt-serve

运行我的前端。我在

grunfile.js

中配置了将监视

server.js

文件。我还做了一个简单的测试，我写了这行

console.log（“测试”）

在

server.js

中，然后运行

grunt-serve

命令，它可以很好地打印，但当然不是在浏览器控制台中，而是在命令提示符中，因为我在Windows环境中使用localhost运行我的项目。关于加载index.html，至少我没有收到“errorloadingindex.html”消息，所以我假设我没有收到来自这方面的错误。