Online user list

Introduction

Online user list, 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 online-user-list object
    var userList = scene.plugins.get('rexfirebaseplugin').add.onlineUserList(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 online-user-list object
    var userList = scene.plugins.get('rexFirebase').add.onlineUserList(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 { OnlineUserList } from 'phaser3-rex-plugins/plugins/firebase-components.js';
    
  • Add online-user-list object
    var userList = new OnlineUserList(config);
    

Create instance

var userList = scene.plugins.get('rexFirebase').add.onlineUserList({
    root: '',
    // maxUsers: 0
});
  • root : Path of this online user list.
  • maxUsers: Maximum users in this list. Set to 0 to have infinity users.

Join

  1. Set userID and user name.
    userList.setUser(userID, userName);
    
    or
    userList.setUser({
        userID: userID,
        userName: userName
    });
    
    • userID : User ID.
    • userName : Display name.
  2. Join list.
    userList.join();
    

Leave

userList.leave();

Kick user

userList.leave(userID);

Change user name

userList.changeUserName(newUserName);

User list

  • Get users in user list
    var users = userList.getUsers();
    
    • users : Array of user {userID, userName}
  • Is first user in user list?
    var isFirstUser = userList.isFirstUser(userID);
    // var isFirstUser = userList.isFirstUser();  // Current user is first user
    
  • User list is full
    var isFull = userList.isFull();
    
  • Maximun users setting value
    var maxUsers = userList.maxUsers;
    
  • Current user is in list
    var isInList = userList.isInList;
    

Events

  • Any user join
    userList.on('join', user);
    
    • user : {userID, userName}
  • Any user leave
    userList.on('leave', user);
    
    • user : {userID, userName}
  • User list updated, includes user join, user leave, and user name changed
    userList.on('update', users);
    
    • users : Array of user {userID, userName}
  • User name is changed
    userList.on('changename', userID, userName, prevUserName);