DEV Community 👩‍💻👨‍💻

Monawwar Abdullah
Monawwar Abdullah

Posted on

Execute Async Server Function from Client Side

Execute server's asynchronous functions from client-side

Often it happens while writing web application that you need to make HTTP requests to fetch, create, update or delete data from database.

With RealSync, you wouldn't have to remember all those HTTP endpoints, and perform actions as if you're executing server functions from client-side.

RealSync uses web socket to make contact with the server and execute asynchronous function and returns promise which you can await in the client side. Here is an example of a server code, you can connect it with Express or Koa, if you want.

const http = require('http')
const app = http.createServer()
const { RealSync } = require('../packages/server/lib')

const realsync = new RealSync(app, '*')

realsync.register('profile/setup', async (client) => {
    const firstName = await client.run('profile/firstname')
    const lastName = await client.run('profile/lastname')

    return { firstName, lastName }
})

app.listen(8080, () => {
    console.log('8080')
})
Enter fullscreen mode Exit fullscreen mode

This will register a service “add” in realsync and accept two parameters, a and b.

And here is a client demonstration using React:

import { RealSync } from '@realsync/react'
const realsync = new RealSync('http://localhost:8080')

function App() {
    useEffect(() => {
        // this will register services

        realsync.register('profile/firstname', () => {
            return prompt('Enter first name')
        })

        realsync.register('profile/lastname', () => {
            return prompt('Enter last name')
        })
    }, [])

    const Start = async () => {
        const profile = await realsync.service('profile/setup')
        console.log('profile', profile)
    }

    return (
        <div>
            <button onClick={Start}>Start</button>
        </div>
    )
}

Enter fullscreen mode Exit fullscreen mode

I would love to have feedback forum you guys. I’ve more to add in this library.

GitHub: https://GitHub.com/xencodes/realsync

Top comments (7)

Collapse
sfleroy profile image
Leroy

Mmm I don't want to be mean but I fail to see how this is any different from a standard is client and api on the server side. Especially with type script and open api generators

Collapse
xencodes profile image
Monawwar Abdullah Author

I've updated the post, checkout the new feature

Collapse
xencodes profile image
Monawwar Abdullah Author

well, this isn't suitable for big applications, if you're working on self-hosted open-sourced application, this would really be helpful, also, i just pushed version 2

Collapse
xencodes profile image
Monawwar Abdullah Author

have you gave it a try?

Collapse
xencodes profile image
Monawwar Abdullah Author

I've updated the post, checkout the new feature

Head to your account's Settings to...

🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content