How to add element from server ? #129

maxime-guyot · 2015-03-12T13:34:47Z

Hi how to add element and emit to socket from server ?

var feathers = require('feathers');
var bodyParser = require('body-parser');
var app = feathers();

var todoService = {
    todos: [
        {
            text: 'Learn Feathers',
            complete: false
        }
    ],
    find: function (params, callback) {
        callback(null, this.todos);
    },
    create: function (data, params, callback) {
        this.todos.push(data);
        // Call back with the Todo data

        callback(null, data);
    }
}

// Configure REST and SocketIO endpointss
app.configure(feathers.rest());
app.configure(feathers.socketio());
// Parse JSON and form HTTP bodies
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
// Use the Todo service object
app.use('/todos', todoService);
app.use(feathers.static(__dirname))
// Start the application on port 3030
app.listen(8080);


setInterval(function () {

    
    todoService.create({
        text: 'Hi!',
        complete: false
    },?????????);
   


}, 1000);

daffl · 2015-03-12T15:24:16Z

You have to use app.service like app.service('todos') to get the service. If you use todoService directly it won't have the additional Feathers functionality (like sending events to all the sockets). The timeout should look like this:

setInterval(function () {

  var service = app.service('todos');
  service.create({
      text: 'Hi!',
      complete: false
  }, {}, function(error, todo) {
    console.log('Created todo on server', todo);
  });;

}, 1000);

maxime-guyot · 2015-03-12T17:40:20Z

Thank you for your answer,

But this does not emits message via the socket to the browser ...

I have to reload the page to see the new created by the server

daffl · 2015-03-12T17:47:04Z

How does your client look like? Are you listening to todos created?

maxime-guyot · 2015-03-12T20:16:33Z

this is the client example on feathersjs.com :

<!DOCTYPE html>
<html>
    <head>
        <title>Feathers real-time Todos</title>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <style type="text/css">
            .done {
                text-decoration: line-through;
            }
        </style>

        <div class="container" id="todos">
            <h1>Feathers real-time Todos</h1>

            <ul class="todos list-unstyled"></ul>
            <form role="form" class="create-todo">
                <div class="form-group">
                    <input type="text" class="form-control" name="description" placeholder="Add a new Todo">
                </div>
                <button type="submit" class="btn btn-info col-md-12">Add Todo</button>
            </form>
        </div>

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io();
            var el = $('#todos');

            var app = {
                getElement: function (todo) {
                    return el.find('[data-id="' + todo.id + '"]')
                },
                addTodo: function (todo) {
                    var html = '<li class="page-header checkbox" data-id="' + todo.id + '">' +
                            '<label><input type="checkbox" name="done">' +
                            todo.text +
                            '</label><a href="javascript://" class="pull-right delete">' +
                            '<span class="glyphicon glyphicon-remove"></span>' +
                            '</a></li>';

                    el.find('.todos').append(html);
                    app.updateTodo(todo);
                },
                removeTodo: function (todo) {
                    app.getElement(todo).remove();
                },
                updateTodo: function (todo) {
                    var element = app.getElement(todo);
                    var checkbox = element.find('[name="done"]').removeAttr('disabled');

                    element.toggleClass('done', todo.complete);
                    checkbox.prop('checked', todo.complete);
                },
                errorHandler: function (error) {
                    if (error) {
                        alert(error.message);
                    }
                }
            };

            el.on('submit', 'form', function (ev) {
                var field = $(this).find('[name="description"]');

                socket.emit('todos::create', {
                    text: field.val(),
                    complete: false
                },
                {}, app.errorHandler);

                field.val('');
                ev.preventDefault();
            }).on('click', '.delete', function (ev) {
                var id = $(this).parents('li').data('id');
                socket.emit('todos::remove', id, {}, app.errorHandler);
                ev.preventDefault();
            }).on('click', '[name="done"]', function (ev) {
                var id = $(this).parents('li').data('id');

                $(this).attr('disabled', 'disabled');

                socket.emit('todos::update', id, {
                    complete: $(this).is(':checked')
                },
                {}, app.errorHandler);
            });

            socket.on('todos updated', app.updateTodo);
            socket.on('todos removed', app.removeTodo);
            socket.on('todos created', app.addTodo);
            socket.emit('todos::find', {}, function (error, todos) {
                todos.forEach(app.addTodo);
            });
        </script>
    </body>
</html>

maxime-guyot · 2015-03-12T20:23:56Z

I tried on chrome and safari

daffl · 2015-03-12T20:35:17Z

I just tried by downloading the Gist for the example, extracting, in the folder running npm install feathers feathers-memory body-parser and added

setInterval(function () {

  var service = app.service('todos');
  service.create({
      text: 'Hi!',
      complete: false
  }, {}, function(error, todo) {
    console.log('Created todo on server', todo);
  });;

}, 1000);

At the bottom of app.js. Then I ran node app.js and went to http://localhost:8080 and I'm getting a new Todo every second in all browsers.

maxime-guyot · 2015-03-12T21:00:05Z

So, i'm stupid !
this is my code :

setInterval(function () {
    var service = app.service('todos');
    todoService.create({ //!!!!
        text: 'Hi!',
        complete: false
    }, {}, function (error, todo) {
        console.log('Created todo on servcer', todo);
    }); 
}, 1000);

Thank you for your help ;)
nice work your framework !

daffl · 2015-03-12T21:01:14Z

Yeah sorry, I made that mistake first and edited it later so you probably got the wrong one via email. Thanks and glad I could help!

lock · 2019-02-08T01:00:48Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue with a link to this issue for related bugs.

daffl closed this as completed Mar 12, 2015

daffl pushed a commit that referenced this issue Aug 24, 2018

fix(package): update generator-feathers to version 2.1.1 (#129)

1f91c0b

lock bot locked as resolved and limited conversation to collaborators Feb 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add element from server ? #129

How to add element from server ? #129

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

lock bot commented Feb 8, 2019

How to add element from server ? #129

How to add element from server ? #129

Comments

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

maxime-guyot commented Mar 12, 2015

daffl commented Mar 12, 2015

lock bot commented Feb 8, 2019