An Open Source Organization!

Client React.js Interaction

1. Create a React.js project, let’s say it’s simple-chat-reactjs, by execute command:

npx create-react-app simple-chat-reactjs

2. Install ezyfox-es6-client

, execute:

cd simple-chat-reactjs
npm install ezyfox-es6-client

3. Install Mvc.js (optional)

– Download Mvc.js file

– Copy Mvc.js file to src folder

4. Create file ClientCreator.js

5. Import module

import Ezy from 'ezyfox-es6-client';
import Mvc from '../Mvc'; /*optional*/

6. Declare class

class ClientCreator {
    setCredential(username, password) {
        this.username = username;
        this.password = password;
    }

    // hidden code
}
export default ClientCreator

7. Create handlers

var mvc = Mvc.getInstance(); /*optional*/
var loginController = mvc.getController("login");
var handshakeHandler = new Ezy.HandshakeHandler();
handshakeHandler.getLoginRequest = () => {
    return ["freechat", this.username, this.password, []];
}

var userLoginHandler = new Ezy.LoginSuccessHandler();
userLoginHandler.handleLoginSuccess = function() {
    var accessAppRequest = ["freechat", []];
    this.client.sendRequest(Ezy.Command.APP_ACCESS, accessAppRequest);
}

var accessAppHandler = new Ezy.AppAccessHandler();
accessAppHandler.postHandle = function(app, data) {
    loginController.updateViews("access-app"); /*optional*/
}

var disconnectionHandler = new Ezy.DisconnectionHandler();
disconnectionHandler.preHandle = function(event) {
    console.log("custom handle disconnection");
}

8. Config client

var config = new Ezy.ClientConfig;
config.zoneName = "freechat";
var clients = Ezy.Clients.getInstance();
var client = clients.newDefaultClient(config);
var setup = client.setup;
setup.addEventHandler(Ezy.EventType.DISCONNECTION, disconnectionHandler);
setup.addDataHandler(Ezy.Command.HANDSHAKE, handshakeHandler);
setup.addDataHandler(Ezy.Command.LOGIN, userLoginHandler);
setup.addDataHandler(Ezy.Command.APP_ACCESS, accessAppHandler);

9. Add App’s data handlers

setupApp.addDataHandler("1", function(app, data) {
});
setupApp.addDataHandler("2", function(app, data) {
});

10. Merge all code to one

import Ezy from 'ezyfox-es6-client';
import Mvc from '../Mvc'; /*optional*/

class ClientCreator {
    setCredential(username, password) {
        this.username = username;
        this.password = password;
    }

    createClient() {
        var mvc = Mvc.getInstance(); /*optional*/
        var loginController = mvc.getController("login");
        var handshakeHandler = new Ezy.HandshakeHandler();
        handshakeHandler.getLoginRequest = () => {
            return ["freechat", this.username, this.password, []];
        }

        var userLoginHandler = new Ezy.LoginSuccessHandler();
        userLoginHandler.handleLoginSuccess = function() {
            var accessAppRequest = ["freechat", []];
            this.client.sendRequest(Ezy.Command.APP_ACCESS, accessAppRequest);
        }

        var accessAppHandler = new Ezy.AppAccessHandler();
        accessAppHandler.postHandle = function(app, data) {
            loginController.updateViews("access-app"); /*optional*/
        }

        var disconnectionHandler = new Ezy.DisconnectionHandler();
        disconnectionHandler.preHandle = function(event) {
            console.log("custom handle disconnection");
        }

        var config = new Ezy.ClientConfig;
        config.zoneName = "freechat";
        var clients = Ezy.Clients.getInstance();
        var client = clients.newDefaultClient(config);
        var setup = client.setup;
        setup.addEventHandler(Ezy.EventType.DISCONNECTION, disconnectionHandler);
        setup.addDataHandler(Ezy.Command.HANDSHAKE, handshakeHandler);
        setup.addDataHandler(Ezy.Command.LOGIN, userLoginHandler);
        setup.addDataHandler(Ezy.Command.APP_ACCESS, accessAppHandler);
        var setupApp = setup.setupApp("freechat");
        setupApp.addDataHandler("1", function(app, data) {
        });
        
        setupApp.addDataHandler("2", function(app, data) {
        });
        
        setupApp.addDataHandler("4", function(app, data) {
        });
        
        setupApp.addDataHandler("5", function(app, data) {
        });
        
        setupApp.addDataHandler("6", function(app, data) {
        });
        return client;
    }
}

export default ClientCreator

11. Connect to server

var clientCreator = new ClientCreator();
clientCreator.setCredential(this.username, this.password);
var client = clientCreator.createClient();
client.connect("wss://ws.tvd12.com/ws");

12. Full connect to server source code

import * as React from 'react';
import Mvc from '../../Mvc';
import ClientCreator from '../../socket/ClientCreator'

class LoginView extends React.Component {
    constructor(props) {
        super(props);
        this.username = "dungtv";
        this.password = "123456";
        this.login = this.login.bind(this);
    }

    login() {
        var clientCreator = new ClientCreator();
        clientCreator.setCredential(this.username, this.password);
        var client = clientCreator.createClient();
        client.connect("wss://ws.tvd12.com/ws");
    }

    render() {
        return (
            
        );
    }
}

export default LoginView;

Handle Client Requests

Let’s look at this example:

@Setter
@EzyPrototype
@EzyObjectBinding(write = false)
@EzyClientRequestListener(GREET)
public class GreetRequestHandler 
        extends ClientRequestHandler 
        implements EzyDataBinding {

    private String who;
    
    @EzyAutoBind
    private Greeting greeting;
    
    @Override
    protected void execute() throws EzyBadRequestException {
        responseFactory.newObjectResponse()
            .command(GREET)
            .param("message", greeting.greet(who))
            .session(session)
            .execute();
    }
}

In this example:

GreetRequestHandler handle GREET (String GREET = "greet") command from client by using @EzyClientRequestListener annotation

– Client send to server who parameter

– EzyFox bind who parameter to who property of GreetRequestHandler directly by using @EzyObjectBinding annotation

@EzyPrototype indicate that anytime client request to server, EzyFox will create a new instance of handler class to handle request

Handle Server Events

List of server events (refer to class EzyEventType):

SERVER_READY: fired when server ready, let’s init all components here

USER_LOGIN: fired when user login to a zone, let’s check user login info here and throw EzyLoginErrorException(EzyLoginError) when authentication failed

USER_ACCESS_APP: fired when user access to an app, let’s check the accessibility here and throw EzyAccessAppException(EzyAccessAppError) when you don’t want user access to the app

USER_ADDED: fired when an user has added to a zone

USER_REMOVED: fired when an user has removed from a zone

SESSION_REMOVED: fired when a session has removed from server

STREAMING: fired when a client stream a byte array to server

Handle SERVER_READY event

@EzySingleton
@EzyServerEventHandler(SERVER_READY)
public class ServerReadyController 
		extends EzyAbstractAppEventController {

	@Override
	public void handle(EzyAppContext ctx, EzyServerReadyEvent event) {
		getLogger().info("simple-chat app: fire custom app ready");
	}
}

 

Handle USER_LOGIN event

@EzySingleton
@EzyServerEventHandler(USER_LOGIN)
public class UserLoginController extends EzyAbstractPluginEventController {

    @Override
    public void handle(EzyPluginContext ctx, EzyUserLoginEvent event) {
        getLogger().info("handle user {} login in", event.getUsername());
        String username = event.getUsername();
        if(username.startsWith("admin"))
            throw new EzyLoginErrorException(EzyLoginError.INVALID_USERNAME);
    }
}

Create a Project

1. Download ezyfox-server-archetype

2. Move to ezyfox-server-archetype and execute: mvn install

3. On Eclipse, create a maven project with ezyfox-server-archetype
Create a maven project with ezyfox-server-archetype

4. Enter the project’s group id, artifact id, version and packge. Let’s say:

- Group Id: com.example
- Artifact Id: simple-chat
- Version: 0.0.1
- Package: com.example.simple_chat

Enter the project information

5. Click Finish and you have 5 projects

Created projects

Setup Dev Environment

1. Setup Java environment

‐ Download & Install JDK 8

Setup JAVA_HOME variable

2. Download & Install Eclipse EE

3. Download & Install Lombok

4. Setup Maven

‐ Download Maven

Setup MAVEN_HOME variable

5. Clone or download reflections project

Move to reflections folder and execute: mvn clean install

6. Clone or download ezyfox project

Move to ezyfox folder and execute:

# On Windows
build.bat

# On Linux
./build.sh

7. Clone or download ezyfox-core project

Move to ezyfox-core folder and execute: mvn clean install

8. Clone or download ezyfox-server project

Move to ezyfox-server folder and execute:

# On Windows
build.bat

# On Linux
./build.sh

Get Started

1. Download the EzyFox Standard Edition

2. Unzip it, let’s say in Applications/

3. Start the EzyFox Server:

# On Windows, execute:
console.bat

# On other operating systems, execute:
./console.sh

4. Download Hello World Example

5. Unzip it, let’s say in Workspace/

6. Move to Workspace/ezyfox-server-example/hello-world/clients/javascript

7. Open index.html on Browser

8. Enter your name and click Connect. Enjoy!