@currentoor Thanks, In fact, I had firstly found your blog post, then untangled and the Slack channel of it. There, some people told me you had moved to a new channel "fulcro", So I came here.😀

Oh lol, maybe I should update it then 😅

@tony.kay @currentoor Need help. when I added the websockets component into the system, get an error:

ExceptionInfo Missing dependency :handler of fulcro.websockets.components.channel_server.ChannelServer expected in system at :handler  clojure.core/ex-info (core.clj:4739)

(defn make-channel-server
  "Creates `ChannelServer`.
  Params:
  - `handshake-data-fn` (Optional) - Used by sente for adding data at the handshake.
  - `server-adapter` (Optional) - adapter for handling servers implemented by sente. Default is http-kit.
  - `client-id-fn` (Optional) - returns a client id from the request.
  - `dependencies` (Optional) - adds dependecies to the fulcro handler.
  - `valid-client-id-fn` (Optional) - Function for validating websocket clients. Expects a client-id.
  - `transit-handlers` (Optional) - Expects a map with `:read` and/or `:write` key containing a map of transit handlers,
  "
  [& {:keys [handshake-data-fn server-adapter client-id-fn dependencies valid-client-id-fn transit-handlers]}]
  (when valid-client-id-fn
    (reset! valid-client-id-atom valid-client-id-fn))
  (component/using
    (map->ChannelServer {:handshake-data-fn (or handshake-data-fn (fn [ring-req]
                                                                    (get (:headers ring-req) "Authorization")))
                         :server-adapter    (or server-adapter sente-web-server-adapter)
                         :client-id-fn      (or client-id-fn (fn [request]
                                                               (:client-id request)))
                         :transit-handlers  transit-handlers})
    (into [] (cond-> [:handler]
               dependencies (concat dependencies)))))

in

fulcro.websockets.components.channel-server

I think the example code in "fulcro/src/demos/cards/websocket_cards.cljs"

(core/make-fulcro-server
    ; provides the URI on which you've configured the client to connect:
    :extra-routes {:routes   [" " {[\"/chsk\"] :web-socket}]
                   :handlers {:web-socket cs/route-handlers}}
    ; Adds the components needed in order to establish and work with clients on persistent sockets
    :components {:channel-server   (cs/make-channel-server)
                 :channel-listener (wsdemo/make-channel-listener)}))

miss a

:components {:handler (easy-server/handler)....

I think this maybe come from the difference between new "fulcro-system" and old "make-fulcro-server".

Do the websockets component only work with easy-server?

@tpliliang The websockets component is just a component. There IS an extra step that might not be in the docs correctly

You should look at the demos…there is a websocket example that is working.

The trick is that you have to post-initialize the websocket networking with the running app

https://github.com/fulcrologic/fulcro/blob/develop/src/demos/cards/websocket_cards.cljs#L13

https://github.com/fulcrologic/fulcro/blob/develop/src/demos/cards/websocket_cards.cljs#L36

On the server side, basically you have to build the component as seen here: https://github.com/fulcrologic/fulcro/blob/develop/src/demos/recipes/websockets_server.clj

And you need a server and listener

https://github.com/fulcrologic/fulcro/blob/develop/src/demos/cards/server.clj#L59

The server comes from the library…you need both components in your components map

https://github.com/fulcrologic/fulcro/blob/fadbc782414d0fedc693fdfeb39b798a8a5b4796/src/main/fulcro/websockets/components/channel_server.clj#134

(defrecord ChannelServer [handler

ChannelServer needs a handler dependency.

https://github.com/fulcrologic/fulcro/blob/fadbc782414d0fedc693fdfeb39b798a8a5b4796/src/main/fulcro/websockets/components/channel_server.clj#221

Oh, I see…yes, that is the API handler

easy server makes that for you.

modular server you build it your own server, you also build it

that should be better documented 😕

hmmm…I didn’t write the websockets support. To be honest I don’t remember what it uses out of the handler

this error is the sever side thing, I have written the channel listener, but the demo is just for easy-server/make-fulcro-system.

hm. Yes, actually, now that I read the code, it seems to be pegged to easy-server

it calls pre-hook, which isn’t available elsewhere

@tony.kay How I can modified the websockets channel server's code to make it work with core/fulro-server?

So, here’s what I’d do… 1. open an issue so I don’t forget that it is outdated 🙂 2. Read this updated doc. It is in the 2.0 branch, but it is true for 1.x https://github.com/fulcrologic/fulcro/blob/2.0/src/devguide/fulcro_devguide/I_Building_A_Server.cljs (2) will tell you how to handle the API calls.

Then you can kind of copy the code out of the channel server, and hook it up yourself, without all of the extra stuff

I think the :hander is moved to APIModule, when using fulro-server.

unfortunately it is worse than that…handler as websockets is viewing it is a big thing that lets you hook components into the parsing env

it’s trying to make sure parser injections work

I think most of the code in channel server is what you want

Yeah…I can probably make you something in a just a few minutes…hold on…

I added a new issue.

@tony.kay Thanks a lot.

well, you’re testing it 😉

@tpliliang ok, let me see if it compiles…

ok, it compiles…that means it works, right? 😄

I’m going to deploy it as 1.2.1-SNAPSHOT on clojars

done….here is the new code:

https://github.com/fulcrologic/fulcro/blob/develop/src/main/fulcro/websockets/components/channel_server.clj#L305

it makes a component that no longer depends on handler. Instead it uses the default fulcro server parser…meaning you use defmutation, defquery-root, etc. to handle API requests from the client

The push behavior should not change

oh wait…that can’t work 😞

there’s nowhere to hook it into your ring stack…

@tpliliang stand by

@tony.kay I will read the code and document fisrt, Thanks for your help.

I’m working on a demo so I can test it

almost done

the docs won’t get you there…Im having to read source code a bit

@tony.kay Great.👍

well, almost done with the server-side..the demo will need a client side too…

@tpliliang https://github.com/fulcrologic/websocket-demo

I need to update the readme and make it do more interesting things…but it’s a start, and it is connected via ws

it shows you how to hook it into your own ring stack, and kind of bypasses both methods of constructing servers.

I cheated and used this to create the web server: https://github.com/fulcrologic/websocket-demo/blob/master/src/main/websocket_demo/server.clj#L58

it doesn’t do much but look for config and middleware, and start http-kit server

handler is an unfortunate misnomer for a component that wraps a middleware function

@tony.kay Thanks, I will learn them now.

welcome

@tpliliang the documentation about push in the guide should work. I just didn’t add any client stuff (or server stuff) to exercise it.

@tony.kay Got, I will try.

@tony.kay https://github.com/fulcrologic/fulcro/blob/develop/src/main/fulcro/server.clj#L361

Is there the server side routing things in FulcroApiHandler?

https://github.com/fulcrologic/fulcro/blob/develop/src/main/fulcro/server.clj#L364

https://github.com/fulcrologic/fulcro/blob/develop/src/main/fulcro/server.clj#L372

@tpliliang by server side routing do you mean for SSR or custom handlers ? 🙂

routes for a Ring handler. @claudiu

@tpliliang U can take a look at how it's in the template https://github.com/fulcrologic/fulcro-template/blob/develop/src/main/fulcro_template/server.clj#L175

@claudiu Yes, I had read them all, the wrap-api is come from FulcroApiHandler finally, https://github.com/fulcrologic/fulcro/blob/develop/src/main/fulcro/server.clj#L364

I am running into this issue when trying to use fulcro-inspect:

events.cljs:83 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at fulcro$inspect$ui$events$KeyListener.componentDidMount (events.cljs:83)

hello Mitchel, I never tried it outside of figwheel and lein cljsbuild, can you try on figwheel and see if works there?

but looking at the line, looks strange

(componentDidMount [this]
    (if-let [matcher (parse-keystroke (-> this om/props ::keystroke))]
      (let [handler #(handle-event this %)
            {::keys [target event]} (om/props this)
            target (or target js/document.body)
            event  (or event "keydown")]
        (gobj/set this "matcher" {:handler handler
                                  :matcher matcher})
        (.addEventListener target event handler))))

line 83 is the last one

but there is an or that before (for target) should fallback to js/document.body, it's strange that you are seeing undefined there @mitchelkuijpers

@mitchelkuijpers just came to my mind one thing, where are you putting your script inclusion on the HTML? it's on the <head> or at the end of <body>?

I think undefined will not be false in clojurescript

Hmm yes that works

hmm

I have put the JS in the body tag btw

at the end of the <body> tag

Oh lol

@wilkerlucio it should be (.-body js/document) I think

js/document.body works for sure (I use that syntax for a lot of things), which version of cljs are you using?

That is weird because body is not a function

Oh lol you are right

it works

if you look at my code, I'm not calling it

just getting the value, there are no parentesis around

Yes you are right

glad in the body works 🙂

But fulcro-inspect still fails 😞

we could add code to wait for the dom to be ready, but I think just dropping on the body is simpler and faster

ah =/

what is happening now?

still the same error?

Yes

if you can try on figwheel, just so we know if is something related to shadow-cljs

In another project we have figwheel and there it works

I cannot build this project with figwheel because of the npm-deps

=/

I can't debug shadow-cljs now, but if you can figure it out I'll be happy to take a PR

Ok thnx, no problem

Ah this is interesting in firefox it works

:thinking_face:

so chrome is the one failing?

Yes but i think I enabled a flag for async loading

Not sure if true

No firefox is also failing sorry for the noise I'll investigate further

@tpliliang Ring routing is a ring issue. You build that yourself.

@wilkerlucio It was a false alarm, shadow-cljs issue 😅

@mitchelkuijpers thanks for the update, is there a way to make it work?

Update shadow-cljs it was a regression. It would not put a return statement in certain cases

In js