2015-09-15 39 views
1

我試圖顯示從我的rethinkdb數據庫到HTML(前端)的任何更改源,但我無法顯示任何更改提要。Rethinkdb節點更改提要爲HTML

你能幫我解決這個問題嗎?

該文件是app.js

var express = require('express'), 
    app = express(), 
    server = require('http').createServer(app), 
    users = {}, 
    db='testing', 
    table = 'todos'; 
    io = require('socket.io').listen(server); 
var bodyParser = require('body-parser'); 

server.listen(5000); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 

var config = require(__dirname + '/config.js'); 
var r = require('rethinkdbdash')(config.rethinkdb); 

io.sockets.on('connection', function(socket){ 
    r.db(db).table(table).pluck('title').changes().run(). 
     then(function(feed){ 
      feed.each(function(err, item){ 
       console.log(JSON.stringify(item, null, 2)); 
       io.emit('new message', item); 
      }); 
    }); 
}); 

config.js文件

module.exports = { 
    rethinkdb: { 
    host: '192.168.2.3', 
    port: 28015, 
    authKey: '', 
    db: 'testing' 
    }, 
    express: { 
    port: 5000 
    } 
}; 

index.html文件

<html> 
<head> 
    <title>Chat with socket.io and node.js</title> 
    <style> 
     #chat{ 
      height:500px; 
     } 
    </style> 
</head> 
<body> 
    <div id="chat"></div> 
    <form id="send-message"> 
     <input size="35" id="message"></input> 
     <input type="submit"></input> 
    </form> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
     jQuery(function($){ 
      var socket = io.connect(); 
      var $messageForm = $('#send-message'); 
      var $messageBox = $('#message'); 
      var $chat = $('#chat'); 

      $messageForm.submit(function(e){ 
       e.preventDefault(); 
       socket.emit('send message', $messageBox.val()); 
       $messageBox.val(''); 
      }); 

      socket.on('new message', function(data){ 
       $chat.append(data + "<br/>"); 


     }); 
    </script> 
</body> 
</html> 

回答

1

你在index.html上有一些語法錯誤,它會阻止客戶端運行,那麼主要問題是你在錯誤的領域採取行動。

這裏是工作的代碼:

app.js

var express = require('express'), 
app = express(), 
server = require('http').createServer(app), 
users = {}, 
db='testing', 
table = 'todos'; 
io = require('socket.io').listen(server); 
var bodyParser = require('body-parser'); 

server.listen(5000); 

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 

var config = require(__dirname + '/config.js'); 
var r = require('rethinkdbdash')(config.rethinkdb); 

io.sockets.on('connection', function(socket){ 
    r.db(db).table(table) 
    .pluck('title') 
    .changes() 
    .run() 
    .then(function(feed){ 
    feed.each(function(err, item){ 
     console.log(JSON.stringify(item, null, 2)); 
     io.emit('new message', item.new_val.title); 
    }) 
    }) 
}) 

的index.html

<html> 
<head> 
    <title>Chat with socket.io and node.js</title> 
    <style> 
#chat{ 
    height:500px; 
} 
    </style> 
</head> 
<body> 
    <div id="chat"></div> 
    <form id="send-message"> 
    <input size="35" id="message"></input> 
    <input type="submit"></input> 
    </form> 

    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
jQuery(function($){ 
    var socket = io.connect(); 
    var $messageForm = $('#send-message'); 
    var $messageBox = $('#message'); 
    var $chat = $('#chat'); 

    $messageForm.submit(function(e){ 
    e.preventDefault(); 
    socket.emit('send message', $messageBox.val()); 
    $messageBox.val(''); 
    }); 

    socket.on('new message', function(data){ 
    $chat.append(data + "<br/>"); 


    }); 
}) 
    </script> 
</body> 
</html> 

注意,在改變飼料,你回來這樣的文件:

{ 
    "new_val": { 
    "id": "862e6410-f686-4a70-8a52-d4387181d4f2", 
    "title": "12" 
    }, 
    "old_val": null 
} 

如果喲您返回整個文檔,然後客戶端$chat.append(data + "<br/>")上的字符串concat可能會得到一個錯誤或'object Object'字符串,因爲數據是對象而不是字符串。

如果你只返回類似這樣的標題:

io.emit('new message', item.new_val.title); 

然後字符串連接將運行正常。

此外,你的代碼非常混亂。我建議你通常會得到一些基本的JavaScript基礎。

+0

感謝您的回答。 如何將變更Feed轉換爲數組?這是一個JSON數組對象。 –