Simple message passing cljs implementation

[azureus89]

@sahabaishakhi needed with documentation so that @kattakavya and @ParikshithMohan can build simple games on top of it please do this on priority, can move back to discord after that

[azureus89]

include kavya as you do it, will help you understand what needs to be documented and explained better --- urgent / high priority issue to make up for lost time in the previous week

[sahabaishakhi]

@azureus89 the state atom remains empty upon passing it messages through the input box. I am not getting any errors just unable to see the atom getting updated. I am trying to figure out the hypothesis to be able to view the messages. I see a successful websocket connection on the console. I might need help, can we get on a call?

[azureus89]

@sahabaishakhi tomorrow noon? meanwhile post report in the format id shared ... all relevant snippets, even if no errors

[sahabaishakhi]

Context: facing an error after running cider-jack-in-cljs Issue: The error is referring to the go blocks to pass message from client to server and receiving for server in the clourescript file regarding issues being faced for put and take Logs: Uncaught Error: ``` No protocol method WritePort.put! defined for type null: at cljs$core$missing_protocol (core.cljs:316) at cljs$core$async$impl$protocols$putBANG (protocols.cljs:16) at cljs$core$async$impl$ioc_helpers$putBANG (ioc_helpers.cljs:54) at wsmsg.cljs:12 at wsmsg.cljs:12 at xtnt_micro$wsmsg$state_machine35188auto__1 (wsmsg.cljs:12) at xtnt_micro$wsmsg$state_machine35188auto (wsmsg.cljs:12) at cljs$core$async$impl$ioc_helpers$run_state_machine (ioc_helpers.cljs:35) at cljs$core$async$impl$ioc_helpers$run_state_machine_wrapped (ioc_helpers.cljs:39) at wsmsg.cljs:12 cljs$core$missing_protocol @ core.cljs:316 cljs$core$async$impl$protocols$putBANG @ protocols.cljs:16 cljs$core$async$impl$ioc_helpers$putBANG @ ioc_helpers.cljs:54 (anonymous) @ wsmsg.cljs:12 (anonymous) @ wsmsg.cljs:12 xtnt_micro$wsmsg$state_machine35188auto__1 @ wsmsg.cljs:12 xtnt_micro$wsmsg$state_machine35188auto @ wsmsg.cljs:12 cljs$core$async$impl$ioc_helpers$run_state_machine @ ioc_helpers.cljs:35 cljs$core$async$impl$ioc_helpers$run_state_machine_wrapped @ ioc_helpers.cljs:39 (anonymous) @ wsmsg.cljs:12 cljs$core$async$impl$dispatch$process_messages @ dispatch.cljs:19 channel.port1.onmessage @ nexttick.js:211 ioc_helpers.cljs:42 Uncaught Error: No protocol method ReadPort.take! defined for type null: at cljs$core$missing_protocol (core.cljs:316) at cljs$core$async$impl$protocols$takeBANG (protocols.cljs:13) at cljs$core$async$impl$ioc_helpers$takeBANG (ioc_helpers.cljs:45) at wsmsg.cljs:12 at wsmsg.cljs:12 at xtnt_micro$wsmsg$state_machine35188auto__1 (wsmsg.cljs:12) at xtnt_micro$wsmsg$state_machine35188auto (wsmsg.cljs:12) at cljs$core$async$impl$ioc_helpers$run_state_machine (ioc_helpers.cljs:35) at cljs$core$async$impl$ioc_helpers$run_state_machine_wrapped (ioc_helpers.cljs:39) at wsmsg.cljs:12

[azureus89]

If az-59 PR is good and merged, the next set of tasks are to:

• Implement CLJS example to show how to interact with websocket using cljs
• Documentation for creating CLJS apps as above
• Documentation for how current server-side handler works
• Example of how to extend and create custom event dispatch handlers besides broadcast and echo

[azureus89]

@sahabaishakhi saw you merged my branch in ... good, assume you've understood how everything works ... but more importantly time to progress on above points ... please update on progress and target date for closing above tasks and this issue

[sahabaishakhi]

@azureus89 I am currently trying to implement cljs and websockets using haslett library. I am targeting by tomorrow afternoon for task 1 and task 3 i.e documentation for how current server-side handler working by the eod and then will proceed on documentation for message passing using the haslett library. aiming to close this issue by thursday max. I need explanation for creation of custom event dispatch handler as mentioned above and in TODO and need to know if it is to be included in a separate issue.

[sahabaishakhi]

@azureus89 the weavejester/haslett library doesn't have support for clojure, in the way of how in chord.client we could use ws-ch inside the handler function using with-channel. haslett lets us read from and write into core async channels from the client side but documentation doesn't show how to pass a message into the same channel from the server. I tried removing the websocket route from defroutes since in haslett library, the implementation is from the cljs file and there is no server side code. I am currently figuring how to use http-kit's on-receive to obtain the message from the client side..
going through the issue threads, came across this comment - https://github.com/weavejester/haslett/issues/3#issuecomment-319680831 which supports the hypothesis above..

[azureus89]

haslett is a clojurescript library ... we dont need it on the server side ... server side is done as of now on my branch. You only need to implement the client side to show as an example - and keep it as simple as possible

why are you working on the server side?

[azureus89]

note tasks:

• Implement CLJS example to show how to interact with websocket using cljs
• Documentation for creating CLJS apps as above
• Documentation for how current server-side handler works
• Example of how to extend and create custom event dispatch handlers besides broadcast and echo

any confusion or ambiguity ask before starting

[sahabaishakhi]

You only need to implement the client side to show as an example - and keep it as simple as possible

my understanding was that simple message passing entailed sending and receiving. the client side form hastlett is responsible from sending and printing on the console the message received from the client via the same function. The server side code which is already implemented is done using http-kit's functions but I am not sure how to integrate the two. If I had to only implement the client side, I would need to remove the websocket route from defroutes according to the haslett library but that generates an error of the server not being found.

[azureus89]

You need to send and receive messages from the client in clojurescript .. the rest is fine .. if not Haslett .. find something else .. but send and recieve messages from clojurescript .. avoid chord as it has version conflicts and is not actively maintained, was the source of our problrms

[sahabaishakhi]

Current implementation - the text box should update value typed into it upon pressing the button but it only does so when the page is hot-reloaded i.e if the content of the cljs file is changed and saved, which leads to the value written getting rendered. This is despite of writing the clojurescript code equivalent to a js example..
Optimization- I want the text box to update the dom upon pressing the button, and rendering should not stop despite of not hot reloading the page i.e it should continue rendering into the dom anything that is typed and the button being pressed.

[azureus89]

@sahabaishakhi well you need to close soon either way ... and because this is taking too long, im going to give you a tip you need to figure out why you keep doing this, but you are going down the rabbit hole we are abstracting over react - why are you diving into that layer (react), before you've made sure the problem isn't in the wrapper (reagent)

https://purelyfunctional.tv/guide/reagent/

[sahabaishakhi]

@azureus89 I have faced this issue before wherein I am unable to type anything inside the input box like the example in the link above.

[sahabaishakhi]

implementing form-2 component leads me to obtain the error No protocol method ISwap.-swap! defined for type cljs.core/PersistentArrayMap: {:type "echo", :data ""} wherein this array map is a state atom defined outside of the component function.. my approach now is to define the state locally and manipulate it like how it's demonstrated in form 2 component. I will tackle the data structure if this approach doesn't work..

[sahabaishakhi]

I know where the code could be going wrong.. form-2 component has specified to use local state whereas I am manipulating the global state.. but the issue is that I am using the state to 'send' across the channel and also update the dom.. how do I target a local state if I also have to send a message via the websocket?

[azureus89]

you are mixing two issues ... first implement the component and sufficiently satisfy yourself that it is behaving as it should. Otherwise you will be stuck trying to solve things you dont understand, at the same time.

[sahabaishakhi]

@azureus89 the current implementation using go-loop and recur has the dom updating constantly.. which may hinder the understanding of websockets implementation. how I have tested the current implementation is by -> removing recur from the do block -> writing a message in the text box -> adding recur back into the do block -> saving the file that leads to hot reloading and then, -> quickly pressing send to see the dom updating. This method is not feasible for explaining websockets.. I am trying to think of a better way by which the dom just gets updated once... but with go-loop and recur present I haven't been able to think of one.. what approach should I be taking here?

[azureus89]

yes, as I said before, this go-loop and message injecting implemention will not workout. Take the approach that you saw taken before : use async channels.

[azureus89]

@sahabaishakhi clearly this is about the cljs implementation .. how did you get the impression this is for the handler / clj

[sahabaishakhi]

@azureus89 context is that I am trying to use async channel on the client side. the receiving of the message from the server happens via :source, which is already a core async channel to read from that contains the message returned. :source is one of the keys of the promise channel returned from the following code (ws/connect websocket-url {:format fmt/json}). now I tried to pass message from :source to another async channel and trying to receive message from the channel but unable to.. what is the way I can use core async channels on the client side using haslett?

[azureus89]

Can you tell me this in two lines

[sahabaishakhi]

:source is a core async channel to be read from that is already in use, when we pass the websocket url to the connect function of haslett. how do I use another core async channel on top of it on the client side?

[azureus89]

Check my PR on your branch