<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>WebSocket | Tech Learning Hub</title><link>https://www.tech-learning-hub.com/tag/websocket/</link><atom:link href="https://www.tech-learning-hub.com/tag/websocket/index.xml" rel="self" type="application/rss+xml"/><description>WebSocket</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>en-us</language><lastBuildDate>Fri, 18 Sep 2026 00:00:00 +0000</lastBuildDate><image><url>https://www.tech-learning-hub.com/media/logo_hu17383905045384214746.png</url><title>WebSocket</title><link>https://www.tech-learning-hub.com/tag/websocket/</link></image><item><title>Serverless Pizza Tracking</title><link>https://www.tech-learning-hub.com/project/serverless-pizza/</link><pubDate>Fri, 18 Sep 2026 00:00:00 +0000</pubDate><guid>https://www.tech-learning-hub.com/project/serverless-pizza/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>This project turns a pizza🍕order into a small, observable event-driven workflow. A browser submits an order, AWS services pass it through kitchen stages, and status updates return to the browser in real time just like Domino&amp;rsquo;s does it:
&lt;figure >
&lt;div class="d-flex justify-content-center">
&lt;div class="w-100" >&lt;img alt="Live pizza order tracking"
src="https://www.tech-learning-hub.com/project/serverless-pizza/pizza-tracking.gif"
loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;p>It is a learning project, but the architecture uses patterns found in production systems - managed services, asynchronous events, small functions, and infrastructure described as code.&lt;/p>
&lt;h2 id="architecture">Architecture&lt;/h2>
&lt;p>We would be using an event-driven architecture which uses events to start and communicate between decoupled services and is common in modern applications built with microservices.&lt;/p>
&lt;p>We would configure an HTTP API on API Gateway to redirect requests to EventBridge. You create event bus rules that match a request and forward events to Lambda functions. Events processed by the Lambda functions are sent back to the bus as a new event. Each time an event is published to the event bus, a separate Lambda function receives the event and post it back to client application using a web socket connection hosted on an API Gateway.&lt;/p>
&lt;p>
&lt;figure >
&lt;div class="d-flex justify-content-center">
&lt;div class="w-100" >&lt;img alt="" srcset="
/media/images/uploads/EventBridge-Lambda-Architecture_hu10615201187260364212.webp 400w,
/media/images/uploads/EventBridge-Lambda-Architecture_hu17123212110903520918.webp 760w,
/media/images/uploads/EventBridge-Lambda-Architecture_hu5714557640141910881.webp 1200w"
src="https://www.tech-learning-hub.com/media/images/uploads/EventBridge-Lambda-Architecture_hu10615201187260364212.webp"
width="760"
height="601"
loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;h2 id="orders-journey">Order&amp;rsquo;s Journey&lt;/h2>
&lt;p>An order starts as JSON:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-json" data-lang="json">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;item&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="p">{&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;order_id&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;7AB&amp;#34;&lt;/span>&lt;span class="p">,&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="nt">&amp;#34;eventtype&amp;#34;&lt;/span>&lt;span class="p">:&lt;/span> &lt;span class="s2">&amp;#34;make_pizza&amp;#34;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="p">}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>The browser opens a WebSocket connection with that order ID, then sends the JSON to the HTTP API. The backend advances the order through four states:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-text" data-lang="text">&lt;span class="line">&lt;span class="cl">make_pizza -&amp;gt; cook_pizza -&amp;gt; deliver_pizza -&amp;gt; delivered
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>Each transition is an event. The browser receives the matching status updates while the work continues.&lt;/p>
&lt;h2 id="aws-services">AWS Services&lt;/h2>
&lt;h6 id="api-gateway-the-entry-points">API Gateway: the entry points&lt;/h6>
&lt;p>The HTTP API accepts &lt;code>POST/&lt;/code> requests and forwards their body to EventBridge. The separate WebSocket API gives the browser a persistent connection for status notifications. The WebSocket &lt;code>$connect&lt;/code> route records the order ID before the browser submits its order.&lt;/p>
&lt;p>Because the browser and API have different origins, the HTTP API also needs CORS configuration. CORS tells browsers which cross-origin requests are allowed; it is not authentication or access control for the API itself.&lt;/p>
&lt;h6 id="eventbridge-routing-by-event">EventBridge: routing by event&lt;/h6>
&lt;p>EventBridge receives the initial order on a custom event bus. Rules inspect fields such as &lt;code>detail.item.eventtype&lt;/code> and route matching events to the right Lambda function. The same status event can match more than one rule, so a stage function can advance the order while another function sends the current status to the browser.&lt;/p>
&lt;p>This fan-out keeps event producers independent of every consumer. A function publishes an event; rules decide which functions should react.&lt;/p>
&lt;h6 id="lambda-small-steps">Lambda: small steps&lt;/h6>
&lt;p>Three Node.js Lambda functions each handle one kitchen transition. They wait briefly so the progression is visible, update the event type, and publish the next event. Their shared &lt;code>EVENT_BUS&lt;/code> environment variable identifies where to publish.&lt;/p>
&lt;p>Two other functions handle the WebSocket lifecycle: &lt;code>websocket_connect&lt;/code> stores the connection ID, and &lt;code>receive_events&lt;/code> looks it up and posts status messages through the API Gateway Management API.&lt;/p>
&lt;h6 id="dynamodb-connection-lookup">DynamoDB: connection lookup&lt;/h6>
&lt;p>The DynamoDB table uses &lt;code>order_id&lt;/code> as its key and stores the associated WebSocket &lt;code>connection_id&lt;/code>. When a status event arrives, &lt;code>receive_events&lt;/code> looks up the connection for that order and sends the update to it. The table is a small piece of coordination state; the pizza&amp;rsquo;s progress itself is carried in events.&lt;/p>
&lt;h2 id="infrastructure-as-code">Infrastructure as Code&lt;/h2>
&lt;p>CloudFormation divides the resources into two stacks:&lt;/p>
&lt;ul>
&lt;li>&lt;code>pizza-tracking-template.yml&lt;/code> creates the application: APIs, event bus and rules, Lambda functions, IAM roles, and the connection table.&lt;/li>
&lt;li>&lt;code>webserver-template.yml&lt;/code> creates a public EC2 instance and installs nginx to serve the static website.&lt;/li>
&lt;/ul>
&lt;p>The browser assets are stored in S3 as a website archive. At startup, EC2 downloads and extracts that archive, then writes &lt;code>runtime-config.js&lt;/code> with the API URLs supplied as stack parameters. This keeps environment-specific endpoints out of the static JavaScript bundle.&lt;/p>
&lt;p>The split is useful during development: you can test the APIs and event workflow before creating the webserver. Connect a WebSocket client with an &lt;code>order_id&lt;/code>, submit the matching order to the HTTP API, and watch for all four statuses.&lt;/p>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>The project makes several cloud concepts concrete:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Asynchronous processing:&lt;/strong> the HTTP request starts work without waiting for every kitchen step to finish.&lt;/li>
&lt;li>&lt;strong>Event routing:&lt;/strong> EventBridge rules route based on event content rather than hard-coded calls between services.&lt;/li>
&lt;li>&lt;strong>Loose coupling:&lt;/strong> producers and consumers communicate through events and can evolve independently.&lt;/li>
&lt;li>&lt;strong>Real-time updates:&lt;/strong> WebSockets let the backend notify a connected browser as state changes.&lt;/li>
&lt;li>&lt;strong>Infrastructure as code:&lt;/strong> CloudFormation makes the service layout reviewable and repeatable.&lt;/li>
&lt;/ul>
&lt;h2 id="tldr">TLDR`&lt;/h2>
&lt;p>This is a lab, not a hardened ordering platform. The APIs have no customer authentication, the webserver is reachable over HTTP, CORS allows any origin for convenience, and the connection table assumes connections remain valid. A production version would add identity and authorization, HTTPS, tighter origin rules, stale-connection handling, input validation, monitoring, and deliberate cost controls.&lt;/p></description></item></channel></rss>