服务器端代码运行后,如何使用socket.io部分刷新页面

时间:2019-04-16 14:20:24

标签: node.js express socket.io

我正在尝试使用socket.io在使用nodejs(快速)构建的解决方案中执行简单的操作。目的是要求用户上传文件,并在完成上传操作后,在屏幕上显示“文件已上传”消息,而无需刷新页面。为此,我使用以下代码:

服务器端:

app.post('/fileupload', function(req, res) {
  // Upload file stuff here...
    mv(oldpath, newpath, function(err) {
      if (err) throw err;
      io.on('connection', function(socket) {
        console.log('sock connected');
        socket.emit('uploaded', {msg: 'File ' + files.filetoupload.name + 'uploaded to server'});
      });
      console.log('moved file');     
      res.sendFile(index);
    });
  });
});

和客户端:

<script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
      socket.on('uploaded', function (data) {
      console.log(data);
     $('#messagebox').html(data.msg);
    });
  </script>

其中messagebox是我想在其中显示消息的最初为空的div。

此代码无效。 io.on('connection'...代码永远不会被调用。我确实仅使用console.log语句将这段代码移到了应用程序路径之外,以测试它是否有效。我的假设是我在这里使用了错误的事件(“连接”)。但是我在文档中找不到任何可以使用自定义事件创建套接字对象的内容。有人可以帮我吗?

如果还有另一种方法来实现服务器代码驱动的客户端页面的部分刷新(即不使用套接字),我也乐于学习。谢谢。

1 个答案:

答案 0 :(得分:0)

有趣的是,我在发布此问题后不久就知道了这一点(即使我已经尝试了几天了)。

基本上,我需要一次创建一个套接字对象(在所有路由之外),然后使用该对象在路由内创建自定义事件。因此,我的工作服务器端代码(客户端上没有任何更改)现在看起来像这样。

var socket = io.on('connection', function(socket) {
  return socket;  
});

app.post('/fileupload', function(req, res) {
  //upload file stuff here
    mv(oldpath, newpath, function(err) {
      if (err) throw err;
      socket.emit('uploaded', {msg : 'File ' + files.filetoupload.name + ' uploaded to server'});
      });    
    });
  });