Using Server Sent Event in .NET Core Web API to monitor data update in tables and Refresh angular component

Question

I am trying to accomplish an auto refresh on an angular component which shows scores of different teams. So when ever the score is updated I need to refresh the Score in frontend

Based on my previous question here I have found server sent events are helpful for the purpose. But honestly I have got stuck with how to proceed with

Here is my update code in my controller, when which I want to refresh the score as well. Also I have a get function also to just read all the scores

    // GET: api/TblVottings
    [HttpGet]
    public async Task<ActionResult<IEnumerable<TblVotting>>> GetTblVottings()
    {
        return await _context.TblVottings.ToListAsync();
    }


    // PUT: api/TblVottings/5
    // To protect from overposting attacks, see https://go.microsoft.com/fwlink/?linkid=2123754
    [HttpPut("{id}")]
    public async Task<IActionResult> PutTblVotting(int id, TblVotting tblVotting)
    {
        if (id != tblVotting.SessionId)
        {
            return BadRequest();
        }

        _context.Entry(tblVotting).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!TblVottingExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

I have found an answer which give me some hint, but I didnt understand it based on my scenario..

Please suggest how to achieve that..

[signalr](https://learn.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-5.0) — R. Richards, Apr 03 '21 at 16:53

score 1 · Answer 1 · answered Apr 05 '21 at 06:34

As R. Richards and Feras Salim says, we suggest you could use SignalR to handle such requirement.

SignalR simplifies adding real-time web functionality to apps. Real-time web functionality enables server-side code to push content to clients instantly.

By using SignalR, you could just write a few codes to let the server send data and call client side function to update the page in Real-time.

You could just write some logic on the server-side to monitor the database changed, like sql dependency and call the client-sdie event.

More details about how to use SignalR with angualr, you could refer to this article.

Using Server Sent Event in .NET Core Web API to monitor data update in tables and Refresh angular component

1 Answers1