如何在NodeJS和Socket.io中創建實時更新？

我有一個單獨的表格，也是一個單獨的表格列表。我想要的是插入我的數據後，單獨的表格列表將自動更新。但在我保存數據後，我的表格列表不會更新。如何在NodeJS和Socket.io中創建實時更新？

這裏是我的代碼：

createUser.php

<div class="container"> 
      <div class="col-md-4"> 
       <form role="form" id="usersForm"> 
        <div class="row"> 
         <div class="form-group"> 
          <label>Last Name</label> 
          <input type="text" id="input-lastname" placeholder="Last Name" class="input-sm form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="form-group"> 
          <label>First Name</label> 
          <input type="text" id="input-firstname" placeholder="First Name" class="input-sm form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="form-group"> 
          <label>Age</label> 
          <input type="number" min="18" id="input-age" placeholder="Age" class="input-sm form-control" /> 
         </div> 
        </div> 
        <div class="row"> 
         <p id="status"></p> 
        </div> 
        <div class="row"> 
         <div class="form-group"> 
          <button type="submit" class="btn btn-primary">Save</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
     <script type="text/javascript" src="ASSETS/bower_components/jquery/dist/jquery.min.js"></script> 
     <script type="text/javascript" src="ASSETS/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
     <script src="http://127.0.0.1:8888/socket.io/socket.io.js"></script> 
     <script src="client.js"></script>

server.js

var socket = require('socket.io'); 
var express = require('express'); 
var http = require('http'); 

var app = express(); 
var server = http.createServer(app); 

var io = socket.listen(server); 

io.sockets.on('connection', function(client) { 

    console.log('New Client!'); 

    client.on('user', function(data) { 
     console.log('data received'); 
     console.log(data); 
     io.sockets.emit('users', { 
      lastname: data.lastname, 
      firstname: data.firstname, 
      age: data.age 
     }); 
    }); 

}); 

server.listen(8888);

client.js

var socket = io.connect('http://localhost:8888'); 

$('#usersForm').submit(function(e){ 

    e.preventDefault(); 

    var input_lastname = $('#input-lastname').val(); 
    var input_firstname = $('#input-firstname').val(); 
    var input_age = $('#input-age').val(); 

    socket.emit('user', { 
     lastname: input_lastname, 
     firstname: input_firstname, 
     age: input_age, 
    }); 

    $.ajax({ 
     url: "insertUser.php", 
     type: 'POST', 
     dataType: 'json', 
     data: { lastname: input_lastname, firstname: input_firstname, age: input_age }, 
     beforeSend: function() { 
      console.log('loading...'); 
     }, 
     success: function(data) { 

      if(data.status == 1) { 
       $('#status').text('Data Inserted!'); 
       $('#input-lastname').val(''); 
       $('#input-firstname').val(''); 
       $('#input-age').val(''); 
      } else { 
       $('#status').text('Error Occured in query!'); 
      } 

     }, 
     error: function() { 
      alert('Error occured!'); 
     } 
    }); 

    socket.on('users', function(data) { 

     var newList  = '<tr>'; 
      newList += ' <td>' + data.lastname + '</td>'; 
      newList += ' <td>' + data.firstname + '</td>'; 
      newList += ' <td>' + data.age + '</td>'; 
      newList += '</tr>'; 

     $('#user-list tbody').append(newList); 

    }); 

});

但是，當我把表格放在一起。它更新了我的清單。

你能幫我嗎？

來源

2015-10-20 Jerielle

我認爲socket.on(...)應該出的$('#usersForm').submit(...)，並socket.emit(...)應在success功能。（假定訪問client.on(...)中的DB）

來源

2015-10-20 08:25:59

如何在NodeJS和Socket.io中創建實時更新？

回答

相關問題