与Grunt一起使用angular-socket-io [英] Getting angular-socket-io working with Grunt

问题描述

我在使socket.io处理使用Grunt的项目时遇到问题.我目前正在通过Bower使用angular-socket-io.所以这是我到目前为止所做的事情:

I'm having problems to get socket.io working with my project that uses Grunt. I'm currently using angular-socket-io via bower. So here are things that I have done this far:

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

1) Installed angular-socket-io and socket.io-client via bower

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

2) Imported following lines exactly into 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"

3) Added 'btford.socket-io' into my 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

但是在每次轮询时都会出现以下错误:

But I get following error on every polling:

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

可能是什么问题?是否可以告诉angular导入节点的某些特定模块?我一直在从stackoverflow寻找解决方案，也用Google搜索了很多天，但是我没有找到任何解决方案.

What could be wrong? Is it possible to tell angular to import some specific modules of node? I have been searching solution for this from stackoverflow and also Googled it many days, but I haven't found any solution.

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

However I have found that when it tries to GET socket.io using that address it tries to get it from node_modules path. I have installed there just in case socket.io via npm.

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

I have also read the instructions of angular-socket-io at Github angular-socket-io

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

EDIT* I have tried to create server.js which includes following lines:

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);
    })
})

但是它仍然说同样的话.

But it still say the same thing.

推荐答案

最后，我开始使用它了.因此，这是使用grunt serve或grunt connect将Grunt作为服务器运行的任何人的答案.

Finally I got it working. So here's the answer for anyone who is running Grunt as server using grunt serve or grunt connect.

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

First do all four steps that are done in question above.

其次，当您使用Grunt运行服务器时，需要安装和使用名为 grunt的npm软件包. -contrib-connect ，它将具有onCreateServer功能.此功能将使我们可以将socket.io与Grunt一起使用. grunt-contrib-connect的至少0.11.2版本包含此功能.您需要将此包加载到您的Gruntfile中.如果尚未执行此操作，则只需将以下行添加到Gruntfile.js

Secondly when you use Grunt to run your server, you need to install and use npm package called grunt-contrib-connect which will have onCreateServer function. This function will allow us to use socket.io with Grunt. This function is included with at least version 0.11.2 of grunt-contrib-connect. You need to load this package in your Gruntfile. If you haven't done so yet, then you can simply add following line to your Gruntfile.js

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

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

Now that you have loaded that npm task you can now use onCreateServer function to use socket.io, like this:

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).这是控制器的示例:

Finally you can go to your controller and use your Socket factory you did on client side (in our case it is Socket.js). Here is example of controller:

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一起使用.

TIP: If you are using livereload in your server.options then you don't have to worry about it. You can use livereload with socket.io.

这篇关于与Grunt一起使用angular-socket-io的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！