User Tools

Site Tools


Jeyson JSON RPC usage sample

In the sample I used named parameters.

NPM: https://www.npmjs.com/package/jayson

Server code

jserver.js
const express = require('express')
const bodyParser = require('body-parser')
const jayson = require('jayson')
 
const rpcBundle = {
    add: function(a, b, callback) {
        console.log({a, b})
        let c = a + b;
        callback(null, c);
    }
}
 
const app = express()
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json())
 
app.post('/api', jayson.server(rpcBundle, { collect: false }).middleware())
 
app.listen(80)

Client code

jclient.js
var jayson = require('jayson');
 
var client = jayson.client.http('http://localhost:80/api');
 
var functionName = 'add';
var functionParams = {a: 1, b: 2}
client.request(functionName, frunctionParams, function(err, response) {
    if (err) throw err;
    console.log(response.result);
});

Output

$ node jclient.js 
{ result: 3 }

Dump of request and response

POST /api HTTP/1.1
Content-Length: 99
Content-Type: application/json; charset=utf-8
Accept: application/json
Host: localhost
Connection: close

{
   "method":"add",
   "jsonrpc":"2.0",
   "params":{"a":1,"b":2},
   "id":"933587cc-6669-4957-96e3-8af17d457c43"
}
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Length: 72
Content-Type: application/json; charset=utf-8
	
{
  "jsonrpc":"2.0",
   "id":"933587cc-6669-4957-96e3-8af17d457c43",
   "result":3
}

Browser module for Vue.js

jclient.js
'use strict'
 
import jayson from 'jayson/lib/client/browser'
import axios from 'axios'
 
var createTransport = function(url) {
    return function(request, callback) {
        axios
            .post(url, request,
                    { transformResponse: [function (data) {
                        return data
                    }]}
            )
            .then(function(res) {
                callback(null, res.data)
            })
            .catch(function(err) {
                callback(err)
            })
    }
}
 
export default function(url) {
    var transport = createTransport(url)
    return jayson(transport, {})
}

Usage

App.vue
<template>
    <div>
        <button class="button" v-on:click="getRandom">Update</button>
        <p>
            <pre>{{data}}</pre>
        </p>
    </div>
</template>
 
<script>
import jclient from './jclient'
 
export default {
    data: function() {
        return {
            data: {}
        }
    },
    methods: {
        getRandom() {
            var client = jclient('https://api.random.org/json-rpc/1/invoke')
            client.request('generateIntegers',
                {
                    apiKey: 'cd56b681-c001-4178-801e-53bxxxxxxxxxx',
                    n: 3,
                    min: 10,
                    max: 99
                },
                (err, response) => {
                    if (!err) 
                         this.data = response.result
                }
            )
        }
 
    }
}
</script>

First PagePrevious PageBack to overviewNext PageLast Page