Remember to check out the documentation for restdb.io Pages and for restdb.io Querying. You can also view the master template source code.

{{#inherit "layout"}}

{{#block "head"}}
    <title>restdb.io realtime</title>
    <link rel="stylesheet" href="{{root}}/realtimedemo.css">
{{/block}}

{{#block "title"}}
<div class="col-md-12">
    <h1>Realtime REST demo</h1>
</div>
{{/block}}

{{#block "content"}}
<div class="container realtimedemo">
    <div class="well col-md-12">
        Realtime improves user experience (UX) and the speed of communication.
        RestDB.io lets your application subscribe to Data Events in realtime.
        This example shows a chat application that visualises REST Data Events (PUT, POST, DELETE) and the executing code block. 
        To get started, <a target="quickstart" href="https://restdb.io/docs/quick-start">create a new database</a>, read the <a target="jsapi" href="https://restdb.io/docs/javascript-api">docs</a> and look at the Github <a target="github" href="https://github.com/RestDB/clientexamples/tree/master/restdb_io%20realtime%20chat">code example</a>.
        <br><br>
        Send a link to this page to your team/friends, start chatting, and watch the events propagate.
    </div>
    <div class="col-md-4">
        <h4>Chat</h4>
        <hr>
        <input type="text" id="oneliner">
        <small>Double click or swipe right to delete</small>
        <div id="messages"></div>
    </div>
    <div class="col-md-8">
        <h4>The code</h4>
        <hr>
        
        <pre id="post_block"><code class="javascript">// Called when new records are inserted into the database
        db.chat.on(&#39;POST&#39;, function(err, mess) {
        	var line = $(&quot;&lt;div&gt;&quot;).text(mess.data.oneliner + &quot; &quot; + mess.data._id);
        	line.hide();
        	$(&quot;#messages&quot;).prepend(line);
        	line.toggle(&quot;scale&quot;)
        });
        </code></pre>
        
        <pre id="put_block"><code class="javascript">// Called when a record is changed in the database
        db.chat.on(&#39;PUT&#39;, function(err, mess) {
        	db.chat.find({&quot;_id&quot;: mess.data}, {}, function(err, updatedline){
        	    $(&quot;#&quot;+mess.data).text(updatedline[0].oneliner);
        	});
        });
        </code></pre>
        
        <pre id="delete_block"><code class="javascript">// Called when one or more record is deleted in the database
        db.chat.on(&#39;DELETE&#39;, function(err, mess) {
            _.each(mess.data, function(oneid){
                $(&quot;#&quot;+oneid).remove();    
            });
        });
        </code></pre>
        
        <pre id="init_block"><code class="javascript">// The initial setup and connection the a realtime database
        var apikey = &quot;577ed0a645c8ac6e5b035fbe&quot;;
        var db = null; 
        try {
            db = new restdb(apikey, {realtime: true});
            $(&quot;#status&quot;).text(&quot;Ok, got the api&quot;).addClass(&quot;online&quot;);
        } catch (ex) {
            $(&quot;#status&quot;).text(&quot;Error loading jsapi&quot;);
        }
        </code></pre>
            
        <pre id="input_block"><code class="javascript">// Called when a user types something in the input field
        $(&quot;#oneliner&quot;).keyup(function(e){
        	if(e.keyCode == 13)
        	{
        		var payload = {&quot;oneliner&quot;: $(this).val()};
        		$(this).val(&quot;&quot;);
        		var newline = new db.chat(payload);
        		newline.save();
        	}
        });
        </code></pre>
        
        <pre id="connect_block"><code class="javascript">// Called when a connection is established
        db.on(&quot;CONNECT&quot;, function() {
        	$(&quot;#status&quot;).addClass(&quot;online&quot;).removeClass(&quot;offline&quot;).text(&quot;online&quot;);
        	$(&quot;#messages&quot;).empty();
        	db.chat.find({}, {&quot;$max&quot;: 100,&quot;$orderby&quot;: {&quot;_created&quot;: -1}}, function(err, lines){
        	    _.each(lines, function(aline){
        	        $(&quot;#messages&quot;).append($(&quot;&lt;div&gt;&quot;).text(aline.oneliner));        
        	    });
        	})
        });
        </code></pre>
        
        <pre id="disconnect_block"><code class="javascript">//Called when the connection is lost, unplug your wifi to see this
        db.on(&quot;DISCONNECT&quot;, function() {
        	console.log(&quot;Realtime closed: &quot;);
        	$(&quot;#status&quot;).addClass(&quot;online&quot;).addClass(&quot;offline&quot;).text(&quot;off&quot;);
        });
        </code></pre>
        
        <pre id="recconnect_block"><code class="javascript">// Called after a lost connection is regained
        db.on(&quot;RECONNECT&quot;, function() {
        	$(&quot;#status&quot;).addClass(&quot;online&quot;).removeClass(&quot;offline&quot;).text(&quot;Back again&quot;);
        });
        </code></pre>
    </div>
</div>
{{/block}}


{{#block "scripts"}}
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.10.0/lodash.js"></script>
	<!-- restdb.io libraries -->
	<script src="https://realtimedemo-7c18.restdb.io/assets/js/eventsource.min.js"></script>
	<script src="https://realtimedemo-7c18.restdb.io/rest/_jsapi.js"></script>
	<script src="{{root}}/jquery.mobile.custom.min.js"></script>

	<!-- code for this demo -->
	<script src="{{root}}/realtimedemo.js"></script>
{{/block}}

{{/inherit}}