【问题标题】:Auto update changes in mongodb directly on frontend without page refresh with Node Socket.io and angularjs直接在前端自动更新 mongodb 中的更改,无需使用 Node Socket.io 和 angularjs 刷新页面
【发布时间】:2016-11-06 12:43:30
【问题描述】:

我的问题是,如果我直接在 mongodb 中手动添加一条消息,我怎样才能使其在活动 UI 客户端页面中自动可见而无需刷新。 我的代码如下。我的情况是,当新客户端访问页面时,会显示 mongo 中的现有记录,从而保持连接。但是,如果我直接在 mongo 中添加一条记录并加载一个新客户端,则只有该记录才会有记录,而其他人只有在刷新时才能获得它。

app.js(服务器端脚本)

mongoose.connect("mongodb://localhost:27017/some");
    var mschema=mongoose.Schema({
       message: String,
       time : {type:Date ,default: Date.now}

    });
   io.sockets.on('connection', function (socket) {
    chatmsg.find({},function(err,docs)
    {
        if(err)
            console.log("errorr");
        else
             socket.emit('old msgs',docs);
    })
    socket.on('message', function(message) {
        var newmsg=new chatmsg({message : message});
        newmsg.save(function(err)
        {
            if(err)
            {
                console.log("error");
            }
            else
                io.sockets.emit('new message',message) ;
        })

            })

controller.js(客户端脚本)

    var socket=io("http://localhost:3200");

$scope.sendemit=function()
{
    console.log("inside function"+$scope.textchat);
    socket.emit('message', $scope.textchat);
    $scope.textchat="";
}

  socket.on('new message', function (message) {
         $("#chat").append(message+"<br/>");
   } );

  socket.on('old msgs',function(docs)
  {
    for(var i=0;i<docs.length;i++)
    {
    console.log(JSON.stringify(docs[i].message));
  $("#chat").append(docs[i].message+"<br/>");
    } 
  })

index.html

   <form >
   <input class="form-control" type="text" ng-model="textchat">
   <button class="btn btn-success" ng-click="sendemit()">Send</button>
  </form>
</div>
<div class="container-fluid">
   <div id="chat"></div>
</div>

【问题讨论】:

    标签: angularjs node.js mongodb socket.io mean-stack


    【解决方案1】:

    您可能想要切换数据库,对于这个特定的用例有一个。

    RethinkDB 自动将数据更改推送到应用程序。

    有一个名为second-thought 的节点库。它具有一些实用功能,使数据库操作更容易。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-02
      • 2015-05-15
      • 1970-01-01
      • 2017-08-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-08
      相关资源
      最近更新 更多