Mercurial
changeset 133:902e29c38d66
[Blog] Final copy for websocket one.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Fri, 09 Jan 2026 08:30:35 -0800 |
| parents | 7a63e41a21fb |
| children | ffb764d2fcc5 |
| files | mrjunejune/src/base.css mrjunejune/src/blog/websocket-demystified/index.md mrjunejune/src/public/web-socket-header.png mrjunejune/src/public/web-socket-header.webp mrjunejune/src/tools/markdown_to_html/index.css |
| diffstat | 5 files changed, 7 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- 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,
--- 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!
--- 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; }