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

Question

如果我打开了两个页面，一个页面显示我的数据表，另一个页面包含用户输入新数据的表单，当用户提交新数据时，我如何使用socket io自动用表更新页面，而不必刷新该页面？我可以获得表中的所有数据，但遇到了一个问题，我必须刷新页面才能在表中显示新数据。

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

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

注意：我做了一些打印语句来检查客户端是否正在接收addData事件，以及它在加载已经存储在服务器中的数据时是否首先接收到了addData事件。但是，当用户提交新数据时，这些打印语句不会出现。我已经排除了向表中添加数据的代码，因为这不是手头的问题，问题是当用户提交新数据时，客户端没有接收到addData事件。

Answer 1

因此，在您的服务器上应该有类似的东西

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>