MEAN Angular 5，Socket IO 工作流程答案

【问题标题】：MEAN Angular 5, Socket IO WorkflowMEAN Angular 5，Socket IO 工作流程
【发布时间】：2018-09-30 12:28:08
【问题描述】：

我以前使用 Meteor 和 Angular5，它运行得相当好，但我发现 Meteor 有点限制。所以我正在尝试将我的应用程序重构为一个 MEAN 全栈。

我正在尝试与数据库进行实时交互，所以我使用的是 socket.io

我已经开始工作了，但我想就这是否是一个好的工作流程或者我可以做得更好？..这是我目前的工作流程：

jobs.component

  ngOnInit() {
    this.resetJob();

    // Load all jobs currently in the database
    this._jobService.getAllJobs()
      .subscribe(jobs => {
        this.jobs = jobs;
    });

    // Append newly added jobs 
    this._jobService.getNewJobs()
      .subscribe(job => {
        this.jobs.push(job);
      })
  }

jobs.service

  getAllJobs() {
    return this.http.get('/api/job');
  }

  getNewJobs() {
    let observable = new Observable(observer => {

      this.socket.on('jobAdded', (job: any) => {
        observer.next(job);
      });
      return () => {
        this.socket.disconnect();
      };
    })
    return observable;
  }

  createJob(job) {
    this.socket.emit('add-job', job);
  }

index.js

io.on('connection', (socket) => {
  console.log('User connected');

  // Log whenever a user disconnects
  socket.on('disconnect', function() {
    console.log('User disconnected');
  });

  socket.on('add-job', (job) => {
    io.emit('jobAdded', job);
    // store job in database
    db.createJob(job);
  });
});

【问题讨论】：

实际上只是考虑到这一点，我不确定如何删除文档并为所有用户实时更新...我是否需要调用我的数据库，获取所有工作和每次创建、更新或删除作业时将它们发送到我的组件？有人可以帮我看看怎么做吗？
与任何其他 event 的流程相同。删除文档 => 后端处理请求，更新数据库，发出 deleteEvent => 前端在您希望实时更新作业的地方监听 deleteEvent。如果用户在该component 中，他们将实时看到更改，如果没有，下次他们点击该组件时，他们将看到更改。所有的 CRUD 操作都一样
既然我从我的服务中返回了一个 observable，我怎么能从我的集合中更新一个对象呢？
为什么会有getAllJobs() 和getNewJobs()？从设计的角度来看，最好将您的 Socket 放在 emit 和 listen 到事件中。当您添加新作业时，您会期望发出一个事件 jobAdded。你为什么不听那个事件，然后使用getAllJobs() 重新获取你的工作？你打算用前端的new Job added 做什么？
所以我是否应该在创建、更新或删除作业时在我的套接字上发出一个事件，然后从数据库中重新获取所有作业并每次都返回它？所以我的可观察工作每次都会更新？这似乎有点蛮力，我想知道是否有另一种方法，也许你只重新获取新工作或更新或过滤已删除工作的可观察对象，但也许这是不可能的..？新工作将添加到工作组件中的工作列表中，但我希望它显示给所有用户而无需任何人刷新页面，我是否过于复杂了？

标签： angular socket.io real-time angular5 mean

【解决方案1】：

好的，现在我正在通过 socketIO 加载所有内容，所以每当有 CRUD 操作时，我都会重新获取所有作业并将它们返回到我的作业服务。它似乎有效，但这是一个好的工作流程吗？否则我正在考虑使用 Firebase..

index.js（我会把它移到一个单独的 js 文件中）

function getJobs() {
  Job.find({}, function(err, jobs) {
    if (err) { console.log('error fetching jobs'); }

    io.emit('jobs', jobs);
  });
}

function createJob(job) {
  // save the job
  Job(job).save(function(err, job) {
    if (err) { console.log('error creating job'); }

    getJobs();
  });
}

function deleteJob(jobId) {
  Job.findByIdAndRemove(jobId, function(err) {
    if (err) { console.log('error deleteing job'); }

    getJobs();
  });
}

//Socket events
io.on('connection', (socket) => {    
  socket.on('getJobs', () => {
    getJobs();
  });

  socket.on('createJob', (job) => {
    createJob(job);
  });

  socket.on('deleteJob', (jobId) => {
    deleteJob(jobId);
  });
});

job.service.ts

getAllJobs() {
  this.socket.emit('getJobs');

  let observable = new Observable(observer => {

    this.socket.on('jobs', (jobs: any[]) => {
      observer.next(jobs);
    });
    return () => {
      this.socket.disconnect();
    };
  })
  return observable;
}

【讨论】：