Broadcast

Introduction

Broadcast real-time messages, using firebase-database.

  • Author: Rex

Usage

Sample code

Install plugin

Load minify file

  • Add Firebase SDKs
    <body>
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
        <script src="/__/firebase/7.7.0/firebase-app.js"></script>
        <!-- Add Firebase products that you want to use -->
        <script src="/__/firebase/7.7.0/firebase-database.js"></script>
    </body>    
    
  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexfirebaseplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfirebaseplugin.min.js', true);
    
  • Initialize firebase application.
    firebase.initializeApp({
       apiKey: '...',
       authDomain: '...',
       databaseURL: '...',
       projectId: '...',
       storageBucket: '...',
       messagingSenderId: '...'
    })
    
  • Add messager object
    var messager = scene.plugins.get('rexfirebaseplugin').add.broadcast(config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Add Firebase SDKs
    <body>
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
        <script src="/__/firebase/7.7.0/firebase-app.js"></script>
        <!-- Add Firebase products that you want to use -->
        <script src="/__/firebase/7.7.0/firebase-database.js"></script>
    </body>    
    
  • Install plugin in configuration of game
    import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexFirebase',
                plugin: FirebasePlugin,
                start: true
            }]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Initialize firebase application.
    firebase.initializeApp({
       apiKey: '...',
       authDomain: '...',
       databaseURL: '...',
       projectId: '...',
       storageBucket: '...',
       messagingSenderId: '...'
    })
    
  • Add messager object
    var messager = scene.plugins.get('rexFirebase').add.broadcast(config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Add Firebase SDKs
    <body>
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
        <script src="/__/firebase/7.7.0/firebase-app.js"></script>
        <!-- Add Firebase products that you want to use -->
        <script src="/__/firebase/7.7.0/firebase-database.js"></script>
    </body>    
    
  • Initialize firebase application.
    firebase.initializeApp({
       apiKey: '...',
       authDomain: '...',
       databaseURL: '...',
       projectId: '...',
       storageBucket: '...',
       messagingSenderId: '...'
    })
    
  • Import class
    import { Broadcast } from 'phaser3-rex-plugins/plugins/firebase-components.js';
    
  • Add messager object
    var messager = new Broadcast(config);
    

Create instance

var messager = scene.plugins.get('rexFirebase').add.broadcast({
    root: '',
    // receiverID: '',
    // history: 0
});
  • root : Path of this messager.
  • receiverID : ID of receiver/channel.
  • history : Stored received (history) messages in client side.
    • 0, or false : No history message stored.
    • -1, or true : Infinity history message stored. i.e. store all messages from starting updating.
    • A number larger then 0 : Length of stored history message.

Send message

  1. Set sender in config, or setSender method.
    messager.setSender(userID, userName);
    
    or
    messager.setSender({
        userID: userID,
        userName: userName
    });
    
    • userID : User ID of sender.
    • userName : Display name of sender.
  2. Set receiver in config, or setReceiver method.
    messager.setReceiver(receiverID);
    
    • receiverID : ID of receiver/channel.
  3. Send message to receiverID.
    messager.send(message);
    
    • message : A string message, or a JSON data.

Receive messages

  1. Register receive event
    messager.on('receive', function(data){
        // var senderID = data.senderID;
        // var senderName = data.senderName;
        // var message = data.message;
    })
    
  2. Set receiver in config, or setReceiver method
    messager.setReceiver(receiverID);
    
    • receiverID : ID of receiver/channel.
  3. Start receiving
    messager.startReceiving();
    
  4. Stop receive
    messager.stopReceiving();
    

Only receive messages after invoking startReceiving method. Previous messages won't be got anymore.

Received messages

Received messages will be saved in client side.

  • Get received (history) messages.
    var messages = messager.getHistory();
    
  • Clear history messages.
    messager.clearHistory();