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.
npm install ws.direct
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><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>- Aleksander Moskvitin