are a powerful tool for enabling two-way communication between client and server, as well as for allowing your UI to stay responsive throughout long running requests.
Recently, I’ve been working on one of my most challenging projects: a Vehicle Routing Problem
app with a Vue UI, Node.js backend, and Python-based Google OR-tools
solver engine. Solving a VRP problem can take minutes, and our prod load balancer times out requests after 30 seconds. WebSockets to the rescue.
Not only do WebSockets allow bypassing production load balancers, they allow you to report on progress. The actual logic that sets up the VRP problem goes through several stages, and, when you’re waiting for minutes, it’s good to know the solver is making progress and isn’t hanging.
Async generator functions are ideal for this case. You can use async/await
to build complex logic, but you can also use the yield keyword to report on progress. Take a look at this example GitHub gist
. The slow generator function uses yield to report when it reaches a new stage of the function, and the progress report gets sent out over a WebSocket. Should make progress bars on the client side much easier.
PS: Do you find async/await confusing? Mastering Async/Await
is designed to take you from novice to JS concurrency expert in 1-2 hours. Better yet, it’s 35% off for 4th of July Weekend. Get the ebook now!