serverless-workflow-visualizer VS serverless-websockets-quest

Live demo

I've created a demo and wrote a blog post about visualizing serverless workflow progress in realtime using a pubsub messaging service.

TLDR: Go to the live demo or view the source on GitHub.

Serverless Pizza Workflow Visualizer - Cool showcase with Durable Functions

Live demo

Hi all, I created a web app (ADnD style mini game) recently to demonstrate how to use serverless WebSockets (Ably) and combine it with Azure Functions to send realtime updates to the client (based on VueJS and hosted on Azure Static Web Apps). The Azure Functions use Durable Entities (part of Durable Functions) to store a centralized game state, and as soon as the state is updated the clients are notified of this change. Full blog post is here, the game can be played here, and you can have look at the code on GitHub.

[JsonObject(MemberSerialization.OptIn)] public class GameState : IGameState { // Only showing the class members relevant for this blog section. // For the full implementation see https://github.com/ably-labs/serverless-websockets-quest/blob/main/api/Models/GameState.cs [JsonProperty("questId")] public string QuestId { get; set; } [JsonProperty("phase")] public string Phase { get; set; } public async Task InitGameState(string[] gameStateFields) { QuestId = gameStateFields[0]; Phase = gameStateFields[1]; await _publisher.PublishUpdatePhase(QuestId, Phase); } [JsonProperty("players")] public List PlayerNames { get; set; } public async Task AddPlayerName(string playerName) { if (PlayerNames == null) { PlayerNames = new List { playerName }; } else { PlayerNames.Add(playerName); } if (IsPartyComplete) { await UpdatePhase(GamePhases.Play); await Task.Delay(2000); await AttackByMonster(); } } public async Task UpdatePhase(string phase) { Phase = phase; await _publisher.PublishUpdatePhase(QuestId, Phase); } private async Task AttackByMonster() { var playerAttacking = CharacterClassDefinitions.Monster.Name; var playerUnderAttack = GetRandomPlayerName(); var damage = CharacterClassDefinitions.GetDamageFor(CharacterClassDefinitions.Monster.CharacterClass); await _publisher.PublishPlayerAttacking(QuestId, playerAttacking, playerUnderAttack, damage); await Task.Delay(1000); var playerEntityId = new EntityId(nameof(Player), Player.GetEntityId(QuestId, playerUnderAttack)); Entity.Current.SignalEntity(playerEntityId, proxy => proxy.ApplyDamage(damage)); await Task.Delay(1000); var nextPlayerName = GetNextPlayerName(CharacterClassDefinitions.Monster.Name); await _publisher.PublishPlayerTurnAsync(QuestId, $"Next turn: {nextPlayerName}", nextPlayerName); } }