An Open Source Organization!

Build And Deploy In Local

Let’s say you’re using Eclipse IDE and your project folders structure is:

1. Ensure any errors in your project has gone:

– Right click to simple-chat project and select Run AsMaven build

– Select Main tab and set  Goals: clean install

– Click run

2. On Eclipse, right click to project and select Run AsMaven build

3. Config project’s run configurations

Select Main tab and set:

Goals: clean install
Profiles: export

run configurations: main tab setting

Select Environment tab and set:

EZYFOX_SERVER_HOME: to your ezyfox server path

run configurations: environment tab setting

4. Click run

5. You need build all 4 projects

simple-chat-common
simple-chat-plugin
simple-chat-api
simple-chat-entry

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;