Angularjs 角度+；socketio don'；不行？

目前，我正试图用socket.io和angular.js实现一个实时内容，就我而言，我做的一切都是正确的，但实时性不起作用。也许我错过了什么重要的事情

我将写一个它应该如何工作的场景。基本上，用户编写内容，然后将值发布到服务器。在home.html中，内容应该是实时的（我在下面列出了所有内容，包括home.html）

这是密码

server.js

var express     = require('express');
var app         = express();
var morgan      = require('morgan');
var mongoose    = require('mongoose');
var bodyParser  = require('body-parser');
var path        = require('path');
var config      = require('./config');

// REAL TIME WORK
var http        = require('http').Server(app);
var io          = require('socket.io')(http);

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next();
});

// log our request to our terminal
app.use(morgan('dev'));

// Connect to our database using mongoose
mongoose.connect(config.database, function(err) {
    if(err) {
        console.log("Connection to a mongodb database has failed");
    } else {
        console.log("Connected to a database");
    }
});


// set our static files to a designated location
app.use(express.static(__dirname + '/public'));

var apiRouter = require('./app/routes/api') (app, express, io);
app.use('/api', apiRouter);

// registered before your api routes.
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname + '/public/app/views/index.html'));
});

http.listen(config.port, function(err) {
    if(err) {
        console.log("There's an error connecting the app to port" + config.port);
    } else {
        console.log("App is listening on port " + config.port);
    }
});

api.js

module.exports = function(app, express, io) {

    // creating our first router
    var apiRouter = express.Router();

    // signup a user
    var createStory = function(req, res) {

        var story = new Story({
            user: req.decoded.id,
            content: req.body.content
        });

        story.save(function(err) {

            if(err) {
                res.send(err);
                return;
            }

            io.emit('story', req.body.content);
            res.json({ message: 'Story has been created!'});

        });
    };

    apiRouter.route('/')

        .post(createStory)


        .get(function(req, res) {

            Story.find({ user: req.decoded.id }, function(err, story) {
                if(err) {
                    res.send(err);
                    return;
                }

                res.json(story);
            });


        });

service.js

angular.module('storyService', [])


.factory('Story', function($http, $window) {

    // get all approach
    var storyFactory = {};

    var generateReq = function(method, url, data) {
            var req = {
              method: method,
              url: url,
              headers: {
                'x-access-token': $window.localStorage.getItem('token')
              },
              cache: false
            }

            if(method === 'POST') {
                req.data = data;
            }
            return req;
        };

    storyFactory.all = function() {
        return $http(generateReq('GET', '/api/'));
    };


    storyFactory.create = function(storyData) {
        return $http(generateReq('POST', '/api/', storyData));
    };

    storyFactory.getSingleStory = function(user_name, story_id) {
        return $http(generateReq('GET', '/api/' + user_name + '/' + story_id));
    };

    storyFactory.allStories = function() {
        return $http(generateReq('GET', '/api/all_stories'));
    };

    return storyFactory;

})


.factory('socketio', ['$rootScope', 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);
                        }
                    });
                });
            }
        };
    }]);

controller.js

angular.module('storyCtrl', ['storyService'])


.controller('StoryController', function(Story, $routeParams, $scope, socketio) {

    var vm = this;

    Story.all()
    .success(function(data) {
        $scope.stories = data;
    });


    Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
    .success(function(data) {
        $scope.storyData = data;
    });

    vm.createStory = function() {


        vm.message = '';

        Story.create(vm.storyData) 
        .success(function(data) {


                // clear the form
                vm.storyData = {}
                vm.message = data.message;

                socketio.on('story', function () {
                    $scope.stories.push(data);
                });

            });
    };

});

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Diary</title>


    <base href="/">

    <!-- CSS  -->
    <!-- load bootstrap from CDN and custom CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/paper/bootstrap.min.css">

    <!-- load angular and angular-route via CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>

    <!-- directives -->



    <!--controllers -->

    <script src="app/controllers/storyCtrl.js"></script>
    <script src="app/services/storyService.js"></script>


    <!-- main Angular app files -->
    <script src="app/app.routes.js"></script>
    <script src="app/app.js"></script>


</head>


<body ng-app="userApp">


<main class="container">

    <!-- ANGULAR VIEWS -->
    <div ng-view></div>
</main>



</body>
</html>

用户日志

home.html

<div class="panel-body" ng-repeat="story in stories | reverse" >
    <ul class="list-group">
        <li class="list-group-item">
            <div class="row">
                <div class="col-xs-10 col-md-11">
                    <div>
                        <div class="mic-info">
                            {{ story.createdAt | date:'MMM d, yyyy' }}
                        </div>
                    </div>
                    <div class="comment-text">
                        <h4>{{ story.content }}</h4>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

{{story.createdAt}日期：'MMM d，yyyy'}
{{story.content}

我知道它是巨大的，我之所以发布这一切是因为我不想错过任何东西

---

我对整个socket.io+angular.js都是新手，如果你有什么意见可以教我一些关于socket.io+angular.js的东西，这对我来说意义重大：）

下面是评论

事件侦听器（..）只需创建一次。在删除之前，它将接收所有未来事件。也不要将

vm

和

$scope

angular.module('storyCtrl', ['storyService'])


.controller('StoryController', function(Story, $routeParams, socketio) {

    var vm = this;
    vm.stories = [];

    Story.all()
    .success(function(data) {
        vm.stories = data;
    });


    Story.getSingleStory($routeParams.user_name, $routeParams.story_id)
    .success(function(data) {
        vm.storyData = data;
    });

    vm.createStory = function() {
        vm.message = '';

        Story.create(vm.storyData) 
        .success(function(data) {
            // clear the form
            vm.storyData = {}
            vm.message = data.message;
        });
    };

    socketio.on('story', function (data) {
        vm.stories.push(data);
    });
});

创建类似于

ng controller=“StoryController as StoryCtrl”

的控制器，并使用

ng repeat=“story in StoryCtrl.stories”

服务器端emit仅在似乎应该返回至少具有

content

和

createdAt

属性的对象时才响应post内容

// signup a user
var createStory = function(req, res) {

    var story = new Story({
        user: req.decoded.id,
        content: req.body.content
    });

    story.save(function(err) {

        if(err) {
            res.send(err);
            return;
        }

        io.emit('story', {
            user: req.decoded.id,
            createdAt: new Date(),
            content: req.body.content
        });

        // you might be able to do instead
        // io.emit('story', story.toObject())

        res.json({ message: 'Story has been created!'});

    });
};

---

在StoryController中，您每次创建新帖子时都要注册事件侦听器，您应该注册一次（另外，它将在服务器上第一次发出后注册）。另外，控制器似乎混合使用了

controllerAs

语法和

$scope

感谢您的回复，但您能否详细说明这一点作为回答，以便我可以接受，我现在仍然不知道该怎么办。我已经发表了评论，因为我不确定它是否能解决问题。我的第一点意思是，您只需要注册事件侦听器

socketio.on（'story'，function（content）{/}）

一次，而不是每次创建新的故事。其次，如果您使用的是

controllerAs

语法，那么在您的情况下，您应该将

分配给
this
或
vm
，而不是
$scope
我应该在promise对象内部还是外部调用它？关于这一点，不要担心，现在的问题是将数据推送到哪里以及如何进行。请帮助我：（如果我给你看开放源代码和网站，可以吗？也许你可以指出我哪里做错了它工作正常，但第三次尝试后，实时数据就停止了，这真的很奇怪。如果你去你的帐户，尝试发布数据，然后去路由“/allStories”，实时不会显示。再次感谢你，我的意思是尝试打开2个浏览器，1个incognito和normal browserI无法测试，heroku上的代码没有更改。你现在可以检查它，基本上它仍然不是实时的，而且每当你点击第三个帖子时，数据都不会显示。
socket.on（'story'，…）
仍然位于错误的位置，因此每次创建一个故事时，您都会添加一个新的侦听器。添加两个故事会创建两个侦听器，并且故事会被推送到
故事
两次。
ng repeat
然后停止工作，因为您有重复的项目。您的allStories路由不会是实时的，因为那里没有事件侦听器