Question

我有问题让socket.io使用我使用Grunt的项目。我目前正通过凉亭使用angular-socket-io。所以这是我迄今为止所做的事情：

1）通过凉亭安装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）添加＆＃39; btford.socket-io＆＃39;进入我的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导入节点的某些特定模块吗？我一直在从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'});
    })
}]);

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

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

1 个答案: