1. Create a React.js project, let's say it's
simple-chat-reactjs
, by execute command:
npx create-react-app simple-chat-reactjs2. Install ezyfox-es6-client , execute:
cd simple-chat-reactjs npm install ezyfox-es6-client3. 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 ClientCreator7. 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 ClientCreator11. 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;