Realtime Server-client interaction using OpenFaaS server-less function with Redux

In this article we will explain how we send data actions to UI in realtime and sync data in all devices in realtime. OpenFaaS function will interact with WebSocket serve which secured using HMAC. We also use Redux to change the state of Telar Social UI in a nutshell.

Telar Social

Telar Social is an open source social media written in Golang ,Designed for different purpose, social network, social review, image sharing, video sharing, community blog, discussion or sharing economy network.

Some of advantages:

• Easy to setup and develop.
• Open source.
• Running on public cloud, private cloud or on premises.
• Built base on Domain Driven Design architecture for microservice/cloud functions.
• Running on Kubernetes.
• High performance and at scale.

OpenFaaS

OpenFaaS makes it easy for developers to deploy event-driven functions and microservices to Kubernetes without repetitive, boiler-plate coding. Package your code or an existing binary in a Docker image to get a highly scalable endpoint with auto-scaling and metrics.

Flux pattern

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Redux

Redux is a library inspired by Flux and can be considered as an implementation of Flux. Redux makes easy to handle the state of the application and manage to display data on user actions. It is a very powerful library but also very lightweight.

WebSocket

WebSocket is a technology that keeps the TCP connection open, so you can constantly send data back and forth between the ESP and the client, with low latency.

Websocket Connection

Realtime server-client interaction in Telar Social

In Telar Social UI we are using Redux to manage the states. All the data is stored in a single storage of Redux. Calling action (a simple object for redux dispatcher) by dispatcher will change the state of UI components.

Functions send the action (for dispatching in UI by Redux) to Action Controller then Action controller will send it to WebSocket server to handle. WebSocket server will send the action to respective user. UI will dispatch the action and change the state.

As below picture as an example:

1. User do an action in UI like adding a comment.
2. UI call Comment Controller (OpenFaaS function) via API Service to add the comment.
3. Comment Controller call Action Controller to send Action to WebSocket server.
4. WebSocket server send action to respective.
5. Action will be dispatched by Redux Dispatcher.
6. Change Redux Store.
7. Apply the change on UI and show the notification.

Learn more about the project 🥧 🍰 🎂 🍮 🍭 🍬

• Easy steps from OpenFaaS to your own Telar Social Media on Cloud
• Telar Social using Domain Driven Design(DDD) for Microservices
• How we use AI for privacy in Telar Social
• Telar Social front-end DI (Dependency Injection)
• Telar Social AI privacy-preserved recommendation
• Telar Social AI Moderation

👋 For more information please visit Telar official website.