Problems with sockets and data fitlering

Wappler General Bugs
,
#1

OS info

  • Operating System : Windows 10.0.18363
  • Wappler Version : 3.6.0

Problem description

Capture
Capture767×839 17.3 KB

I have configured Socket In NodeJS project, creating a post and get data real time is working fine.

  1. Initially on page load i am showing all post.
  2. Now i want to filter post using team id from multiple select box. I am calling Server Action and setting the value of multiple select into session and then refreshing socket.
  3. this doesn’t work until i refresh the page once.
    If i do normal refresh of the page then filter starting working.

Capture
Capture790×798 19.5 KB

Capture
Capture734×415 25.4 KB

Capture

@nshkrsh @sid

1 Like
#2
#3

Could you please explain the flow of how the filtering works. I see that you set a session with the ids in the ChangeTeam action and there is a refresh at the end. So getClipboards action probably should return the filtered list depending on the session variable that was set. Am I correct with this?

#4

yes its correct. But the filter only works if i refresh the page once, otherwise it wont work

#5

image
image653×592 24.2 KB

#6

Does the serverconnect component for the list that calls getClipboards sockets enabled? How does the html look like?

#7

Capture
Capture790×798 19.5 KB

This is the html… clipboard is supposed to filter when i select single or multiple items from select box on top right.
It doesnt work without refresh… once i refresh the page, it will work all time… untill i restart node js server again.

#8

This is not the HTML - please copy and paste the code of the server action and wrap it in backticks: `

#9

We’ll share more code tomorrow. Its about 11pm now.

#10

Have messages the entire files privately. Please let us know if you need other server actions too for testing.

#11

The files look fine, are all the include files up-to-date? You can check in devtools if there is a websocket connection, click on the websocket connect and you can then check the messages that are send over it.

#12

We created a fresh project yesterday… files should be all fine I think.
In the dev tool websocket, we can see the response from WS, which contains the data as if the conditional-where clause did not run - which means session is not set. So it always returns everything.
(The session value is changed on changing any item on the right multi-select.)
But, on refresh it starts working as expected.

#13

1
11629×275 21.4 KB

This is WS called before refreshing, team_id is not passing.

2
21774×378 20.8 KB

This is after refreshing, team_id start passing.

Use this link for reference:

http://f41ba4f4e35b.ngrok.io/

#14

Is there no incoming message after you change the select, the ChangeTeam action should send a message over websockets when it calls the refresh step and then the client-side component listening to it should request an update and get the new data from the getClipboards action.

#15

btw. the link is not working

image

#16

Now try the link again. Sorry my node server stopped. please try the link again

#17

Link is working now and the filtering also seems to be working fine for me, it is updating just fine without needing to refresh the page.

#18

NodeJS

Please see this video.

#19

Tried it multiple times and had it once that it didn’t work until I refreshed the page, but in almost all cases it worked directly.

Add the following to your html, the socket component is not yet added to Wappler, but adding it using code should work. The code below will show if the socket is connected.

<dmx-socket id="socket" namespace="/api"></dmx-socket> {{ socket.connected ? 'online' : 'offline' }}
#20

Yes its showing “Online”