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;