However, I have seen experiments, different strategies, scaling web conferences, and “fancy” tools. Throughout my professional career, I’ve come to truly value the importance of understanding the fundamentals, especially the workings of the underlying infrastructure. In this blog, we’ll dive into the specifics of scaling audio streaming applications or features, such as X (formerly Twitter) Spaces.

WebRTC Architecture

Without wasting much of your time: SFU vs MCU, is a war that can be debated till Christ returns to the world for the believers.

A Selective forward Unit (SFU) that differs from a p2p is a media server that receives media from each party in a conference call, decides which streams should be forwarded to other parties, and then forwards them. So if you have three clients on a call each client will have three remote streams and one local stream.

A Multipoint Control Unit (MCU) works by mixing multiple media streams into a single stream, with higher server processing due to transcoding and mixing hence you need a big server for this which results in lower bandwidth usage for clients but higher latency. SFU will save you on server bills while compromising on latency.

Industry Recommendations

Participants, for calls with an average of fewer than 5 participants, use SFU for its efficiency and low latency. If the call involves more than 5 participants, opt for MCU to prioritize bandwidth efficiency.

Wondering? why I’m not talking about audio vs video vs audio + video, focus guys were are building the next generational X audio spaces.

Our Million dollar Audio Rooms app

Problem: sometimes our rooms have less than 5 people, it’s midnight of the night, and night owls want to catch up there is no shame in that. Automatically you would recommend SFU, but there is a problem during peak hours on average rooms have over 50 people in them automatically you rule our SFU for MCU.

My Implementation Strategy: Use both SFU and MCU and upgrade or downgrade based on the number of participants. This dynamic mode selection isn’t straightforward as two things need to be catered for:

1. Peer connections: separate SFU and MCU connections are required.

2. Signaling Server: another important piece of the puzzle, use your signaling server to send control messages to clients indicating when to switch modes. Then trigger WebRTC renegotiation to switch between SFU and MCU.

For our use case below is what I could recommend:

• Primary Model: SFU (Selective Forwarding Unit):

  • Speakers (e.g., 10–15 active participants): Use SFU to forward streams directly to other participants. This ensures low latency and reduces server-side processing.

  • Listeners (e.g., 85+ passive participants): Instead of routing individual streams via SFU, mix speaker streams into a single audio stream and broadcast it (similar to an MCU for listeners only). This approach minimizes bandwidth usage for passive participants.

  • Dynamic Role Switching Allow participants to move between "listener" and "speaker" roles dynamically:

    • Listener → Speaker: Promote them to the SFU layer for real-time audio.

    • Speaker → Listener: Drop their individual SFU stream and include them in the mixed broadcast.

• Backup Model: MCU for fallback (if you anticipate >100 participants regularly).

WebRTC Media Server

Use a media server that supports both SFU and optional mixing (MCU-like) capabilities:

• Mediasoup: A powerful SFU framework with simulcast support. You can simulate MCU by mixing streams for listeners using additional components like FFmpeg.

• Janus: Another flexible SFU with plugins for audio mixing.

• Kurento: Supports both SFU and MCU features natively.

Honorable mentions, XDN architecture seems to be doing what I’m proposing above, I’m yet to test this personally but I will in the coming days: To read more about it click here

That’s a wrap, see you on the next one… Adios ✌️

Step 1: Installing Necessary Tools

Before we dive into coding, we need to install the following tools:

1. Node.js and npm: Node.js is a JavaScript runtime used for building the backend, and npm is the package manager for Node.js.

2. Flutter: Flutter is our framework for building the cross-platform mobile application.

3. PostgreSQL: PostgreSQL will be our database.

4. Docker: Docker will help us containerize our application.

5. Kubernetes (k8s): Kubernetes will manage the deployment of our containers.

6. Terraform: Terraform will handle our infrastructure as code.

Installing Node.js and npm

Download and install Node.js from the official website. This will also install npm.

To verify the installation, run:

node -v
npm -v

Installing Flutter

Follow the instructions on the Flutter installation guide to set up Flutter on your machine. After installation, verify by running:

flutter doctor

Installing PostgreSQL

Download and install PostgreSQL from the official website. Follow the instructions for your operating system.

Installing Docker

Download and install Docker from the official website. After installation, verify by running:

docker --version

Installing Kubernetes (k8s)

For local development, we can use Minikube to run Kubernetes on our local machine. Follow the installation guide for your operating system.

Installing Terraform

Download and install Terraform from the official website. Verify the installation by running:

terraform -v

Step 2: Setting Up NestJS for the Backend

NestJS is a powerful backend framework for building scalable server-side applications. Let's set it up:

1. Create a new NestJS project:

    npm i -g @nestjs/cli
    nest new backend
   

2. Navigate to the project directory:

    cd backend
   

3. Install the necessary dependencies:

    npm install @nestjs/typeorm typeorm pg
   

4. Create a new module for our authentication system:

    nest generate module auth
    nest generate module chat
    nest generate module contact
    nest generate module user
   

Step 3: Initializing a Flutter Project for the Frontend

Flutter will be used for building our cross-platform mobile application. Let's initialize a new Flutter project:

1. Create a new Flutter project:

    flutter create frontend
   

2. Navigate to the project directory:

    cd frontend
   

3. Open the project in your preferred IDE (VS Code, Android Studio, etc.).

Step 4: Configuring PostgreSQL

1. Start the PostgreSQL server and create a new database for our application:

    psql -U postgres -p *****
    CREATE DATABASE chat-production;
   

2. Update the NestJS project to connect to the PostgreSQL database. Edit the app.module.ts file:

    /// data source
    export function getAppDataSource(
      configService: PsqlConfigService,
    ): PostgresConnectionOptions {
      const config = configService.getConfig();
      return {
        type: 'postgres',
        host: config.host,
        port: config.port,
        username: config.user,
        password: config.password,
        database: config.database,
        entities: [User],
        synchronize: true,
        ssl: ['production'].includes(config.appEnv) && {
          rejectUnauthorized: false,
        },
        migrationsRun: true,
        logging: true,
        // logger: 'file',
        migrations: [__dirname + '/migrations/**/*{.ts,.js}'],
      };
    }
   
    // app.module.ts
    import { Module } from '@nestjs/common';
    import { TypeOrmModule } from '@nestjs/typeorm';
    import { AuthModule } from './auth/auth.module';
   
    @Module({
      imports: [
        TypeOrmModule.forRootAsync({
          imports: [ConfigModule],
          useFactory: (configService: PsqlConfigService) => {
            return getAppDataSource(configService);
          },
          inject: [PsqlConfigService],
        }),
        AuthModule,
        ChatModule,
        ContactModule,
        PresenceModule,
        ConfigModule,
      ],
      controllers: [],
      providers: [],
    })
    export class AppModule {}
   

Step 5: Running the Application

1. Start the NestJS backend server:

    npm run start:dev
   

2. Run the Flutter application:

    flutter run
   

At this point, we have set up our development environment, including the necessary tools, the NestJS backend, and the Flutter front end. In the next part, we'll dive into building the authentication system for our mini Whatsapp application.

Stay tuned for Part 2: Building the Authentication System.

Expectations

Let's clearly define and limit the expectations of what we will deliver at the end of this blog series. Setting realistic goals from the beginning is important to avoid misunderstandings.

No, you won't pitch the mini-chatting application to investors for funding. Additionally, you won't be taking it to market once we finish this series. Our primary aim is to provide a learning experience, focusing on the development process and the technical challenges involved.

At the end of the day, users will be able to:

1. Sign in/sign up (based on whether an account record exists)

2. Sync contacts

3. Start a chat

4. Create a group

5. Chat with a group

6. Leave a group

7. See who is online

Note: Users can only use text, no media sharing.

Tools Used

Series Outline

Part 1: Setting Up the Development Environment

• Installing necessary tools and dependencies

• Setting up NestJS for the backend

• Initializing a Flutter project for the frontend

Part 2: Building the Authentication System

• Implementing sign-in and sign-up functionality

• Integrating JWT for secure authentication

Part 3: Contact Synchronization

• Creating a service for syncing contacts

• Handling contact permissions and access

Part 4: Chat Functionality

• Setting up the chat backend

• Developing the chat UI in Flutter

• Implementing real-time messaging using Firebase Cloud Messaging

Part 5: Group Chat Features

• Creating and managing groups

• Implementing group chat functionality

• Handling group events like adding or removing members

Part 6: User Presence

• Tracking online/offline status

• Displaying user presence in the app

Part 7: Deployment and Scaling

• Containerizing the application with Docker

• Deploying with Kubernetes

• Managing infrastructure with Terraform

Part 8: Final Touches and Best Practices

• Ensuring code quality and performance

• Implementing security best practices

• Preparing the application for production use

Stay tuned as we build our mini chatting app step-by-step. By the end, you'll understand the development process and have the skills to tackle similar projects. Let's get started!

No matter the role—whether it's a mobile engineer, frontend engineer, Fullstack, or DevOps—within the first year, I have to be involved in an internal CRM project.

Choosing the right tool

The stage of the organization can provide a clear answer to this question. In the early stages of a startup, the engineering team's primary focus is on building a Minimum Viable Product (MVP) as quickly and easily as possible. This is the ideal scenario for utilizing no-code tools, which allow for rapid development and iteration without the need for extensive coding skills.

As the organization evolves and moves into later stages, the focus shifts towards developing proprietary software. This is a phase where the engineering team can truly showcase its technical prowess and expertise by delivering sophisticated, custom-built software solutions that are tailored to the specific needs of the business. At this point, the emphasis is on creating robust, scalable, and high-performance applications that can support the growing demands of the organization.

Summary

I've noticed a recurring issue in my career: I often work on internal CRM/dashboard projects, regardless of my role. In early startup stages, no-code tools are great for quick MVP development. But as the company grows, the focus shifts to creating robust, scalable proprietary software to meet specific business needs.

What types of challenges do you believe you face? Let me know in the comments section.

What are Props?

Props (short for properties) are a mechanism for passing data from a parent component to a child component in React Native. Props are immutable, meaning that their values cannot be changed once they are set by the parent component. They are a way for components to communicate and share information with one another.

When you define a component in React Native, you can pass data to it by setting attributes, or props, on the component tag. The component can then access and use this data as needed. Props are read-only within the child component, and any changes to the data must come from the parent component.

How to Use Props?

Let's look at a simple example to understand how to use props in React Native with TypeScript. Suppose we have a User component that receives a user's name as a prop and displays a greeting message.

First, install TypeScript and the necessary dependencies:

npm install --save react react-native react-native-cli typescript

Now, create a file named User.tsx and add the following code:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface UserProps {
  name: string;
}

const User: React.FC<UserProps> = ({ name }) => {
  return (
    <View style={styles.container}>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
  },
});

export default User;

In this example, we define the User the component is a functional component that receives a prop called name. Inside the component, we use destructuring to extract the name prop and display a greeting message using it.

To use this component, create another file, e.g., App.tsx, with the following code:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import User from './User';

const App: React.FC = () => {
  return (
    <View style={styles.container}>
      <User name="John Doe" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

In this App component, we use the User component and pass the name prop with the value "John Doe." The User component will receive this prop and display the greeting message accordingly.

What is State?

State, on the other hand, represents the internal data and dynamic values of a component. Unlike props, state is mutable and can be changed within the component itself. When the state of a component is updated, React re-renders the component to reflect the changes in the UI.

State is useful for storing data that may change during the component's lifecycle, such as user input, toggling UI elements, or loading data asynchronously.

How to Use State?

Let's extend our previous example to demonstrate how to use state in React Native with TypeScript. Suppose we want to add a button to the User component that allows users to toggle a message.

Update the User.tsx file as follows:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

interface UserProps {
  name: string;
}

const User: React.FC<UserProps> = ({ name }) => {
  const [showMessage, setShowMessage] = useState(false);

  const toggleMessage = () => {
    setShowMessage(!showMessage);
  };

  return (
    <View style={styles.container}>
      <Text>Hello, {name}!</Text>
      {showMessage && <Text>Have a great day!</Text>}
      <Button title={showMessage ? 'Hide Message' : 'Show Message'} onPress={toggleMessage} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
  },
});

export default User;

In this updated User component, we've introduced a new state variable called showMessage using the useState hook. We've also added a toggleMessage function to toggle the state between true and false when the button is pressed.

Now, the User component will display a "Show Message" button. When the button is pressed, the additional message "Have a great day!" will appear below the greeting message. Pressing the button again will hide the message.

Conclusion

In summary, React Native props are used to pass data from a parent component to a child component and are immutable, while state is used to manage internal data within a component and is mutable. Understanding the distinction between state and props is essential for building efficient and maintainable React Native applications.

By utilizing both props and state effectively, you can create interactive and dynamic user interfaces that respond to user interactions and data changes.

Remember that in TypeScript, it's crucial to define the types for your props and states using interfaces or types, as demonstrated in the examples above. Doing so will provide type safety and help catch potential errors during development.

I hope this blog post has clarified the difference between React Native state and props and provided you with the knowledge to use them confidently in your future projects. Happy coding!

Note: The code examples provided in this blog assume that you have already set up a basic React Native project with TypeScript configurations.

App State API

React Native provides an App State API that allows you to detect changes in the state of your application. The App State API exposes several different states that your app can be in, including:

• active: the app is in the foreground and the user is interacting with it

• background: the app is in the background and not visible to the user

• inactive: the app is transitioning between foreground and background, or vice versa

• suspended: the app is no longer running in the background and has been suspended by the system

Detecting App State

React Native provides the AppState API to detect the current state of the application. The AppState API has two methods:

• addEventListener(): This method registers a listener function that will be called whenever the app state changes.

• removeEventListener(): This method removes the listener function that was previously registered with addEventListener().

Here's an example of how to use the AppState API:

To use the App State API, you need to import the AppState module from the React Native core library. Once you have imported the module, you can add an event listener to detect changes in the app state. Here's an example:

import { AppState } from 'react-native';

class MyApp extends React.Component {
  state = {
    appState: AppState.currentState
  };

  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChange);
  }

  handleAppStateChange = (nextAppState) => {
    this.setState({ appState: nextAppState });
  };

  render() {
    return (
      <View>
        <Text>Current state: {this.state.appState}</Text>
      </View>
    );
  }
}

And if you are using Functional components, we import the AppState module from React Native and use the useState and useEffect hooks to manage the state of the application. We also register a listener function using the addEventListener() method, which updates the state whenever the app state changes. here is a code snippet

....
  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      setAppState(nextAppState);
    };

    AppState.addEventListener('change', handleAppStateChange);

    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []);
....

In the class example, we are using the AppState.currentState property to get the current state of the app when the component mounts. Using the method, we then add an event listener for changes in the app state. When the app state changes, the handleAppStateChange() the method is called, which updates the state of the app.

In conclusion, for React Native applications to provide a seamless user experience, app state detection is essential. Developers can make sure that their apps are reliable and responsive even in difficult circumstances by understanding the various states and putting proper techniques in place to handle them.

Detecting app states is a crucial component of React Native development, whether it's dealing with network connectivity issues, controlling memory use, or responding to system events. Developers may produce high-quality apps that fulfill customers' demands and expectations by being proactive and cautious in this area.

Detecting app states may be an easy and simple job with the correct methods and tools. Developers may make sure their apps are reliable and stable by adhering to best practices and monitoring the app's activity constantly. Enjoy

Let's get started

For this tutorial, I shall assume you have python installed on your computer and pip, python package manager.

Pre-steps:

• Head over to Firebase console and create a project

• Create a service account; visit this link. Remember you can select a project as demonstrated below

• Create or upload keys; once you have created a service account, you shall be redirected to the page with all service accounts available, Tap on the key that has the name firebase-adminsdk

• Download a credential json file; navigate to the keys tab and tap the Add Key button, choose JSON key type, and automatically it should download a credential json file

let's write some code

I am intending to write a utils class that you can always reuse while maintaining a cleaner code type of style. Firebase has developed a PyPI library that makes it easy to use firebase service with python so run this:

pip install firebase-admin

Create a file named fcm_utils.py and paste the following

from typing import Any
from firebase_admin import messaging, credentials
import firebase_admin


class FcmUtils:
    def __init__(self):
        creds = credentials.Certificate(
            'utils/nilipie-9d6b9-0dbc5b6385b9.json')
        default_app = firebase_admin.initialize_app(creds)

    # send_to_token
    # Send a message to a specific token
    # registration_token: The token to send the message to
    # data: The data to send to the token
    # {
    #   'score': '850',
    #   'time': '2:45',
    # },
    # example
    def send_to_token(self, registration_token, title, body, data=None) -> Any:
        message = messaging.Message(
            notification=messaging.Notification(
                title=title,
                body=body,
            ),
            data=data,
            token=registration_token
        )
        response = messaging.send(message)
        print(response)
        return response

    # send_to_token_multicast
    # Send a message to a specific tokens
    # registration_tokens: The tokens to send the message to
    # data: The data to send to the tokens
    def send_to_token_multicast(self, registration_tokens, title, body, data=None) -> Any:
        # registration_tokens has to be a list
        assert isinstance(registration_tokens, list)

        message = messaging.MulticastMessage(
            notification=messaging.Notification(
                title=title,
                body=body,
            ),
            data=data,
            token=registration_tokens
        )
        response = messaging.send_multicast(message)
        print(response)
        # See the BatchResponse reference documentation
        # for the contents of response.
        return response

    # send_to_topic
    # Send a message to a topic
    # topic: The topic to send the message to
    # data: The data to send to the topic
    # {
    #   'score': '850',
    #   'time': '2:45',
    # },
    # example
    def send_to_topic(self, topic, title, body, data=None) -> Any:
        message = messaging.Message(
            notification=messaging.Notification(
                title=title,
                body=body,
            ),
            data=data,
            topic=topic
        )
        response = messaging.send(message)
        print(response)
        # Response is a message ID string.
        return response

Note: Don't forget to replace this line utils/nilipie-9d6b9-0dbc5b6385b9.json with the path to your JSON file.

The FcmUtils class exposes three methods:

1. send_to_token Sends a message to a specific token

2. send_to_token_multicast Practically the same as sending to a token instead you can send to one or many tokens in one request, hence it accepts a list of tokens (strings)

3. send_to_topic The last method sends a message to a specific topic, i.e clients need to be subscribed to this topic

Now the util class can be used as follows:

from fcm_utils import FcmUtils

def main():
    messaging = FcmUtils()
    messaging.send_to_topic("topics-all", "title", "body from topic")

if __name__ == "__main__":
    main()

Results:

Conclusion

That was fun and easy, hope you learned something, and please comment if you have any queries... just as a by the way the mobile screenshot is a Flutter app running on an Android emulator.

Introduction

All those seasoned Flutter/Android/iOS developers know that at the end of the day, Flutter apps are just android and iOS apps on the Android Platform and iOS platform respectively and if you didn't know now you know. So in order to access platform API(s) or Introduce new features through libraries available on Android or iOS, you need to write Platform channels that the Flutter engine can communicate using. So far they are three available channels: (1) Method Channels, (2) Event Channels, and the last one Native Views.

Method Channels, provide a way of communicating with Platform-specific code/APIs asynchronously, meaning if Flutter code calls a Platform code/API if the call returns a value the flutter code will have to async-wait the value. For more information on this please read this official documentation.

Native Views, Native views for lack of better words puncture the Flutter engine and renders a native View in Flutter, For example: using native views you can render an Android EditText or iOS UITextField. Interesting most popular flutter plugin using this method example the Official Flutter Google Maps plugin Link here to render Google maps.

Event Channels, and now to the order of the day, event channels also to keep things simple and stupid they are like streams now in this case, events can be sent from the Platform side to the Flutter side, like how normal stream work.

This article will talk about having more than one event channel in one code base, The motivation for this article is; I am involved in a project that challenged me while working with event channels because most online resources show you how to add one only.

Let's get to it

In this article, we shall create an example that will have two event channels one will emit the current timestamp and the other zero to infinity.

Create a new flutter project: flutter create two_eventchannels

Inside your project root directory open the android folder with Android Studio for better syntax highlighting and code completion. Wait for Gradle to do its thing ..... and yes we shall be writing some Kotlin

Your android studio should look something like this:

Open the MainActivity.kt file should have:

package com.example.two_eventchannels

import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {

}

Let's declare our event channels:

...
class MainActivity: FlutterActivity() {
    private val eventChannel1 = "com.example.two_eventchannels/events1"
    private val eventChannel2 = "com.example.two_eventchannels/events2"
}
...

Then override configureFlutterEngine that comes from FlutterActivity

  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, eventChannel1)
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, eventChannel2)
    }

So that the code looks like 👆

Let create our stream handler, I shall start with the one for streaming current time:

object TimeHandler : EventChannel.StreamHandler {
    // Handle event in main thread.
    private var handler = Handler(Looper.getMainLooper())

    // Declare our eventSink later it will be initialized
    private var eventSink: EventChannel.EventSink? = null

    @SuppressLint("SimpleDateFormat")
    override fun onListen(p0: Any?, sink: EventChannel.EventSink) {
        eventSink = sink
        // every second send the time
        val r: Runnable = object : Runnable {
            override fun run() {
                handler.post {
                    val dateFormat = SimpleDateFormat("HH:mm:ss")
                    val time = dateFormat.format(Date())
                    eventSink?.success(time)
                }
                handler.postDelayed(this, 1000)
            }
        }
        handler.postDelayed(r, 1000)
    }

    override fun onCancel(p0: Any?) {
        eventSink = null
    }
}

Basic we have declared a singleton class called TimeHandler that extends EventChannel.StreamHandler gives us two overrides onCancel and onListen which is of importance to us. Also, we have declared our OS handler and passed Looper.getMainLooper() so that the Handler can run on the UI thread and after a second we get the current time and sink it to our stream.

We shall do similar things with the Counter one:

object CounterHandler : EventChannel.StreamHandler {
    // Handle event in main thread.
    private val handler = Handler(Looper.getMainLooper())

    // Declare our eventSink later it will be initialized
    private var eventSink: EventChannel.EventSink? = null

    @SuppressLint("SimpleDateFormat")
    override fun onListen(p0: Any?, sink: EventChannel.EventSink) {
        eventSink = sink
        var count: Int = 0
        // every 5 second send the time
        val r: Runnable = object : Runnable {
            override fun run() {
                handler.post {
                    count ++;
                    eventSink?.success(count)
                }
                handler.postDelayed(this, 1000)
            }
        }
        handler.postDelayed(r, 1000)
    }

    override fun onCancel(p0: Any?) {
        eventSink = null
    }
}

Now that is done before heading over to the dart world we need to set our stream handlers on the event channels we declared. After that your code should look like this:

class MainActivity : FlutterActivity() {
    private val eventChannel1 = "com.example.two_eventchannels/events1"
    private val eventChannel2 = "com.example.two_eventchannels/events2"

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, eventChannel2).setStreamHandler(
            CounterHandler
        )
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, eventChannel1).setStreamHandler(
            TimeHandler
        )
    }
}

object TimeHandler : EventChannel.StreamHandler {
    // Handle event in main thread.
    private var handler = Handler(Looper.getMainLooper())

    // Declare our eventSink later it will be initialized
    private var eventSink: EventChannel.EventSink? = null

    @SuppressLint("SimpleDateFormat")
    override fun onListen(p0: Any?, sink: EventChannel.EventSink) {
        eventSink = sink
        // every second send the time
        val r: Runnable = object : Runnable {
            override fun run() {
                handler.post {
                    val dateFormat = SimpleDateFormat("HH:mm:ss")
                    val time = dateFormat.format(Date())
                    eventSink?.success(time)
                }
                handler.postDelayed(this, 1000)
            }
        }
        handler.postDelayed(r, 1000)
    }

    override fun onCancel(p0: Any?) {
        eventSink = null
    }
}

object CounterHandler : EventChannel.StreamHandler {
    // Handle event in main thread.
    private val handler = Handler(Looper.getMainLooper())

    // Declare our eventSink later it will be initialized
    private var eventSink: EventChannel.EventSink? = null

    @SuppressLint("SimpleDateFormat")
    override fun onListen(p0: Any?, sink: EventChannel.EventSink) {
        eventSink = sink
        var count: Int = 0
        // every 5 second send the time
        val r: Runnable = object : Runnable {
            override fun run() {
                handler.post {
                    count ++;
                    eventSink?.success(count)
                }
                handler.postDelayed(this, 1000)
            }
        }
        handler.postDelayed(r, 1000)
    }

    override fun onCancel(p0: Any?) {
        eventSink = null
    }
}

Almost done

Now let's write some dart code that called these event channels

import 'package:flutter/services.dart';

Stream<String> streamTimeFromNative() {
  const _timeChannel =
      const EventChannel('com.example.two_eventchannels/events1');
  return _timeChannel.receiveBroadcastStream().map((event) => event.toString());
}

Stream<int> streamCounterFromNative() {
  const _counterChannel =
      const EventChannel('com.example.two_eventchannels/events2');
  return _counterChannel.receiveBroadcastStream().map((event) {
    return int.parse(event.toString());
  });
}

Without tickering with the boilerplate flutter create creates we shall edit the code to:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Timer :',
            ),
            StreamBuilder<String>(
              stream: streamTimeFromNative(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
            SizedBox(height: 30),
            Text(
              'Counter :',
            ),
            StreamBuilder<int>(
              stream: streamCounterFromNative(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
          ],
        ),
      ),
    );
  }

Then run your project: Source code can be found here: link

Demo:

Who I am?

My name is Patrick Waweru as of the date of writing this article currently 22 years of age. Currently located in Nairobi, Kenya. Currently, I am an employee of Ally Innovation that uses technology to inspire lives. My role there is as a Flutter developer with a keen emphasis on the UI and UX of their products.

My journey into tech

To cut the long story short, My serious journey into programming started in my second year of University at Dedan Kimathi University of Technology. Will attending one of the tech events organized back then is when I got started.

What to expect

Lots of articles on simple and easy Flutter tips, Clean architecture according to my opinion, Golang simple examples, and hacks, a little of Java/Kotlin here and there and general tech topics.