# HG changeset patch # User June Park # Date 1767976235 28800 # Node ID 902e29c38d6661a7fb226888c6b5f9b9f165a0be # Parent 7a63e41a21fb74b2dfabae5af7f865d36754e08f [Blog] Final copy for websocket one. diff -r 7a63e41a21fb -r 902e29c38d66 mrjunejune/src/base.css --- a/mrjunejune/src/base.css Fri Jan 09 08:23:54 2026 -0800 +++ b/mrjunejune/src/base.css Fri Jan 09 08:30:35 2026 -0800 @@ -27,6 +27,7 @@ --darkgray: #333333; --gray: #5d5d5d; --lightgray: #999999; + --gray-light: var(--lightgray); --green: #c2e15f; --orange: #fda333; --purple: #d3a4f9; @@ -50,6 +51,7 @@ --black: hsl(0, 0%, 90%); --darkgray: #cccccc; /* Inverted */ --lightgray: #666666; /* Inverted */ + --gray-light: var(--lightgray); --green: #3d1ea0; /* Complementary */ --orange: #025ccc; /* Complementary */ --purple: #2b5b06; /* Complementary */ @@ -77,6 +79,7 @@ --black: hsl(0, 0%, 90%); --darkgray: #cccccc; --lightgray: #666666; + --gray-light: var(--lightgray); --green: #3d1ea0; --orange: #025ccc; --purple: #2b5b06; @@ -158,7 +161,6 @@ width: var(--main-width); max-width: calc(100% - 2em); margin: auto; - padding: 1em 1em; } h1, diff -r 7a63e41a21fb -r 902e29c38d66 mrjunejune/src/blog/websocket-demystified/index.md --- a/mrjunejune/src/blog/websocket-demystified/index.md Fri Jan 09 08:23:54 2026 -0800 +++ b/mrjunejune/src/blog/websocket-demystified/index.md Fri Jan 09 08:30:35 2026 -0800 @@ -1,6 +1,6 @@ # WebSocket Demystified -WebSockets have been around for more than 10 years now—the [RFC 6455](https://www.rfc-editor.org/rfc/rfc6455) was dropped way back in 2011. This was inevitable. As apps got more complex, people wanted real bidirectional communication without resorting to hacky solutions like raw TCP connections with custom keys or the constant overhead of short/long polling. +WebSockets have been around for more than 10 years now. The [RFC 6455](https://www.rfc-editor.org/rfc/rfc6455) was dropped way back in 2011. This was inevitable. As apps got more complex, people wanted real bidirectional communication without resorting to hacky solutions like raw TCP connections with custom keys or the constant overhead of short/long polling. Today, it’s the standard for everything from chat apps to LLM interfaces, where the model streams bytes back to you one token at a time as it predicts the next word. @@ -42,7 +42,7 @@ I’m assuming you know how HTTP works. If not, you can open a developer tool by right clicking on your browser and seeing into network tab and refershign the page. The only interesting values here is the `Sec-WebSocket-Key`. This key is usually a 16-byte random value encoded in **Base64**. -**Note:** It’s not for security—it’s to prevent intermediate caches from accidentally serving a cached WebSocket response to a different client. +**Note:** It’s not for security. It’s to prevent intermediate caches from accidentally serving a cached WebSocket response to a different client. But before we jump into that, we need to construct that Base64 key. @@ -294,4 +294,4 @@ That’s it. That is WebSockets in a nutshell. Once you handle the bit-shifting for the length and the XOR masking, you’re just reading and writing to a socket like any other protocol. -You can test my implementation at `mrjunejune.com/talk`. Open two tabs and talk to yourself—it’s a great way to verify your frames are flying correctly. +You can test my implementation at [this page](https://mrjunejune.com/talk). Open two tabs and talk to yourself! diff -r 7a63e41a21fb -r 902e29c38d66 mrjunejune/src/public/web-socket-header.png Binary file mrjunejune/src/public/web-socket-header.png has changed diff -r 7a63e41a21fb -r 902e29c38d66 mrjunejune/src/public/web-socket-header.webp Binary file mrjunejune/src/public/web-socket-header.webp has changed diff -r 7a63e41a21fb -r 902e29c38d66 mrjunejune/src/tools/markdown_to_html/index.css --- a/mrjunejune/src/tools/markdown_to_html/index.css Fri Jan 09 08:23:54 2026 -0800 +++ b/mrjunejune/src/tools/markdown_to_html/index.css Fri Jan 09 08:30:35 2026 -0800 @@ -141,7 +141,7 @@ hr { border: none; - border-top: 2px solid rgb(var(--gray-light)); + border-top: 2px solid var(--black); margin: 20px 0; }