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

我正在尝试制作一个实时应用程序，其中我发布了一条存储在数据库中的消息，然后该消息必须显示在同一页面上，而不刷新页面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
            });
        });
    }

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') 

这是我发布数据的模板（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')  

这是我要刷新数据库数据的模板：

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
            });
        });
    }

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') 

---

要刷新数据，您不需要重新提交正在通过另一个HTTP Post提交进行的请求。在这种情况下，您可以做两件事：

如果数据刷新时间或事件是由您决定的，那么您可以在服务器端实现该逻辑，只要在需要在前端更新数据时重新发送数据即可。 例如

socket.emit（'messages'，newMessageHere）

如果用户在前端刷新数据，则在前端发出事件，即在pug模板中，设置一个向服务器发出自定义事件的函数：

socket.emit（'refreshData'，userIdentifier）

然后在服务器端，听下面这样的

刷新数据

（或您喜欢的任何其他名称）：

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