Make the javascript in stimulus-reflex websocket agnostic about stimulus_reflex HOT 11 CLOSED

Definitely makes sense. I'll start kicking this idea around some.

from stimulus_reflex.

Great research so far. @hopsoft will be excited to hear more about how you got CableReady working with Django. Could you go into more detail on how you approached that, or better yet, link to a repo?

As I mentioned, CableReady is the conduit which we use to execute changes in the browser. If you've got that part of the problem licked, then you're already ahead in the early game.

I'm not an ActionCable expert and the documentation for that module is admittedly below the bar we typically expect Rails docs to have; a lot of what a dev needs comes from learning tricks from other smart folks who have been down the path.

In simple terms, ActionCable is a class you inherit from on the server to handle listening for connections and managing subscriptions; as well a JS library for establishing connections and requesting subscriptions. I suggest that if you aim to keep the JS library but reimpliment the server, you'll get further, faster.

Conceptually, Rails deals with Connections and Channels. The connection abstracts the logistics of the websocket upgrade and endpoint, as well as authentication/authorization. This is usually fairly transparent and once you've set it up (typically auth is tied to the user management system) it's typically out of mind. Once you have opened a connection, you can request subscriptions to one or many Channels. In Rails, a Channel can provide subscriptions to arbitrarily named streams that can be the same for everyone, tied to a user or tied to a resource. StimulusReflex subscribes you to a ReflexChannel where the name of the room is (essentially) the current path of the page you're looking at. That way, anyone looking at the same page will see an update unless your Channel is configured to separate them. This trips up a lot of folks (including us, in the early days.)

I have a feeling that your unnamed client socket is our Connection, that your Channel is just like our channel except that we can have multiple channels for different purposes, and then your Group is just like our Stream.

One thing that will hopefully be helpful is that the code referencing "rooms" in our codebase are quietly unofficially deprecated, as we've found that the concept wasn't as necessary as we thought in the earlier days. For learning purposes, you can safely pretend that room is an empty string in 99.99% of cases, and it's highly likely it'll be officially removed in v3, when that day comes.

Anyhow, I hope that this is somewhat encouraging. I hazard to guess that in the end, ActionCable and Django Channels are quite similar. If I was motivated to do what you're doing, I would definitely fire up Chrome/Firefox web inspector and snoop on some websockets sessions on samples created with both frameworks. If you created a test Rails app and get StimulusReflex working, you're at a point where you can type rails g channel notification and it will create all of the client and server code to support an ActionCable channel. Don't be daunted - you could have this running in 5-10 minutes barring unfortunate gremlins.

Note that you're welcome to come to our Discord server if you're stuck: https://discord.gg/XveN625

from stimulus_reflex.

I'd love to see the supported uses cases expanded. I haven't given it much thought outside of the Rails ecosystem yet. I'm open to ideas if you've made attempts to get it working with other frameworks or libs.

from stimulus_reflex.

I would like to use StimulusReflex outside of Rails ecosystem. In a similar fashion like "Using StimulusJS without a build system" https://stimulusjs.org/handbook/installing#using-without-a-build-system .

Use Case.
I want to store in Rails DB a list of items. Then I would like to add Stimulus and StimulusReflex javascript on an external website using <script> tag, connect it to the Rails Cable URL with some config settings.

After everything is ready, I would like to build a real-time search on that external website and search for items with Stimulate method.

Do you think it would be possible to do something like that with StimulusReflex?

from stimulus_reflex.

I haven't yet tried to get it to work with python yet. But the absolute minimum to get it to work would be to replace the active library that stimulus-reflex is currently using.

So the idea that I'm currently entertaining is that stimulus-reflex would accept a websocket interface when starting the application.

The interface would need to be able to handle the following lines

• https://github.com/hopsoft/stimulus_reflex/blob/master/javascript/stimulus_reflex.js#L310
• https://github.com/hopsoft/stimulus_reflex/blob/master/javascript/stimulus_reflex.js#L114-L127

You already have stimulus-reflex as npm here: https://www.npmjs.com/package/stimulus_reflex

So that way I could re-use the functionality that javascript provides as long as I provide a websocket that matches the interface.

I hope it makes sense.

from stimulus_reflex.

While ActionCable is technically a library, it's also notably one of the core modules that makes up the Rails framework.

Does Django (or whatever you're using) have a generalized websockets module that's comparable in terms of ubiquity?

My hunch is that replacing the server module will be significantly harder than the client module; there are, in fact, several Python ActionCable client libraries on Github, such as this one.

Anyhow, if you are able to implement a Python ActionCable server, the client module should just work.

You'd then need to implement StimulusReflex server module to allow your devs to create Reflex classes as well as a replacement for CableReady. You could write a single-purpose module that would replace CR fairly easily, because CR is a general tool with broader functionality that you don't necessarily need.

All in all, this is doable but probably a ton of work. We'll certainly do our best to help because we strongly believe this style of interaction is a better direction for the web, but at the end of the day you need to be realistic about the fact that we're Ruby developers and likely not able offer much debugging wisdom, for example.

from stimulus_reflex.

Django has Django channels (https://github.com/django/channels/) which is maintained by the django team. So that's the solution I've been looking into. From what I can tell it got everything that you'd ever need out of a websocket server.

I tried using django-channels with the client module for stimulus-reflex. That didn't go well :). Rails generally favour convention over configuration. So there is definitely some convention that comes with how rails handles websockets and how it communicates with the client. Hence my call for an interface where you could switch out the websocket client library in stimulus-reflex.

On a positive note I've already gotten CableReady working together with django channels adapting it from this tutorial: https://dev.to/codefund/build-an-async-progress-bar-with-rails-in-5-steps-2bgp

I totally get that you might not be able to offer much debugging wisdom and I'm grateful that you're happy to help!

I think if I understood a bit more about the channel and the room here: https://github.com/hopsoft/stimulus_reflex/blob/master/javascript/stimulus_reflex.js#L115 that would definitely be helpful.

In django-channels there is the concept of a channel which is automatically created when client socket connects to the server. Then there is the concept of a group which lets you send a message to all channels connected to that group.

from stimulus_reflex.

I just published the repo here with my prototype code. https://github.com/jonathan-s/sockpuppet

This is currently the class channel that's being used. In routing.py you'll see how it's connected. And this is the template that is being run when you visit localhost:8000/test. Running python manage.py progressbar in a separate cli window will execute the progressbar command.

I managed to get activecable and stimulus-reflex up and running and take a peek on the websockets as well. That will definitely become useful.

Thanks a lot for explaining the logistics of how activecable works. That's very helpful. I think the main difference between how the python framework and the rails framework works is that in ruby you can subscribe to any amount of streams from the same endpoint. Whereas in python it makes the assumption that you create a channel class for each websocket endpoint. It would be nice if python could have the same discoverability aspect that rails has, so I'll have to think a bit more how to accomodate that.

Unfortunately, I don't think I'll be able to keep the actioncable js library. The issue that occured was that when using that client library it would connect and then immediately disconnect.

This callback function used here in stimulus-reflex, I tried looking into the actioncable js library to figure out how and where that is being called, but I couldn't find it anywhere...

from stimulus_reflex.

Yikes! Well, pulling out ActionCable is going to be like pulling out a brick from the bottom of a Jenga stack, but hey, you seem hearty. I don't know why the client library is disconnecting. It was my hope that you could snoop on the data packets going back and forth - they are just JS objects, after all - and see how to do a handshake. All I can say is that there isn't any magic, it's just a message bus with some reconnection logic.

ActionCable isn't at all aware of StimulusReflex, so it's no surprise that you were not able to find the code that calls it! The callback you are looking at is the entry point for the client-side of the SR system... every time a broadcast arrives from the server, it comes in here. We run some quick edge-case validation checks and then hand it off to the CableReady client, which ultimately calls morphdom. This ActionCable consumer code is a lightly customized version of the boilerplate ActionCable code that is created by the Rails framework when you set up a Channel.

It's really exciting to see your implementation coming together. I'm not a Python dev but I can follow along, conceptually.

At the risk of being master of the obvious, I think that if you keep reverse engineering a working Rails+Reflex project one conceptual component at a time, sooner than later everything will link up and we will all celebrate. It's us vs the SPA mindless drones, and we have to put up a good fight. ;)

from stimulus_reflex.

Hi @jonathan-s, just checking in on this issue. How is work progressing on your sockpuppet project?

If this isn't an ongoing concern, let's close the issue.

from stimulus_reflex.

Hey there @leastbad, as always thank you for your supporting and nurturing comments. I managed to finally pull myself together and get working on this again. Yesterday I got my stand-in of actioncable websockets in javascript to send data back to the backend.

So now I've got to write the backend part which should be a bit easier than figuring out the javascript. Though I've gotten wiser about how things work!

I'm going to close this issue as I think I've gotten all the information I need out of this.

from stimulus_reflex.