Using Custom Event Notifications

You know about the reserved events such as value, added, changed, online or removed, but did you know we also have custom events?

Custom events can be handy for passing messages or data between devices, users, different collections or even different parts of the same app.

Here’s one basic example of a custom event listener:

    flybase.on("custom_event", function(message) {
    	console.log( message );
    });
    
    flybase.trigger("custom_event", "Hi")

In this example, we set up a listener for a custom event called custom_event, and then we triggered that event with a message.

In this case, the message was Hi.

Just like reserved events, custom events are linked to a collection, but unlike reserved events no data is ever written to disk.

What can you do with custom events?#

Custom events are handy in that you can use them for nearly anything.

For example, you could set up a custom event for a collection called users and fire off a message everytime a user logs in or joins which would be seen by all other users currently logged in.

This could also be useful for displaying activity streams, for example we’ll build a basic activity stream now that will display notifications on a page to all users.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Custom events demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/flybaseio/flybase-js/flybase.js"></script>
    </head>
    <body>
    	<div id="activity_stream"></div>
    	<script>
    		var flybaseRef = new Flybase("YOUR-API-KEY", "YOUR-APP", "activity");
    		flybase.on("activity", function(message) {
    			displayMessage(message);
    		});
    
    		function displayMessage(message) {
    			$('<div/>')
    				.text(message.text)
    				.appendTo($('#messagesDiv'));
    			$('#activity_stream')[0].scrollTop = $('#activity_stream')[0].scrollHeight;
    		}
    	</script>
    </body>
    </html>

Now, whenever you send a trigger to the activity event, it will display to any users who are listening.

flybase.trigger("activity", "Flybase has logged in");

Custom events aren’t limited to just strings, they can also contain JSON objects.

    flybase.on("custom_event", function(message) {
    	var name = message.name;
    	var msg = message.msg;
    	alert( name + " Said: " + msg );
    });
    
    flybase.trigger("custom_event", {"name":"Flybase","msg":"Hello"});

There are plenty of other uses for being able to instantly push custom events to users of your apps, but this is one example.

Custom events helps increase how you can make your apps useful to your users, thereby making life easier for everyone.

Ready To Build Awesome Apps?

Get started for free

Get started