Name	Name	Last commit message	Last commit date
Latest commit History 3 Commits
ChunkedChat	ChunkedChat
.gitignore	.gitignore
ChunkedChat.sln	ChunkedChat.sln
LICENSE	LICENSE
README.md	README.md

ChunkedChat

This project is a proof-of-concept (PoC) demonstrating a web-based chat application that operates without any client-side JavaScript. It relies on chunked HTML responses to deliver new messages to users in real-time.

chat_demo.mp4

How it Works

The application is built using ASP.NET Core Minimal APIs and C#.

Main Chat Page (/rooms/{room}):
- When a user navigates to a chat room (e.g., /rooms/general), they are served a simple HTML page.
- This page embeds two </code> elements: <ul dir="auto"> <li>One <code><iframe></code> displays the live message feed (<code>/rooms/{room}/live-messages</code>).</li> <li>The other <code><iframe></code> displays the form for submitting new messages (<code>/rooms/{room}/new-message-form</code>).</li> </ul> </li> </ul> </li> <li> <p dir="auto"><strong>New Message Form (<code>/rooms/{room}/new-message-form</code>):</strong></p> <ul dir="auto"> <li>This serves a basic HTML <code><form></code>.</li> <li>When a user types a message and submits the form, the data is <code>POST</code>ed to <code>/rooms/{room}/messages</code>.</li> </ul> </li> <li> <p dir="auto"><strong>Submitting a Message (<code>POST /rooms/{room}/messages</code>):</strong></p> <ul dir="auto"> <li>The server receives the new message.</li> <li>The message is stored in a server-side log for the specific chat room. Each message (<code>ChatMessage</code>) contains an ID (time-ordered GUID v7), a timestamp, an optional username, and the message text.</li> <li>The <code>ChatRoomLog</code> class manages these messages in a thread-safe manner, storing them chronologically.</li> <li>After processing, the user is redirected back to the new message form page.</li> </ul> </li> <li> <p dir="auto"><strong>Live Message Feed (<code>/rooms/{room}/live-messages</code>):</strong></p> <ul dir="auto"> <li>This is the core of the "JavaScript-less real-time" feature.</li> <li>When a client (the <code><iframe></code> from the main page) requests this endpoint, the server keeps the connection open.</li> <li>Initially, it sends the basic HTML document structure.</li> <li>Periodically (e.g., every second), the server checks the <code>ChatRoomLog</code> for new messages that have arrived since the client's last update.</li> <li>If new messages are found, they are formatted as HTML nodes and written to the response stream, followed by a flush operation.</li> <li>This "chunked" delivery means the browser receives and renders these new HTML snippets as they arrive, updating the message display without a full page reload or any JavaScript intervention.</li> </ul> </li> </ol> <div dir="auto"><h2 tabindex="-1" dir="auto">Key Components</h2></div> <ul dir="auto"> <li><code>Program.cs</code>: Sets up the ASP.NET Core application, defines the API endpoints, and manages chat room data.</li> <li><code>ChatMessage.cs</code>: Defines the structure for a single chat message (ID, Timestamp, UserName, Text).</li> <li><code>ChatRoomLog.cs</code>: Manages the collection of messages for a specific chat room in a thread-safe and chronologically ordered manner.</li> </ul> <div dir="auto"><h2 tabindex="-1" dir="auto">To Run</h2></div> <ol dir="auto"> <li>Ensure you have the .NET SDK installed.</li> <li>Navigate to the <code>ChunkedChat</code> project directory.</li> <li>Run the application using <code>dotnet run</code>.</li> <li>Open your browser and navigate to an address like <code>http://localhost:<port>/rooms/your-room-name</code> (the actual port will be shown in the console when the application starts).</li> </ol> </article></div></div></div></div></div></div></div><div><div></div><div><rails-partial> <div> <div> <div> <div> <h2>About</h2> <p> Real-time chat web app working without JS (using Transfer-Encoding: chunked) / online chat without js </p> <h3>Topics</h3> <div> <div> <a href="/github.com/topics/html"> html </a> <a href="/github.com/topics/privacy"> privacy </a> <a href="/github.com/topics/proof-of-concept"> proof-of-concept </a> <a href="/github.com/topics/dotnet"> dotnet </a> <a href="/github.com/topics/mvp"> mvp </a> <a href="/github.com/topics/tor"> tor </a> <a href="/github.com/topics/idea"> idea </a> <a href="/github.com/topics/poc"> poc </a> <a href="/github.com/topics/asp-net-core"> asp-net-core </a> <a href="/github.com/topics/asp-net"> asp-net </a> <a href="/github.com/topics/no-js"> no-js </a> <a href="/github.com/topics/nojs"> nojs </a> <a href="/github.com/topics/no-javascript"> no-javascript </a> <a href="/github.com/topics/chunked"> chunked </a> <a href="/github.com/topics/html-only"> html-only </a> <a href="/github.com/topics/transfer-encoding"> transfer-encoding </a> <a href="/github.com/topics/dotnet-10"> dotnet-10 </a> <a href="/github.com/topics/chat-without-js"> chat-without-js </a> <a href="/github.com/topics/html-only-chat"> html-only-chat </a> </div> </div> <h3>Resources</h3> <div> Readme </div> <h3>License</h3> <div> Unlicense license </div> <include-fragment src="/magicxor/ChunkedChat/hovercards/citation/sidebar_partial?tree_name=master"> <div data-show-on-forbidden-error hidden> <div> <div> <div> <h3> Uh oh! </h3> <p> <p>There was an error while loading. <a href="" aria-label="Please reload this page">Please reload this page</a>.</p> </p> </div> </div> </div> </div> </include-fragment> <div> <a href="/github.com/magicxor/ChunkedChat/activity"> <span>Activity</span></a> </div> <h3>Stars</h3> <div> <a href="/github.com/magicxor/ChunkedChat/stargazers"> <strong>0</strong> stars</a> </div> <h3>Watchers</h3> <div> <a href="/github.com/magicxor/ChunkedChat/watchers"> <strong>1</strong> watching</a> </div> <h3>Forks</h3> <div> <a href="/github.com/magicxor/ChunkedChat/forks"> <strong>1</strong> fork</a> </div> <div> <a href="/github.com/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Fmagicxor%2FChunkedChat&report=magicxor+%28user%29"> Report repository </a> </div> </div> </div> </div> <div> <div> <include-fragment aria-busy="true" aria-label="Loading contributors" src="/magicxor/ChunkedChat/contributors_list?current_repository=ChunkedChat&deferred=true"> <h2> <a href="/github.com/magicxor/ChunkedChat/graphs/contributors">Contributors</a> </h2> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> <div data-show-on-forbidden-error hidden> <div> <div> <div> <h3> Uh oh! </h3> <p> <p>There was an error while loading. <a href="" aria-label="Please reload this page">Please reload this page</a>.</p> </p> </div> </div> </div> </div> </include-fragment> </div> </div> <div> <div> <h2>Languages</h2> <div> <span> <span itemprop="keywords"></span> </span></div> <ul> <li> <a href="/github.com/magicxor/ChunkedChat/search?l=c%23"> <span>C#</span> <span>100.0%</span> </a> </li> </ul> </div> </div> </div> </rails-partial></div><div></div></div></div></div></div></div></div></div></div></div></div><div id="find-result-marks-container"></div><button hidden=""></button><button hidden=""></button></div>   </div> </react-app> </div> </turbo-frame> </main> </div> </div> <footer role="contentinfo" > <h2>Footer</h2> <div> <div> <a href="/github.com"> </a> <span> (c) 2026 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 id="sr-footer-heading">Footer navigation</h3> <ul aria-labelledby="sr-footer-heading"> <li> <a href="/docs.github.com/site-policy/github-terms/github-terms-of-service">Terms</a> </li> <li> <a href="/docs.github.com/site-policy/privacy-policies/github-privacy-statement">Privacy</a> </li> <li> <a href="/github.com/security">Security</a> </li> <li> <a href="/www.githubstatus.com/">Status</a> </li> <li> <a href="/github.community/">Community</a> </li> <li> <a href="/docs.github.com/">Docs</a> </li> <li> <a href="/support.github.com?tags=dotcom-footer">Contact</a> </li> <li > <cookie-consent-link> <button type="button" > Manage cookies </button> </cookie-consent-link> </li> <li> <cookie-consent-link> <button type="button" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" ></ghcc-consent> <div id="ajax-error-message" hidden> <button type="button" aria-label="Dismiss error"> </button> You can't perform that action at this time. </div> <template id="site-details-dialog"> <details open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog> <button type="button" aria-label="Close dialog" data-close-dialog> </button> <div></div> </details-dialog> </details> </template> <div> <div> </div> </div> <template id="snippet-clipboard-copy-button"> <div> <clipboard-copy aria-label="Copy"> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div> <clipboard-copy aria-label="Copy"> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" aria-live="assertive" aria-atomic="true"></div> </body> </html>

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

magicxor/ChunkedChat

Folders and files

Latest commit

History

Repository files navigation

ChunkedChat

How it Works