如果我打开了两个页面,一个页面显示了我的数据表,而另一个页面包含一个供用户输入新数据的表单,我该如何使用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事件。
答案 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>