Mercurial

comparison mrjunejune/src/blog/websocket-demystified/index.md @ 133:902e29c38d66

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Blog] Final copy for websocket one.
author June Park <parkjune1995@gmail.com>
date Fri, 09 Jan 2026 08:30:35 -0800
parents 7a63e41a21fb
children 295ac2e5ec00
comparison
equal deleted inserted replaced
132:7a63e41a21fb 133:902e29c38d66
1 # WebSocket Demystified 1 # WebSocket Demystified
2 2
3 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. 3 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.
4 4
5 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. 5 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.
6 6
7 Most developers just grab a library like [ws](https://github.com/websockets/ws) for Node.js or [websockets](https://websockets.readthedocs.io/) for Python and call it a day. But many don’t realize the underlying mechanism is actually pretty simple to implement yourself in a day or so. Also they misunderstand what websocket actually do. Let's look at how to build it from scratch and debunk myths. 7 Most developers just grab a library like [ws](https://github.com/websockets/ws) for Node.js or [websockets](https://websockets.readthedocs.io/) for Python and call it a day. But many don’t realize the underlying mechanism is actually pretty simple to implement yourself in a day or so. Also they misunderstand what websocket actually do. Let's look at how to build it from scratch and debunk myths.
8 8
40 <div class="center"> <img src="/public/web-socket-header.webp" /> </div> 40 <div class="center"> <img src="/public/web-socket-header.webp" /> </div>
41 41
42 42
43 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**. 43 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**.
44 44
45 **Note:** It’s not for security—it’s to prevent intermediate caches from accidentally serving a cached WebSocket response to a different client. 45 **Note:** It’s not for security. It’s to prevent intermediate caches from accidentally serving a cached WebSocket response to a different client.
46 46
47 But before we jump into that, we need to construct that Base64 key. 47 But before we jump into that, we need to construct that Base64 key.
48 48
49 ### What is Base64? 49 ### What is Base64?
50 50
292 292
293 ## Conclusion 293 ## Conclusion
294 294
295 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. 295 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.
296 296
297 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. 297 You can test my implementation at [this page](https://mrjunejune.com/talk). Open two tabs and talk to yourself!