Rethinkdb 节点将提要更改为 HTML答案

【问题标题】：Rethinkdb node change feed to HTMLRethinkdb 节点将提要更改为 HTML
【发布时间】：2015-09-15 21:59:59
【问题描述】：

我正在尝试将我的 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>

【问题讨论】：

标签： node.js real-time rethinkdb

【解决方案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);

那么字符串 concat 就可以正常运行了。

另外，您的代码非常混乱。我建议你大致了解一下 JavaScript 的基础。

【讨论】：

感谢您的回答。如何将更改提要转换为数组？这是一个 JSON 对象数组。