feat(realtime): add docs

.gitignore

@@ -0,0 +1 @@
+vendor/

app/views/docs/functions.phtml

@@ -139,7 +139,7 @@ $image = new View(__DIR__.'/../general/image.phtml');
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>let sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
 
 sdk
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint

app/views/docs/getting-started-for-android.phtml

@@ -68,8 +68,7 @@ import io.appwrite.services.Account
 val client = Client(context)
   .setEndpoint("https://[HOSTNAME_OR_IP]/v1") // Your API Endpoint
   .setProject("5df5acd0d48c2") // Your project ID
-  .setKey("919c2d18fb5d4...a2ae413da83346ad2") // Your secret API key
-  .setSelfSigned(true) // For self signed certificates only use for development</code></pre>
+  .setSelfSigned(true) // For self signed certificates, only use for development</code></pre>
 </div>
 
 <p>Before starting to send any API calls to your new Appwrite instance, make sure your Android emulators has network access to the Appwrite server hostname or IP address.</p>
@@ -87,6 +86,23 @@ val response = account.create("email@example.com", "password")
 val json = response.body?.string()</code></pre>
 </div>
 
+<h2><a href="/docs/getting-started-for-android#listenToChanges" id="listenToChanges">Listen to changes</a></h2>
+
+<p>If you want to listen to changes in realtime from Appwrite, you can subscribe to a variety of channels and receive updates within milliseconds. Full documentation for Realtime can be found <a href="/docs/realtime">here</a>.</p>
+
+<div class="ide" data-lang="android" data-lang-label="Android SDK">
+  <pre class="line-numbers"><code class="prism language-kotlin" data-prism>// Subscribe to files channel
+val realtime = Realtime(client)
+
+realtime.subscribe("files", callback = { response ->
+    if(response.event === 'storage.files.create') {
+        // Log when a new file is uploaded
+        print(response.payload.toString());
+    }
+})
+</code></pre>
+</div>
+
 <h2><a href="/docs/getting-started-for-android#fullExample" id="fullExample">Full Example</a></h2>
 <div class="ide" data-lang="android" data-lang-label="Android SDK">
                     <pre class="line-numbers"><code class="prism language-kotlin" data-prism>import io.appwrite.Client
@@ -95,12 +111,22 @@ import io.appwrite.services.Account
 val client = Client(context)
   .setEndpoint("https://[HOSTNAME_OR_IP]/v1") // Your API Endpoint
   .setProject("5df5acd0d48c2") // Your project ID
-  .setKey("919c2d18fb5d4...a2ae413da83346ad2") // Your secret API key
-  .setSelfSigned(true) // For self signed certificates only use for development
+  .setSelfSigned(true) // For self signed certificates, only use for development
 
+// Register User
 val account = Account(client)
 val response = account.create("email@example.com", "password")
-val json = response.body?.string()</code></pre>
+val json = response.body?.string()
+
+// Subscribe to files channel
+val realtime = Realtime(client)
+
+realtime.subscribe("files", callback = { response ->
+    if(response.event === 'storage.files.create') {
+        // Log when a new file is uploaded
+        print(response.payload.toString());
+    }
+})</code></pre>
 </div>
 
 <h2><a href="/docs/getting-started-for-android#nextSteps" id="nextSteps">Next Steps</a></h2>

app/views/docs/getting-started-for-flutter.phtml

@@ -116,7 +116,7 @@ Client client = Client();
 client
     .setEndpoint('https://localhost/v1') // Your Appwrite Endpoint
     .setProject('5e8cf4f46b5e8') // Your project ID
-    .setSelfSigned() // Remove in production
+    .setSelfSigned(true) // For self signed certificates, only use for development
 ;
 </code></pre>
 </div>
@@ -142,6 +142,24 @@ Response user = await account
 </code></pre>
 </div>
 
+<h2><a href="/docs/getting-started-for-flutter#listenToChanges" id="listenToChanges">Listen to changes</a></h2>
+
+<p>If you want to listen to changes in realtime from Appwrite, you can subscribe to a variety of channels and receive updates within milliseconds. Full documentation for Realtime can be found <a href="/docs/realtime">here</a>.</p>
+
+<div class="ide" data-lang="dart" data-lang-label="Flutter SDK">
+  <pre class="line-numbers"><code class="prism language-dart" data-prism>// Subscribe to files channel
+final realtime = Realtime(client);
+final subscription = realtime.subscribe(['files']);
+
+subscription.stream.listen((response) {
+    if(response.event === 'storage.files.create') {
+        // Log when a new file is uploaded
+        print(response.payload);
+    }
+})
+</code></pre>
+</div>
+
 <h2><a href="/docs/getting-started-for-flutter#fullExample" id="fullExample">Full Example</a></h2>
 <div class="ide" data-lang="dart" data-lang-label="Flutter SDK">
   <pre class="line-numbers"><code class="prism language-dart" data-prism>import 'package:appwrite/appwrite.dart';
@@ -151,7 +169,7 @@ Client client = Client();
 client
     .setEndpoint('https://localhost/v1') // Your Appwrite Endpoint
     .setProject('5e8cf4f46b5e8') // Your project ID
-    .setSelfSigned() // Remove in production
+    .setSelfSigned(true) // For self signed certificates, only use for development
 ;
 
 // Register User
@@ -163,6 +181,17 @@ Response user = await account
         password: 'password',
         name: 'My Name'
     );
+
+// Subscribe to files channel
+final realtime = Realtime(client);
+final subscription = realtime.subscribe(['files']);
+
+subscription.stream.listen((response) {
+    if(response.event === 'storage.files.create') {
+        // Log when a new file is uploaded
+        print(response.payload);
+    }
+})
 </code></pre>
 </div>
 

app/views/docs/getting-started-for-server.phtml

@@ -100,7 +100,7 @@ $kotlinVersion = $versions['kotlin'] ?? '';
         <div class="ide margin-top-small" data-lang="nodejs" data-lang-label="Node.js SDK">
             <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = require('node-appwrite');
 
-let client = new sdk.Client();
+const client = new sdk.Client();
 
 client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
@@ -154,7 +154,7 @@ client
     <li>
         <h3>Deno</h3>
         <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Deno SDK">
-            <pre class="line-numbers"><code class="prism language-typescript" data-prism>let client = new sdk.Client();
+            <pre class="line-numbers"><code class="prism language-typescript" data-prism>const client = new sdk.Client();
 
 client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
@@ -246,7 +246,7 @@ val response = account
         <div class="ide margin-top-small" data-lang="nodejs" data-lang-label="Node.js SDK">
             <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = require('node-appwrite');
 
-let client = new sdk.Client();
+const client = new sdk.Client();
 
 client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
@@ -300,7 +300,7 @@ client
     <li>
         <h3>Deno</h3>
         <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Deno SDK">
-            <pre class="line-numbers"><code class="prism language-typescript" data-prism>let client = new sdk.Client();
+            <pre class="line-numbers"><code class="prism language-typescript" data-prism>const client = new sdk.Client();
 
 client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
@@ -344,7 +344,7 @@ client
     <li>
         <h3>Node.js</h3>
         <div class="ide margin-top-small" data-lang="nodejs" data-lang-label="Node.js SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>let users = new sdk.Users(client);
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const users = new sdk.Users(client);
 
 let promise = users.create('email@example.com', 'password');
 
@@ -385,7 +385,7 @@ puts response</code></pre>
     <li>
         <h3>Deno</h3>
         <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Deno SDK">
-            <pre class="line-numbers"><code class="prism language-typescript" data-prism>let users = new sdk.Users(client);
+            <pre class="line-numbers"><code class="prism language-typescript" data-prism>const users = new sdk.Users(client);
 
 let promise = users.create('email@example.com', 'password');
 
@@ -431,15 +431,15 @@ println(res.body?.string())</code></pre>
         <div class="ide margin-top-small" data-lang="nodejs" data-lang-label="Node.js SDK">
             <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = require('node-appwrite');
 
-let client = new sdk.Client();
+const client = new sdk.Client();
 
 client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
     .setProject('5df5acd0d48c2') // Your project ID
     .setKey('919c2d18fb5d4...a2ae413da83346ad2') // Your secret API key
 ;
 
-let users = new sdk.Users(client);
+const users = new sdk.Users(client);
 let promise = users.create('email@example.com', 'password');
 
 promise.then(function (response) {
@@ -513,8 +513,8 @@ puts response</code></pre>
         <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Deno SDK">
             <pre class="line-numbers"><code class="prism language-typescript" data-prism>import * as sdk from "https://deno.land/x/appwrite/mod.ts";
 
-let client = new sdk.Client();
-let users = new sdk.Users(client);
+const client = new sdk.Client();
+const users = new sdk.Users(client);
 
 client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint

app/views/docs/getting-started-for-web.phtml

@@ -5,7 +5,7 @@ $platform = [];
 foreach($platforms['client']['languages'] ?? [] as $lang) {
 
     $key = $lang['key'] ?? '';
-    
+
     if($key === 'web') {
         $platform = $lang;
         break;
@@ -64,8 +64,8 @@ $demos = $platform['demos'] ?? [];
 const appwrite = new Appwrite();
 
 appwrite
-    .setEndpoint('http://localhost/v1') // Set only when using self-hosted solution
-    .setProject('455x34dfkj')
+    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
+    .setProject('455x34dfkj') // Your project ID
 ;
 
 </code></pre>
@@ -85,30 +85,54 @@ appwrite
                     <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Register User
 appwrite
     .account.create('me@example.com', 'password', 'Jane Doe')
-        .then(function (response) {
+        .then(response => {
             console.log(response);
-        }, function (error) {
+        }, error => {
             console.log(error);
         });
 </code></pre>
 </div>
 
+<h2><a href="/docs/getting-started-for-web#listenToChanges" id="listenToChanges">Listen to changes</a></h2>
+
+<p>If you want to listen to changes in realtime from Appwrite, you can subscribe to a variety of channels and receive updates within milliseconds. Full documentation for Realtime can be found <a href="/docs/realtime">here</a>.</p>
+
+<div class="ide" data-lang="javascript" data-lang-label="Web SDK">
+                    <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Subscribe to files channel
+appwrite.subscribe('files', response => {
+    if(response.event === 'storage.files.create') {
+        // Log when a new file is uploaded
+        console.log(response.payload);
+    }
+});
+</code></pre>
+</div>
+
 <h2><a href="/docs/getting-started-for-web#fullExample" id="fullExample">Full Example</a></h2>
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
                     <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Init your Web SDK
 const appwrite = new Appwrite();
 
 appwrite
-    .setProject('455x34dfkj');
+    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
+    .setProject('455x34dfkj') // Your project ID
 
 // Register User
 appwrite
     .account.create('me@example.com', 'password', 'Jane Doe')
-        .then(function (response) {
+        .then(response => {
             console.log(response);
-        }, function (error) {
+        }, error => {
             console.log(error);
         });
+
+// Subscribe to files channel
+appwrite.subscribe('files', response => {
+    if(response.event === 'storage.files.create') {
+        // Log when a new file is uploaded
+        console.log(response.payload);
+    }
+});
 </code></pre>
 </div>
 

app/views/docs/index.phtml

@@ -5,12 +5,12 @@ $family     = $this->getParam('family', '');
 $title      = $this->getParam('title', '');
 $subtitle   = $this->getParam('subtitle', '');
 
-$clientSDK      = ($family === APP_PLATFORM_CLIENT && !empty($sdk)) ? '?sdk='.$sdk : '';
-$serverSDK      = ($family === APP_PLATFORM_SERVER && !empty($sdk)) ? '?sdk='.$sdk : '';
+$clientSDK      = ($family === APP_PLATFORM_CLIENT && !empty($sdk)) ? '?sdk=' . $sdk : '';
+$serverSDK      = ($family === APP_PLATFORM_SERVER && !empty($sdk)) ? '?sdk=' . $sdk : '';
 
 $cols = [
-        'xxl' => ['nav' => 'span-3', 'main' => 'span-9'],
-        'xxxl' => ['nav' => 'span-2', 'main' => 'span-10'],
+    'xxl' => ['nav' => 'span-3', 'main' => 'span-9'],
+    'xxxl' => ['nav' => 'span-2', 'main' => 'span-10'],
 ]
 ?>
 <div class="zone <?php echo $layout; ?> docs" data-general-strech-value="<?php echo $layout; ?>">
@@ -67,14 +67,15 @@ $cols = [
                 <div class="margin-bottom-small">
                     <b class="text-size-small">Learn More</b>
                 </div>
-                
+
                 <ul class="margin-bottom">
+                    <li><a href="/docs/realtime">Realtime</a></li>
                     <li><a href="/docs/functions">Functions</a></li>
                     <li><a href="/docs/keys">API Keys</a></li>
                     <li><a href="/docs/webhooks">Webhooks</a></li>
                     <li><a href="/docs/tasks">Tasks</a></li>
                 </ul>
-                
+
                 <div class="margin-bottom-small">
                     <b class="text-size-small">Advanced</b>
                 </div>
@@ -88,19 +89,19 @@ $cols = [
             </nav>
         </div>
         <div class="col <?php echo $cols[$layout]['main']; ?>">
-                <article>
-                    <a href="/docs" class="back"><i class="icon-left-open"></i> Docs</a>
+            <article>
+                <a href="/docs" class="back"><i class="icon-left-open"></i> Docs</a>
 
-                    <h1 class="margin-top-small margin-bottom">
-                        <?php echo $this->escape($title); ?>
+                <h1 class="margin-top-small margin-bottom">
+                    <?php echo $this->escape($title); ?>
 
-                        <?php if(!empty($subtitle)): ?>
-                            &nbsp;<span class="text-fade text-size-normal">| <?php echo $this->escape($subtitle); ?></span>
-                        <?php endif; ?>
-                    </h1>
+                    <?php if (!empty($subtitle)) : ?>
+                        &nbsp;<span class="text-fade text-size-normal">| <?php echo $this->escape($subtitle); ?></span>
+                    <?php endif; ?>
+                </h1>
 
-                    <?php echo $this->exec($this->getParam('page', [])); ?>
-                </article>&nbsp;
+                <?php echo $this->exec($this->getParam('page', [])); ?>
+            </article>&nbsp;
         </div>
     </div>
 </div>

app/views/docs/permissions.phtml

@@ -102,7 +102,7 @@
 <p>In the following example, we are creating a document that can be read by everyone and only be edited, or deleted by a user with a UID <span class="tag">user:5c1f88b42259e</span>.</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-    <pre class="line-numbers"><code class="prism language-javascript" data-prism>let sdk = new Appwrite();
+    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
 
 sdk
     .setProject('')
@@ -129,7 +129,7 @@ promise.then(function (response) {
 <p>In the following example, we are creating a document that can be read-only by members of <span class="tag">team:5c1f88b87435e</span> and can only be edited, or deleted by members of the same team that possesses the role <span class="tag">owner</span>.</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-    <pre class="line-numbers"><code class="prism language-javascript" data-prism>let sdk = new Appwrite();
+    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
 
 sdk
     .setProject('')