Socket io:在表单提交时自动更新单独页面上的数据而不刷新

时间:2016-06-04 09:05:04

标签: javascript node.js sockets websocket socket.io

如果我打开了两个页面,一个页面显示了我的数据表,而另一个页面包含一个供用户输入新数据的表单,我该如何使用socket io自动更新带有表格的页面用户无需刷新该页面即可提交新数据?我能够获取表中的所有数据但是我遇到了必须刷新页面的问题,以便新数据显示在表中。

我使用以下代码的逻辑是我将数据从我的表单发送到服务器,服务器将其发送回客户端,以便在连接套接字后自动添加到表中。我不知道为什么这不会自动更新表,但我猜我对socket连接的工作原理感到困惑。关于如何解决这个问题的任何建议?

form.js

 var socket = io.connect();
 socket.emit('data', { data: formData});  // formData is data from form

table.js

var socket = io.connect();
socket.on('addData', function (data) {

    console.log("ADDING DATA TO TABLE"); // prints out first time but not when user submits new data

}

server.js

  io.on('connection', function(socket) {

    // once client connects send data to table.js
    socket.emit('data', { data: myData});

    // recieved data from form on client
    socket.on('formData', function(data){

       myData.append(data); // add new data to all data         

       // send all data back to table.js 
       io.sockets.emit('addData', { data: myData}); 

     });

});

注意:我制作了一些print语句来检查客户端是否正在接收addData事件,并且它首先加载已经存储在服务器中的数据。但是,当用户提交新数据时,不会发生这些打印语句。我已经排除了向表中添加数据的代码,因为这不是问题,问题是客户端在用户提交新数据时没有收到addData事件。

1 个答案:

答案 0 :(得分:0)

所以在你的服务器上你应该有像

这样的东西
io.on('connection', function(socket) {

    // once client connects send him data
    socket.emit('addData', { data: myData});

    // recieved data from form on client
    socket.on('formData', function(data){

        // now update all clients
        // use io.sockets.emit to send to all clients
        io.sockets.emit('addData', { data: data.data});

    });

});

在客户端上你需要发出

socket.emit('formData', { data: someData});

<强>更新 功能齐全的例子:

服务器

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(8000);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function (socket) {
    console.log('client connected');
    // once client connects send him data
    socket.emit('addData', { data: 'myData'});

    // recieved data from form on client
    socket.on('formData', function(data){

        // now update all clients
        // use io.sockets.emit to send to all clients
        io.sockets.emit('addData', { data: data.data});

    });
});

的index.html

<script src="/socket.io/socket.io.js"></script>
<script>

    var socket = io.connect('http://localhost:8000');
    socket.on('addData', function (data) {
        // will output *got data Object {data: "myData"}* once connected
        console.log('got data', data);

    });

    // this is to send data 3 seconds later so above console.log will output *got data Object {data: "hello"}* again
    setTimeout(function(){
        socket.emit('formData', {data: 'hello'});
    },3000);
</script>