Authenticating JavaScript WebSockets, by (not on Mastodon or Bluesky):
https://stevenwaterman.uk/authenticating-javascript-websockets/
…And there are more interesting tid-bits in there too:
• See how I’m pushing Kitten’s Streaming HTML to its logical conclusion and streaming JavaScript from the server to the client to keep all logic on the server while implementing a client-side feature (copy to clipboard): https://codeberg.org/small-web/look-over-there/src/branch/main/CopyButton.component.js
• Following on from that, note how the Toast component that’s triggered when something is copied looks (under the hood, Streaming HTML is htmx + WebSockets + some Kitten-specific magic and glues it all together and adds syntactic sugar): https://codeberg.org/small-web/look-over-there/src/branch/main/Toast.fragment.js
• Finally, check out how layout components and slots work: https://codeberg.org/small-web/look-over-there/src/branch/main/Site.layout.js
I think that’s all the intersting stuff I can spot at the moment.
Have fun!
Pretty certain #SSE (Server Sent Events) are the future. 
No upgrade to get #Websockets. Simply, plain old HTTP and simple message body. Though do make sure to use HTTP/2. 
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
Today I learned…
1. there's a card game where you complete a task from Unix pipe commands: https://punkx.org/unix-pipe-game/ (via https://mamot.fr/@bearstech/114275843048191227)
2. there's a JavaScript x86 machine emulator so you can play that game without needing a real computer around: https://bellard.org/jslinux/tech.html
3. that JS VM gets network connectivity because someone decided to make a websocket-based VPN that passes Ethernet frames: http://www.benjamincburns.com/2013/11/10/jor1k-ethmac-support.html
New Kitten update
• Added `remove()` method to kitten.Component class. Use this when working with live pages and components and you want to remove a component from the page (or its parent). It will handle removing event listeners for you so you don’t end up with any memory leaks.
• Improved `update()` method so it similarly removes listeners on child components before updating the component itself in case you have class-based child components that will be reinstantiated on render.
• Updated the `send()` methods on `page.everyone` and `page.everyoneElse` so you can pass a swap target to insert the element being streamed to the page before, after, asFirstChildOf, or asLastChildOf another. (This was already there for the page.send() but now the two broadcast objects have the same consistent interface.
The @small-web/kitten npm package (Kitten’s types package) has also been updated to version 5.1.0 to reflect the latest changes.
(Remember that the new class and event-based page and component model is still experimental and largely undocumented and fully backwards compatible with the classic functional way of authoring your page routes and components.)
Enjoy!
> What started as an exploration into #WebSockets led us to a surprisingly effective "old-school" solution: #HTTP long polling with #Postgres
https://www.inferable.ai/blog/posts/postgres-nodejs-longpolling.mdx
A quick demonstration of using the State: Overview page in Kitten’s¹ settings while developing to keep an eye on your event and event listener counts to avoid memory leaks.
Notice how the events and listeners counts change as I navigate between the People and Settings pages in my Place² node and that they are consistent. If they were rising as I navigated back and forth I’d know I had a memory leak somewhere.
If you use Kitten’s built-in features (e.g., the `addEventHandler()` method on your `kitten.Component` subclasses, Kitten will handle adding and removing listeners for you automatically during your component’s lifecycle. You can also do so manually in your component’s automatically-called `onConnect()` and `onDisconnect()` event handlers.
This view is useful during development to ensure you don’t have any memory leaks as pages are loaded and unloaded.
¹ https://kitten.small-web.org
² Place is in early development at the moment (https://codeberg.org/place/app)
Pretty soon, you’re going to be able to view your live pages and the events on them in real time while developing Kitten apps.
The improved component model with support for class-based routes (and a server-side component hiearchy that lets you build well-encapsulated components and pages and work in an event-driven way) is coming along nicely and I’m back to writing Place¹ using it.
(In the GIF, you’re looking at Place’s profile settings page. Not shown here but those profile changes reflect in realtime on all open pages. The highlighted piece of code is what streams the event details to the browser.)
Feeling more like myself today after getting my ass kicked by this bug for the past few weeks and I’m finally making progress on improving Kitten’s¹ component model.
Soon, you’ll be able to implement page event handlers in an even simpler way than before. Is your connected DOM element named `pixel`? Then export an event handler called `onPixel()` on your page route and it’ll get called when that element triggers its event.
And there’s so much more coming, including a class-based page and component model with DOM-style event bubbling on the server. This should really let you make the most of the Streaming HTML² workflow in Kitten by writing event-driven GUI-like code but for a web app without really caring about the client/server separation.
Need to update the examples, test, test, test, and update docs but this had me stumped for a while now with several false starts and I feel this implementation might just be it 
¹ https://kitten.small-web.org
² https://kitten.small-web.org/tutorials/streaming-html/
Today @ 18:30 in Dublin: Come hear me talk about the Small Web and watch me demonstrate the current state of Kitten, Domain, and Place.
I’m going to present a talk on Small Web at the Dub|Sec meetup this Wednesday (October 30th at 6:30PM). The event takes place at The Camden Court Hotel in Dublin.
Pop by and say hi if you’re around.
Just added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:
https://ar.al/2024/03/26/draw-together/
Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
(The full source and explanations fit the four screenshots on this post.)
¹ https://draw-together.small-web.org
² https://kitten.small-web.org
To keep my sanity a bit I've skipped Unreal Engine for today but instead messed around with #React and #Websockets 
Just something small "multiplayer" in the web browser
You should now get per-page state for the Kitten Kawaii example:
https://kitten-kawaii.small-web.org
See diff with the session-based fix I implemented yesterday:
https://codeberg.org/aral/kitten-kawaii/commit/211ce86ab5d77fba0b511a4640d54f54a4629dc8
For more information on Kitten’s Streaming HTML workflow, see this tutorial:
https://kitten.small-web.org/tutorials/streaming-html/
PS. I also improved the handling of dynamically-added HTML attributes in Kitten’s HTML parser in the process.
Enjoy!
Just added the Streaming HTML tutorial to the Kitten web site.
https://kitten.small-web.org/tutorials/streaming-html/
It’s called Streaming HTML because you stream HTML updates to the client via WebSockets. Kitten’s implementation makes this simple and fun to do.
The tutorial also goes deep, breaking down all of Kitten’s magic, and even showing you how to implement Streaming HTML *without* Kitten.
Enjoy!
A fresh look at blogrolls https://blogroll.social/#
Dave Winer (@davew) has a new blogging-related project in the making. A live-updating blog-roll that shows the latest posts and is auto-updating.
A bit of #jquery, a bit of #websockets, a bit of feed parsing.
(The use case for this is pretty neat: keep your interface state in custom state class instances persisted in session objects and, using the Streaming HTML workflow*, send back pieces of the interface that take those state objects as their only prop. Quite a neat separation of concerns and state is maintained only on the server in those objects.)
https://www.cometchat.com/blog/xmpp-vs-websockets-instant-messaging-protocol-comparison
#websockets vs #xmpp ? of ... course, it is a tricky question, as long as #XMPP
can run on top of #websockets ? umh...
let's try it ?
PS: coments/suggestions ... somebody, please, correct me if i'm wrong !
The project we are hands on with now relies on
the powerful #XMPP #instant #messaging protocol...
BTW, the one that runs #Whatsapp #1984 network 'under the hood' ;-)
"Standing on giants shoulders " ?
#websockets vs #xmpp ?
cc @xmpp
https://medium.com/@thinkwik/web-sockets-vs-xmpp-which-is-better-for-chat-application-113e3520b327
(And remember, Kitten is a server. So you don’t have to download and install a framework every time you start a project – no npx this or that or anything. Just start writing your code and run `kitten`.)
