ws.direct

v1.2.7

Published

a year ago

RPC via WebSocket, access to the objects on server. And implementation of the Ext.direct via WebSocket.

Downloads

126

0High
0Medium
0Low

sash

websocket ext.direct rpc server object access

WS.Direct

Simple RPC works through Socket.io. Allows you will get access to objects on the server. The library is made by analogy, ext.direct. If you use override for direct.proxy, you can use the api instead of ext.direct by http.

Requirements

Installation

npm install ws.direct

Example

Creating simple server


const wsdirect = require('ws.direct'),
      APIManager = wsdirect.APIManager,
      port = 8811,
      socketio = require('socket.io').listen(port);

var api = new APIManager(socketio, {url: `http://localhost:${port}`}); //URL need for client to know where to connect 

var SomePublicAPI = class {

    notPublicMethod() {}

    publicMethod(x, y, result) {
        if (result.isResult()) {
            result.setData(x + y);
            result.setMessage('SUPER');
            result.send();
        }
    }

    publicMethodException(result) {
            throw new Error('Some error');
    }

    //Example API for ExtJs GridPanel:
    getListOfCharacters(params, result) {
        if (result.isResult()) {
            result.setData([
                { name: 'Eddie Valiant'},
                { name: 'Roger Rabbit'},
                { name: 'Jessica Rabbit'},
                { name: 'Judge Doom'},
                { name: 'Baby Herman'},
                { name: 'Benny the Cab'},
                { name: 'Dolores'},
                { name: 'R.K. Maroon'},
                { name: 'Marvin Acme'},
                { name: 'Lt. Santino'},
                { name: 'Teddy Valiant'},
                { name: 'Angelo'},
                { name: 'Bongo the Gorilla'},
                { name: 'Lena Hyena'},
                { name: 'Toon Bullets'}
            ]).send();
        }
    }

    apiMethods() {
        return {publicMethod: true, publicMethodException: true, getListOfCharacters: true};
    }
};

api.add('PubAPI', new SomePublicAPI);

//ClientInitScript variable will contain the client script. It can be performed on the browser side in any convenient way.
var clientInitScript = api.getScript();




//for example:
var http = require('http');
var server = http.createServer(function (req, res) {
    var fs = require('fs');
    var alias = {
        '/socket.io/socket.io.js': `${__dirname}/node_modules/socket.io-client/dist/socket.io.js`,
        '/Ext5DirectProxyOverride.js': wsdirect.getPublicPath() + '/Ext5DirectProxyOverride.js',
        '/ws.direct.client.js': wsdirect.getPublicPath() + '/ws.direct.client.js',
        '/': `${__dirname}/index.html`
    };

    if (alias.hasOwnProperty(req.url)) {
        fs.readFile(alias[req.url], (e, d) => {
            res.end(d);
        });
    } else {
        res.end(clientInitScript);
    }

});

server.listen(3500);

index.html


<html>
    <head>
        <script src="http://localhost:3500/socket.io/socket.io.js"></script>
        <script src="http://localhost:3500/ws.direct.client.js"></script>
        <script>
            var client = new WSDirectClient('http://localhost:8811/');
            client.onInit = function() {
                //callback on all results
                wsdirect.PubAPI.publicMethod.on('response', function(result, event, client) {
                    console.log('Callback on all results: ', result, event, client);
                });

                //callback
                wsdirect.PubAPI.publicMethod(2, 3, function(res, event) {
                    if (event.success) {
                        document.getElementById('result').innerHTML = `Result: ${res}`;
                    } else {
                        document.getElementById('result').innerHTML = `Error: ${e.msg}`;
                    }
                });

                //promise - the browser must support the promises, or need to add something...
                wsdirect.PubAPI.publicMethod(2, 3).then(function(res) {
                    alert(`Promise result: ${res}`);
                }).catch(function(e) {
                    alert(`Promise error: ${e.msg}`);
                });
            }
        </script>
    </head>

    <body>
        <h1>Hi!</h1>

        <div id="result" style="border: 1px dotted gray;"></div>
    </body>
</html>

ExtJS 5.1 Grid example:

<html>
    <head>
        <script src="http://localhost:3500/socket.io/socket.io.js"></script>
        <script src="http://localhost:3500/ws.direct.client.js"></script>
        <script src="http://localhost:3500/initMyAPI.js"></script>
        <script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
        <script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
        <link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script src="http://localhost:3500/Ext5DirectProxyOverride.js"></script>

        <script>
            Ext.define('App.view.Viewport', {
                extend: 'Ext.container.Viewport',
                items: {
                    xtype: 'gridpanel',
                    title: 'The list of characters',
                    store: {
                        autoLoad: true,
                        proxy: {
                            type: 'direct',
                            api: {
                                read: 'wsdirect.PubAPI.getListOfCharacters'
                            }
                        },
                        fields: [
                            {
                                name: 'name',
                                type: 'string'
                            }
                        ]
                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            flex: 1,
                            dataIndex: 'name',
                            text: 'Name'
                        }
                    ]
                }
            });

            Ext.application({
                name: 'App',
                launch: function() {
                    Ext.create('App.view.Viewport');
                }
            });        
        </script>
    </head>

    <body>
    </body>
</html>

Author

Aleksander Moskvitin

Published

Vulnerabilities

Links

Maintainers

Keywords