Question

我正在考虑启动一种日历网络应用程序，让我练习并提高我的Web开发技能。我一直在设计要使用的结构和技术，最后我决定使用MEAN堆栈。我遇到了一个问题：万一有新事件添加到日历中，我想“自动更新”有角前端（例如，如果是从另一个标签甚至是另一台计算机添加新事件，并且可能是在智能手机应用的未来）。如何获得此更新的正确方法？我当时正在考虑使用mongodb的“ collection.watch（）”方法来检测与帐户关联的文档何时更改，然后再更改socket.io，但是，我应该在服务器端还是客户端执行此操作？然后，如果我在服务器端执行此操作，如何更新角度视图？好吧，我希望我已经足够清楚了，并且我并没有因为我计划的内容而感到困惑。谢谢！

Answer 1

因此，基本上，您的想法是正确的。您可以为此项目使用套接字io。我建议您遵循套接字IO网页上的聊天应用程序示例：

Socket IO Chat app

基本上，套接字io是服务器端技术：

NODEJS：

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

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
}); 

http.listen(3000, function(){
  console.log('listening on *:3000');
});

这允许浏览器通过websocket连接连接到服务器。通过websocket连接，浏览器可以进行实时通信。

前端

<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

Answer 2

我强烈建议为此使用Meteor。这类服务器->客户端更新正是其设计目的。下面的示例假定火焰像渲染引擎一样，但是它与react，vue或angular一样有效。

您将拥有一个服务器文件：

const events = new Mongo.Collection("events");
Meteor.publish("events", function(some, arguments) {
   return events.find({some mongo query});
});

在客户端，您会有一些JS代码：

const events = new Mongo.Collection("events");
Meteor.subscribe("events", some, arguments);

Template.someTemplate.helpers({
  events() {
    return events.find();
  }
});

和一些HTML代码：

<template name="someTemplate">
{{#each event in events}}
 <!-- do something with the event -->
{{/each}}
</template>

使用MEAN创建可监听更改的日历应用

2 个答案: