Question

我正在尝试创建一个实时应用程序，我发布存储在数据库中的消息，然后该消息必须显示在同一页面上而不刷新页面refreshH。我的日志说我的套接字的连接有效但在我发送消息后页面会自动刷新。

这是我工作的控制器：

postPublicacion : function(req,res,next){

        var currentdate = new Date();
        var datetime = currentdate.getFullYear() + "-"
                                + currentdate.getDate() + "-"
                + (currentdate.getMonth()+1)  + " "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();

            console.log(datetime);

        var publicacion = {
            id_user : 1,
            publicacion : req.body.post,
            imagen : null,
            fecha_pub : datetime
        };
        var config =require('.././database/config');
        var db = mysql.createConnection(config);
        var socket = io.connect('http://localhost:8081', { 'forceNew': true });
        var message = 'Enviado';
    socket.on('messages', function(data) {
      console.log(data);
    });
        socket.emit('messages', message)
        // conectamos la DB

        db.connect();

        // insertamos los valores enviados desde el formulario
        db.query('INSERT INTO publicaciones SET ?', publicacion, function(err, rows, fields){
            if(err) throw err;
            db.end();
        });
        req.flash('info', 'Publicación realizada correctamente');
        return res.redirect('/users/panel');
    },

    getPublicacion : function (req, res) {
    mc.query('SELECT publicacion FROM publicaciones', function (error, results, fields) {
        if (error) throw error;
                db.end();
        return res.send(results);
    });
}

这是我的另一个控制器，我从数据库重新加载数据：

getUserPanel : function(req,res,next){
        var config =require('.././database/config');
        var db = mysql.createConnection(config);
        var resultado;
        var usuario = req.user;
        console.log(usuario);

        db.query('SELECT * FROM publicaciones', function(err, rows, fields){
            resultado    = rows;
            res.render('users/panel', {
                isAuthenticated : req.isAuthenticated(),
                items: resultado,
                user: usuario
            });
        });
    }

这是我发布数据的模板（pug）：

div(off-canvas='panel-new-card left reveal')
  .post-container
    form(action='http://localhost:3000/users/panel', method='post')
      textarea.autoExpand(rows='3', name='post', data-min-rows='3', placeholder='Type something...', autofocus='')
      |           
      input.post-new-card(type='submit', name='button', value='Post Card')

这是我的模板，我想从数据库中刷新数据：

div(off-canvas='panel-new-card left reveal')
  .post-container
    form(action='http://localhost:3000/users/panel', method='post')
      textarea.autoExpand(rows='3', name='post', data-min-rows='3', placeholder='Type something...', autofocus='')
      |           
      input.post-new-card(type='submit', name='button', value='Post Card')

Answer 1

要刷新数据，您无需通过其他HTTP Post提交重新提交您正在执行的请求。在这种情况下，您可以做两件事：

如果您决定了数据更新时间或事件，那么您可以在服务器端实现该逻辑，只需要在前端更新数据时重新发送数据。 E.g

socket.emit('messages', newMessageHere)
如果用户在前端刷新数据，则在前端发出一个事件，即在你的pug模板中，设置一个向服务器发出自定义事件的函数：

socket.emit('refreshData', userIdentifier)

然后在服务器端，听取refreshData（或您喜欢的任何其他名称），如下所示：

socket.on('refreshData', function(data) {
      // Your refresh data logic here (from second controller)
    // emit the data then 
    socket.emit('messages', refreshedData)      
    });

使用Socket.io刷新页面上的数据而不重新加载

1 个答案: