Change content Real-time - meteor

Question

I have small app (My first Meteor App), where I want add changing real-time content. So, my code looks like this

collection

Content = new Meteor.Collection('content');

client

if (Meteor.isClient) {

  Meteor.subscribe('content');

  Template.contentTpl.events({
    'keyup #content': function (e) {
      if (!Content.find({_conId: / some id from session / }).count()) {
        Content.insert({text: e.target.value, _conId: / some id from session / });
      } else {
        Content.update({_conId: / some id from session / }, {text: e.target.value});
      } 
    }
  });

  Template.contentTpl.content = function () {
    return Content.findOne({});
  };
}

<template name="contentTpl">
  <textarea id="content" rows="10" cols="100">{{content.text}}</textarea>
</template>

and server

if (Meteor.isServer) {
  Meteor.publish('content', function () {
    return Content.find();
  });
}

But when I open this app in two different browser I see the following, when I'm typing in the first browser - content changing in another browser but when I'm typing in another browser in first browser nothing happens. How I can add changing realtime in meteor ? Should I use somethin like socket.io ?

ps In docs I found observe method, but I don't quite understand how to use it to change the property and not for all collection.

Thx.

Answer 1

From the Meteor documentation :

By default, new Meteor apps automatically include the preserve-inputs package. This preserves all elements of type input, textarea, button, select, and option that have unique id attributes or that have name attributes that are unique within an enclosing element with an id attribute. To turn off this default behavior, simply remove the preserve-inputs package.

So once you typed in the textarea in the first browser the text won't change even though content.text changes as triggered by the change in the other browser.

You may observe that reactivity is correctly working by putting the handlebars expression {{content.text}} outside the textarea, like so:

<template name="contentTpl">
  <textarea id="content" rows="10" cols="100">{{content.text}}</textarea>
  <p>
  {{content.text}}
</template>

To update the text in the textarea you can remove the preserve-inputs package by executing:

meteor remove preserve-inputs