Disconnect from SignalR at the time of logout - ReactJS & Entity Framework - reactjs

I'm facing the issue regarding to disconnecting from signalR. I want to know that is there some way to disconnect the connection that is established between my frontend and the backend when i logout from the app.
Following npm package of signalR we are using on frontend:
#aspnet/signalr: 1.1.4

U can send stop connection from client side like this
const logoutBtn=()=>{
connection.stop() // This line will send a disconnected call to the server
Logout()
}
// Server code
public override async Task OnDisconnectedAsync(Exception? exception)
{
Context.ConnectionId // U will get the connection id that is disconnected
}

Related

Why is my websocket server not rendering a string sent from the frontend?

I have a basic React application that connects to a websocket server all within the same project.
Sever.ts is the websocket server and the client folder contains all the React code. This is what the server code looks like:
This is what the React code looks like:
All of this works fine, when the React component mounts I am able to successfully establish a connection with the websocket server. There are console logs on both the browser and the backend. The only problem is that when I attempt to send a message from the frontend, it is logged as a Buffer on the server.
Why is this? I specfically have the message set to type string on the frontend.

how nodejs build webserever in frontend for fraework for react and angular

I am new to web development and slowly understanding the web process . I want to know which how nodejs helps to build webserver in frontend ? for react applications npm start --> react-scripts start which runs application in localhost .here where exactly it create webserver and executes in localhost
An application can have front end and back end. A ReactJs application can be the front end for example, and nodeJs can be the back end. The back end will offer the server and will communicate with the database.
So, concretely, you will have 2 different projects: client and server. The client project will be your ReactJS application. The server project will be the NodeJS server. You create each one separetly.
A server can be accessed by paths, for example
http://my-server.localhost/login
http://my-server.localhost/logout
http://my-server.localhost/users
So, a basic connection between client and server can be based on the url paths, so in your client project you can do:
window.location.href = "http://my-server.localhost/login";
to call the login service from the server. And then, in your server, you can redirect to a client's url path.
BUT: the best way (for me) to establish connection between client and server is by using socket.
Socket is very simple, your client can emit requests to the server, and vice-versa:
socket.emit('hello', data);//where data can be any type of object, a string for example..
Similarly, the server can also emit requests to the client:
socket.emit('welcom', new_data);
Then, in the server and the client, you should hear for each request. Finally the code can be something like this:
Client side:
socket.emit('hello', data);// I will say 'hello' message (request) to the server..
socket.on('welcome', (data, callback) => {//I will hear to 'welcome' message(request) from the server..
console.log('server emited welcome with data =>', data);
});
Server side:
socket.on('hello', (data, callback) => {//I will hear to 'hello' message(request) from the client..
console.log('client emited hello with data =>', data);
socket.emit('welcome', ':)');//I will say(reply) 'welcome' to the client..
});
Hope this helps you to understand the concept.

Socket io client reconnect handler

I need to implement a reconnect handler which first request a token over ajax from another server which is used as authentication on the websocket server.
Step 1: connect to http://test.com/{my_temp_token}
Step 2: on disconnect get new token
Step 3: connect to http://test.com/{my_new_temp_token}
Does socket.io automatically reconnect on disconnect? When yes how to implement an own reconnect handler, when no best way to handle an auto reconnect with an ajax loaded authentication token.
Socket io has a list of event listeners that it supports out of the box. If you want to do something custom on reconnect then you would just do...
this.socket.on('reconnect', e => {
// Socket has successfully reconnected
console.log(`It took ${e} tries to reconnect`);
// Do something custom like requesting a new token here...
});
Hope that helps!

Reset Socket.io Client connection

I write a Google Chrome Extension that uses Socket.io capabilities. More precisely, it's an AngularJS app with angular-socket.io on board.
I allow users to set up socket.io server address and port in the options page. Everything works fine until a user wants to change the address because I don't know how to reset the Socket.io connection. Ideally, I would like to close previous connection and reconnect with new connection without restarting the app (remember, it's an Chrome Extension, I cannot restart it by itself).
So my question is: How to reset the Socket.io client connection and reconnect with new DSN?
PS. I'm using socket.io-client#1.3.6
You are using angular-socket.io, so you inject socket.io (with a given config) as a service into your angular app. Assuming your service is called socketIOService you can do following:
Disconnect on client-side with socketIOService.disconnect();
Reconnect with socketIOService.connect(SERVER_IP, {'force new connection': true});

SignalR 2 - not all messages sent from server received by client when multiple instances of hub

EDIT:
I've been doing some additional testing, and this appears to only happen when I'm running multiple instances of the web role hosting the SignalR hub (I'm using a azure service bus backplane). When I'm running a single instance of the hub, I see all messages come through to the client. When I'm running multiple instances, I get these symptoms:
Logging from server indicates that all messages were sent
Logging from client indicates that only some messages were received
Looking at server traffic with wireshark while remoted into the cloud service on azure captures only the messages that the client receives
My suspicion is that the client holds a connection to a single instance of the web role and that when messages happen to originate from the web role to which the client isn't connected, the client can't receive it even when it is broadcast to the correct SignalR connection.
Anyone else having a problem with missing messages when running multiple instances of a SignalR hub hosted in a web site? Is there a way around this problem?
I've got an asynchronous process started via an API call from a javascript client that finishes in one or more messages sent via our SignalR hub back to that client. It appears that not all messages sent from the SignalR hub are received by the javascript client. Below is the flow along with logging messages that I receive:
The client connects to our SignalR hub then immediately calls a subscribe method that associates the current connection id with our internal user identifier:
Websocket opened
Now monitoring keep alive with a warning timeout of 13333.333333333332 and a connection lost timeout of 20000.
Triggering client hub event 'subscribed' on hub 'EventHub'
Client subscribed to event hub: 5539368b-5f82-48bd-8ed9-2c5bed3caefa [this is the indicator that the back end associated the given connection id with the user id]
I start the back end process that should result in two messages being sent back to this client. Logging from within the SignalR hub indicates that two messages were being sent (message lists all connections associated with the given internal user id--I've got old connections in our cache I haven't cleaned out):
event hub broadcasting control action updated to user 124 for control action 120 on connections 5aaea44a-7810-45b5-8119-3ff1fe613d63, 4be9ca16-1e31-42bf-91db-798b757a381c, 5f9f9962-4f8b-4712-929e-c943e28ca91f, de7135ba-4e16-4e9e-9c38-e8f78ed59636, 82e900d1-005e-4bff-95d0-3737632b4671, 0cc273f9-04aa-4570-8cd7-993876219e52, 2b6db0f7-ab0c-41d3-beb5-3b312107a923, 5539368b-5f82-48bd-8ed9-2c5bed3caefa [note connection id from above is included in list]
event hub broadcasting control action updated to user 124 for control action 128 on connections 5aaea44a-7810-45b5-8119-3ff1fe613d63, 4be9ca16-1e31-42bf-91db-798b757a381c, 5f9f9962-4f8b-4712-929e-c943e28ca91f, de7135ba-4e16-4e9e-9c38-e8f78ed59636, 82e900d1-005e-4bff-95d0-3737632b4671, 0cc273f9-04aa-4570-8cd7-993876219e52, 2b6db0f7-ab0c-41d3-beb5-3b312107a923, 5539368b-5f82-48bd-8ed9-2c5bed3caefa [note connection id from above is included in list]
On the client, I'm logging when the method is invoked as a result of a message being sent, and I see:
received controlActionUpdated message from event hub with model: controlActionId 120
Sometimes the client gets all the messages sent from the hub, but more often, it's missing one or two. Relevant code snippets are below:
CLIENT:
We use a generalized eventing service in angularjs. Consumer of events connects and subscribes to a list of events as follows:
eventing.initialize(['controlActionUpdated', 'subscribed']);
The service looks like this:
var cn;
var hubProxy;
var eventsToHandle = [];
var initialize = function(events){
for(var index = 0; index < events.length; index++){
if(eventsToHandle.indexOf(events[index]) == -1){
eventsToHandle.push(events[index]);
}
}
connect();
}
//call this to connect to the eventing hub and set up client-side receiving methods
var connect = function(){
cn = $.hubConnection('https://events.xxx.com/');
cn.logging = true;
hubProxy = cn.createHubProxy('eventHub');
//subscribe to all events currently indicated to be handled
for(var index = 0; index < eventsToHandle.length; index++){
listen(eventsToHandle[index]);
}
hubProxy.on('subscribed', function (model) {
console.log('Client subscribed to event hub: ' + model);
});
cn.qs = { "optiAuthToken" : authentication.getAuthToken() };
cn.start().done(function(){
//subscribe to events for this specific user
hubProxy.invoke('subscribe');
$rootScope.$broadcast('connectedToHub');
});
}
var listen = function(eventName){
hubProxy.on(eventName, function(model){
$rootScope.$broadcast(eventName, model);
});
}
The receiving method to the $rootScope.$broadcast(eventName, model); call above is:
$scope.$on('controlActionUpdated', function (event, model) {
console.log('received controlActionUpdated message from event hub with model: controlActionId ' + model.controlActionId);
[further code omitted]
SERVER:
This method calls our cache to get the list of connections for the executingUserID. If it finds at least one, it sends a message to that list of connections.
public async Task MyControlActionUpdated(ControlActionEventModel model, int executingUserID)
{
EventingConnectionDetails[] currentConnections = await cache.GetCurrentEventHubConnections(executingUserID);
if (currentConnections.Length > 0)
{
Trace.TraceInformation("event hub broadcasting control action updated to user {0} for control action {1} on connections {2}",
executingUserID, model.controlActionId, string.Join(", ", currentConnections.Select(c => c.ConnectionID).Distinct()));
Clients.Clients(currentConnections.Select(c => c.ConnectionID).Distinct().ToList()).controlActionUpdated(model);
}
else
{
Trace.TraceError("attempt to broadcast control action updated to user {0} for control action {1} failed due to no connections",
executingUserID, model.controlActionId);
}
}
I've looked around for other people complaining of the client missing messages from the server but haven't found anything. Does anyone have any ideas why messages logged as sent from the server are not logged as received on the client?
I'm using SignalR 2.0 hosted in a web role in Azure with a service bus backplane. Client is AngularJS version 1.2.14.
The problem was that the service bus backplane was not actually working due to an incorrect configuration on my part (I was calling UseServiceBus on my dependency resolver first then setting the dependency resolver to my unity resolver for DI).
Note to self: check traffic through service bus topic first before trying to dig deeper. :)

Resources