70 lines
3.4 KiB
Plaintext
70 lines
3.4 KiB
Plaintext
Now you will make the visibility change listener work in the UserAccount.jsx component. When the visibility is none
|
|
the user goes offline and it comes back online when the browser window becomes visible. The UI needs to follow the
|
|
isOnline state of users in the database. We are going to do it with the Websockets support of the REST API. It works
|
|
with the SocketR library. We need to listen to the PUT users request on the origin on the AINIRO Magic back-end on
|
|
the /sockets relative path. We will also need to write listeners for the POST users request if new user is created
|
|
and the currentUser needs to be updated as well, if the user data changes for them. We want the connection reconnect
|
|
automatically and it is secured with the same token than the API endpoints. Write the code in the backend.js file.
|
|
|
|
Two questions:
|
|
1.Does the UserAccount needs to be updated at all?
|
|
2.Where is the SocketR library import?
|
|
|
|
Sorry, it's not SocketR, but SignalR library.
|
|
|
|
The new code is not working, because we have 404 error. You should use the origin of the back-end instead of the
|
|
origin of the site.
|
|
|
|
OK, I show you the backend.js file and you fix it.
|
|
// src/backend/backend.js
|
|
|
|
Can we do it without .env variable and fidgeting with vite? The URL should be:
|
|
https://alexerdei-team.us.ainiro.io/magic/sockets
|
|
As far as I think.
|
|
|
|
We have a CORS error at connection to the sockets on the server. Fix that
|
|
|
|
It's nothing wrong with the server implementation in Magic. I need the client implementation, which connect without a
|
|
CORS error.
|
|
|
|
[2025-04-30T21:09:51.357Z] Warning: No client method with the name 'fakebook.users.put' found. This warning is on
|
|
browser console
|
|
|
|
Nothing has changed, same warning with new name
|
|
|
|
No error message, but I changed link to wss://alexerdei-team.us.ainiro.io/sockets. The UI do not change when another
|
|
user logs out or in
|
|
|
|
The correct URL is without magic, otherwise websockets cannot connect. That way it connects, but no signals received,
|
|
hence no change in online status. Let's try register the listeners after start.
|
|
|
|
I see the lines but the badge never changes
|
|
|
|
the request's format is:
|
|
[ '{"user_id":"67ffe1885cecb6903f8d58fb2617a0f29e93eb18662c2078df305f001cd426ee","isOnline":1}' ]
|
|
|
|
This may be working, but the whole logic to get the old state then modify it and update it should be in the reducer
|
|
in my opinion. What do you thing?
|
|
|
|
I do not want the selectors changed, because I want to keep the changes stop at the reducers.
|
|
|
|
Can I get the full backend.js ?
|
|
|
|
1.The message from SignalR is always a stringified JSON object, which you need to parse first.
|
|
2. Keep the old reducer, just make sure it does three things.
|
|
a. First it iterates over the input parameter array, and checks each element if they mean a new user or the user
|
|
already exists in the state.
|
|
b. If the user is new it should map each field and add to the state. All the required fields are there in this case.
|
|
c. If the user already exist, the input object only contains the fields, which have changed and the user_id. You have
|
|
to map the fields, which are in the input objects and keep those, which are not there.
|
|
|
|
In 1. the object is always a string, which is a POJO, so not an array.
|
|
|
|
How does the clearAuth function looks like and where it is in the code?
|
|
|
|
Write the currentUserUpdated reducer too, according to the above information.
|
|
|
|
I deleted the mapping logic from the backend.js file.
|
|
|
|
/* At this point the code basically worked, but a few other things broke. I fixed these manually. */
|