使用 angularjs 和 socket.io 实时保存和显示评论

Question

我对@9​​87654321@ 有疑问。在我的代码router.post(/comment,...) 中将用户cmets 保存在数据库中（使用猫鼬），我正在尝试emit 这个保存。在控制器功能中readMoreCourse 是从数据库中获取并显示所有cmets（并质疑如何使用socket 到这个使用ng-reapat 实时显示评论的功能）。功能AddComment 在客户端检查有效表格并将下一条评论发布到数据库。 我的问题：如何使用 angular (ng-repeat?) 和 socket.io 实时保存和显示用户评论？老实说，我是第一次做这个，我的时间很短，谢谢你的帮助。

服务器

io.on('connection', function(socket){
  socket.emit('comment', function(){
    console.log('Comment emitted')
  })
  socket.on('disconnect', function(){
  })
})

API

router.post('/comment', function(req, res) {  
    Product.findOne({ _id: req.body._id }, function(err, product){  
        if(err) {
           res.json({ success:false, message: 'Course not found' })
        } else { 
           User.findOne({ username: req.decoded.username }, function(err, user){   
            if(err){
               res.json({ success:false, message: 'Error'})
             } else { 
                product.comments.push({
                    body: req.body.comment,
                    author: user.username,
                    date: new Date(),   
                 });
                 product.save(function(err){
                    if(err) throw err 
                    res.json({ success: true, message: 'Comment added })
                    **io.emit('comment', msg);**
                  })        
               } 
             })                                        
          }
      }) 
 })

控制器

Socket.connect();  

User.readMoreCourse($routeParams.id).then(function(data){
    if(data.data.success){
        app.comments = data.data.product.comments;
    } else {
        $window.location.assign('/404');
    }
});         
    app.AddComment = function(comment, valid) {     
        if(valid){
            var userComment = {}; 
            userComment.comment = app.comment;
            Socket.on('comment', User.postComment(userComment).then(function(data){  
                if(data.data.success){ 
                    $timeout(function(){
                        $scope.seeMore.comment = '';
                    },2000)
                } else {
                    app.errorMsg = data.data.message;
                }    
            }));    
        } else {
            app.errorMsg = 'Error';
        }
    }       
$scope.$on('$locationChangeStart', function(event){
    Socket.disconnect(true);
})

工厂

userFactory.readMoreCourse = function(id) {
    return $http.get('/api/seeMore/' + id) 
}
userFactory.postComment = function(comment){
    return $http.post('/api/comment', comment);  
}

.factory('Socket', function(socketFactory){
   return socketFactory()
}) 

Answer 1

在您的套接字工厂中，初始化 socket.io emit 和 on 事件。

app.factory('socket', ['$rootScope', function($rootScope) {
  var socket = io.connect();

  return {
    on: function(eventName, callback){
      socket.on(eventName, callback);
    },
    emit: function(eventName, data) {
      socket.emit(eventName, data);
    }
  };
}]);

并从控制器调用它

app.controller('yourController', function($scope, socket) {     

User.postComment(userComment).then(function(data){  
  if(data.data.success){ 
    $timeout(function(){
      $scope.seeMore.comment = '';
      },2000); 

    // Emit new comment to socket.io server 
    socket.emit("new comment", userComment);

  } else {
      app.errorMsg = data.data.message;
  }
 });

 // other clients will listen to new events here 
 socket.on('newComment', function(data) {
     console.log(data);
     // push the data.comments to your $scope.comments    
 });

来自 socket.io 服务器

io.on('connection', function(socket) {
  // listen for new comments from controller and emit it to other clients 
  socket.on('new comment', function(data) {
    io.emit('newComment', {
      comment: data
    });
  });
});

编辑： 如果你只是想从服务器端推送，

io.on('connection', function(socket) {

    // after saving your comment to database emit it to all clients 
    io.emit('newComment', {
      comment: data
    });
});

并从控制器中删除此发射代码：

socket.emit("new comment", userComment);

但是这种方法可能很棘手，因为发布评论的用户应该会立即看到添加到帖子中的评论。如果你让socket.io 来处理这个问题，那么发布评论的人将会有几秒钟的延迟。