Is it possible to sync state across clients or broadcast from the server?

[niklas-heer]

First, I'm new to ReactPy, so I'm sorry if my question has already been answered or is obvious, but I couldn't find anything on it on the website or here in the discussion.

I want to build a simple voting app where multiple people can connect at the same time and send their vote.
I also would like to display in real time the results.

For that, I would need to sync state across multiple clients or broadcast from the server.
I tried code from the docs and seen that there is a WebSocket connection, so I guess this should be possible? (currently I'm using the FastAPI setup)

[rmorshea]

Hey @niklas-heer, all state is maintained server-side so this is definitely possible.

So, while this is likely not realistic in a production environment, if you only run the server on a single process you could share state between clients using a global variable:

poor_mans_database = {
    "votes": 0
}

@component
def example():
    def increment_votes():
        poor_mans_database["votes"] += 1

    return html.div(
        html.button(
            {"on_click": lambda e: increment_votes()}, "click to vote"
        ),
        html.p("current vote total: ", poor_mans_database["votes"])
    )

i'm on mobile now, can get back with more detail if needed

[Archmonger]

I'm currently traveling. Writing up an example for this would be fairly painful on mobile.

@rmorshea let me know if you have time to write up something. Otherwise I'll have to get back to this on Tuesday.

I don't think loading/error state handling are within the scope of this question. Should be able to be handled through a simple asyncio.run in a sync effect, with teardown handling to close the task.

Here's an incomplete write-up I did on mobile.

async def get_votes_polling(set_votes):
    """Periodically performs some database query then returns the value"""
    ...

@component
def example():
    votes, set_votes = hooks.use_state()

    @hooks.use_effect([])
    def run_task():
        asyncio.create_task(...)
        return ...

    return html.div(votes)

[rmorshea]

I should be able to get back before then. For context @niklas-heer, the use_query hook above is specific to reactpy-django.

Also, a small correction: since there's already an event loop running. You can just use asyncio.create_task instead of asyncio.run.

[Archmonger]

Yup those were both typos. Programming on mobile definitely ain't da wey.

I edited my comment to fix.

[rmorshea]

This is a more complete answer assuming you're using Redis and the redis-py client.

The gist is:

• Declare the vote count as state using use_state
• Define an event handler that will increment the vote count
• Declare an effect wherein you will grab the current vote count on the first render
• Declare an effect wherein you will subscribe to vote count changes

import asyncio
import redis.asyncio as redis
from reactpy import component, use_state, use_effect, html

connection = redis.from_url("redis://localhost")

@component
def votes():
    # declare as None initially since we need to read count from the DB
    count, set_count = use_state(None)

    async def handle_vote():
        # increment the vote count
        await connection.incr("vote-count")
        # publish a message to the vote-changed channel
        await connection.publish("vote-changed", "changed")

    @use_effect
    def get_initial_count():
        # create a background task
        task = asyncio.create_task(set_current_vote_count(set_count))
        # cancel this task when the component is unmounted
        return task.cancel

    @use_effect
    def subscribe_to_vote_count_changes():
        # create a background task
        task = asyncio.create_task(set_vote_count_on_change(set_count))
        # cancel this task when the component is unmounted
        return task.cancel

    if count is None:
        vote_count_view = html.p("Loading...")
    else:
        vote_count_view = html.p(f"Current vote count: {count}")

    return html.div(
        vote_count_view,
        html.button({"on_click": handle_vote}, "Vote"),
    )

async def set_current_vote_count(set_count):
    set_count(await connection.get("vote-count"))

async def set_vote_count_on_change(set_count):
    # create a pubsub instance
    pubsub = connection.pubsub()
    # subscribe to vote-count channel
    await pubsub.subscribe("vote-changed")
    # wait for new message
    while await pubsub.get_message():
        # update the count state
        set_count(await connection.get("vote-changed"))

The code above is a bit complicated due to the async nature of the task. We're working a way to make declaring async effects easier, but it's proved to be challenging.

[Archmonger]

@niklas-heer I found Ryan's example above too complicated to digest, so I wrote a minimal version for you.

import asyncio
import random

from idom import component, hooks, html, run


async def get_votes_task(set_votes):
    """Periodically performs a database query then runs `set_votes(value)`
    to let the component know about the results."""
    while True:
        value = random.randint(0, 10000)  # Replace this with database logic
        set_votes(value)
        await asyncio.sleep(5)


@component
def example():
    votes, set_votes = hooks.use_state(None)  # Votes will be stored in this

    @hooks.use_effect(dependencies=[])  # No dependencies, so this will run only once (to start the background task)
    def run_task():
        task = asyncio.create_task(get_votes_task(set_votes))
        return task.cancel  # Task will be cancelled when the component is removed

    return html.div(votes)


run(example)