CODEWITHSUNDEEP
node.jsreal-timerethinkdb
Big Skinny
Big Skinny

Reputation: 53

Rethinkdb node change feed to HTML

I am trying to display any change feed from my rethinkdb database to the HTML (front-end) but I am not able to display any change feed.

Can you please help me how to solve this issue?

The file is 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);   
            }); 
    });
});

the config.js file

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

the index.html file

<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>

Upvotes: 1

Views: 779

Answers (1)

kureikain
kureikain

Reputation: 2314

you have some syntax error on index.html which prevents client side running, then the main issue is you pluck on wrong field.

Here is the code that works:

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>

Notice that, on a change feed, you get back documents like this:

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

If you return the whole document, then the string concat on client $chat.append(data + "<br/>") may get an error or a string of 'object Object' because data is a object, not a string.

If you returns only title like this:

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

Then the string concat will run ok.

Also, your code is very messy. I suggest you get some basic foundation of JavaScript in generally.

Upvotes: 1

Related Questions