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. */
