QuickStart: Fuse and Realtime Channels

Get going with some fast hands on examples.

Introduction

This QuickStart shows you how to send and receive messages with AppStax Realtime Channels in Fuse. Download the examples and follow along with the code below. This example is found in examples/quickstart-realtime/

To run the code you need to install Fuse and open the project in examples/quickstart-realtime/ with Fuse and preview it on a physical iOS or Android device.

Try it with more devices

Realtime communication isn't much fun with only one device connected. To send and receive messages you need two devices or apps connected to the same channel. If you don't have access to that, you can open the JavaScript Realtime QuickStart page in your browser. It uses the same public/chat channel as this example, so messages you send from you device will appear there and your device will receive messages sent from that page.

Sending messages

The code in MainView.js creates connection to the public/chat channel by calling appstax.channel("public/chat"). A button in MainView.ux triggers the sendMessage() function which sends a generated string message to the channel:

var channel = appstax.channel("public/chat");

function sendMessage() {
    var message = "Hello Fuse! " + Date().toString();
    channel.send(message);
}

Receiving messages

The app listens to message events on the realtime channel. Incoming messages are added to a messages Observable that is exported to the MainView.

var messages = Observable();
var channel = appstax.channel("public/chat");

channel.on("message", function(event) {
    messages.add(event.message);
});

module.exports = {
    messages: messages
}

Complete app

<App>
    <JavaScript File="WebSocket/WebSocket.js" />
    <JavaScript File="appstax.js" ux:Global="appstax" />
    <JavaScript File="MainView.js" />
    <ScrollView>
        <StackPanel Padding="10,40">
            <Panel Padding="20">
                <Button Clicked="{sendMessage}">
                    <Panel Color="#09F" Padding="20">
                        <Text Value="Send a message" 
                              Color="White" 
                              TextAlignment="Center" />
                    </Panel>
                </Button>
            </Panel>
            <Each Items="{messages}">
                <Panel Padding="20">
                    <Text Value="{}" TextWrapping="Wrap"/>
                </Panel>
            </Each>
        </StackPanel>
    </ScrollView>
</App>
var Observable = require("FuseJS/Observable");
var appstax = require("appstax");
appstax.init("NkxXMTRibGhEWHBLcg==");

var messages = Observable();

var channel = appstax.channel("public/chat");

channel.on("message", function(event) {
    messages.add(event.message);
});

function sendMessage() {
    var message = "Hello Fuse! " + Date().toString();
    channel.send(message);
    messages.add(message);
}

module.exports = {
    messages: messages,
    sendMessage: sendMessage
};

Note: This QuickStart uses a shared app key for everyone viewing these examples, so don't be suprised when data appears that you didn't add yourself. Sign up for a free trial to get your own app key to use instead.

What's next?

More QuickStart Guides

Set up your own app project on your computer