使用socket.io将数据发送到后端时更新客户端

时间:2018-06-03 15:12:35

标签: javascript node.js angular express socket.io

我尝试使用socket.io来使用Angular / Express和Socket.io制作实时应用

在前端,我创建了一个从服务器

获取Init数据的服务
ngOnInit() {
  this.getalltasks();
  const socket = io.connect('http://localhost:3000');
  socket.on('payload', () => {
    this.getalltasks();
  });
}
  ...
getalltasks() {
  this.addTaskService.getalltasks().subscribe(res => {
    res.tasks.forEach(element => {
      this.tasks.push(element.task);

    });

  });
}

然后在服务器端创建套接字对象,然后将其传递给路由模块

const express = require('express');
const app = express();

var http = require('http').Server(app);
var io = require('socket.io')(http);
var routes = require('./routes/routes')(io);
  .... Database config
io.on('connection', function (socket) {
    console.log("connected");
});
app.use('/', routes);
var server = http.listen(3000, function () {
    console.log('Example app listening on port 3000!')
})

在路线模块中,我有两条路线:获取所有数据并发布以添加新的待办事项任务。

var express = require("express"); // call express
var taskSchema = require("../models/taskModel");
var mongoose = require("mongoose");
var router = express.Router(); // get an instance of the express Router
module.exports = function (io) {
    router.use(function (req, res, next) {
        // do logging
        console.log("Something is happening.");
        return next(); // make sure we go to the next routes and don't stop here
    });
    router
        .route("/tasks")
        .post(function (req, res, next) {
            var taskModel = new taskSchema();
            taskModel.task = req.body.task;
            taskModel.save(function (err) {
                if (err) {
                    res.send(err);
                }
            });
            io.sockets.emit('payload');
            next();
        });
    router
        .route("/tasks")
        .get(function (req, res) {
            var taskModel = new taskSchema();
            taskSchema.find((err, tasks) => {
                if (err) {
                    res.send(err);
                }
                res.send({
                    "tasks": tasks
                })
            });
        });
    return router;
};

我实际上做的是在服务器端的每个payload事件中呼叫服务并且它正在工作。但我不认为这是一个好方法,因为我每次用户添加任务时都会覆盖数据。

我无法做的是在触发新的get路由时运行post路由,以便前端的observable获得新的更改通知。

这是在Express / Angular环境中使用socket.io的好方法,还是有其他更好的方法?

我不想在on套接字事件中发送数据,正如我在许多教程中看到的那样,因为当应用变大时,它无法维护。

这是一个解释我会完成什么的模式。

enter image description here

0 个答案:

没有答案