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

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

 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提交重新提交您正在执行的请求。 在这种情况下你可以做两件事：

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

   socket.emit('messages', newMessageHere)

2. 如果用户在前端刷新数据，然后在前端发出一个事件，也就是在你的帕格模板中，设置一个发送自定义事件到服务器的函数：

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