Question

我的目的是创建一个实时计数器。其实我用我的服务器创建文件。我想要每个创建的文件，计数器增加（客户端应该看到浏览器中的文件数量增长...）

如何使用Socket.io，AngularJS和Express.js完全做到这一点？

P.S：我已经写了一些代码，但是徒劳无功。

编辑1：

public / core.js

var app = angular.module('app', []);

app.factory('socket', function($rootScope){ 
    var socket = io.connect(); 
    return{ 
        on: function(eventName, callback){ 
            socket.on(eventName, function(){ 
                var args = arguments; 
                $rootScope.$apply(function(){ 
                    callback.apply(socket, args); 
                }); 
            }); 
        }, 
        emit: function(eventName, data, callback){ 
            socket.emit(eventName, data, function(){ 
                var args = arguments; 
                $rootScope.$apply(function(){ 
                    if(callback){ 
                        callback.apply(socket.args); 
                    } 
                }); 
            }) 
        } 
    }; 
}); 


function mainController($scope, $http, socket) {
    $scope.formData = {};

    socket.on('number', function (data) {
        console.log("Socket on number core.js !");
        $scope.number = data.numberOfFiles;
    });

    $scope.initialize = function() {
        $scope.formData.search = "";
        console.log("initialize() body !");
    };

    $scope.search = function() {

        socket.emit('next', {
            message: "next"
        });     

        console.log("search() body !");
        $http.post('/search', $scope.formData)
            .success(function() {
                $('input').val('');
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
}

app.js

/**
 * Module dependencies.
 */

var express = require('express');
var request = require('request');
var http    = require('http');
var path    = require('path');

var url = require('url');
var cheerio = require('cheerio'); // builds the DOM tree
var fs = require('fs');

var app = express();

// all environments

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location /public/img will be /img for users
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.json());
    app.use(express.urlencoded());
    app.use(app.router);
});

// app.listen(8080);
// console.log("App listening on port 8080");


var server = http.createServer(app);
var io = require('socket.io').listen(server);

server.listen(8080);

var numberFiles = 1;

app.post('/search', function(req, res){

    var keyword = req.body.search;  

    for(var i = 0; i < 100; i++) {  
        // The results' page URL
        // some long logic that creates files and increments numberFiles
        numberFiles++;
    }
});

io.sockets.on('connection', function (socket) {
    socket.on('next', function (data) {
        socket.emit('number', {
            numberOfFiles: numberFiles
        });
    });
});

app.get('/', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

Answer 1

你试过了吗？

SERVER

io.sockets.on('connection', function (socket) {
    socket.on('next', function (data, respond) {
        respond({
            numberOfFiles: numberFiles
        });
    });
});

客户端

   socket.emit('next', {
        message: "next"
    }, function(data){ // data.numberOfFiles ... };

AngularJS - Socket.io - ExpressJS：如何设置实时计数器？

1 个答案: