We Keep Coding

SignalR multi user live chat desynchronisation

I have a live chat in which multiple people would be connected simultaneously. All public messaging works fine, but sometimes private messaging to a specific id doesn't work. I believe i narrowed it down to when people disconnected and reconnected that they connected to a different instance (perhaps IIS had recycled and started a new hub).
I thought I had fixed it, but I haven't and now I'm here because I'm stuck. What I thought would fix it was changing the connection variable within the startChat() function to refresh it with the correct information.
This is a cut down version of the code, as I didnt thing the rest would be necesary.
Issue is that when connected to signalR recipients of a message directly to them doean't come through, even though the chat Id it's being sent to it correct. Possible hub/socket mismatch?
var chat = $.connection.chatHub;
$(document).ready(function () {
// Start the chat connection.
startChat();
//restart chat if disconnected
$.connection.hub.disconnected(function () {
setTimeout(startChat(), 5000);
});
$.connection.hub.error(function (error) {
$('#messagebar').html('Chat ' + error + '. If this message doesn\'t go away, refresh your page.');
});
chat.client.addToChat = function (response) {
$('#chat-' + response.Type).prepend(response.Message);
};
});
function startChat() {
chat = $.connection.chatHub;
$.connection.hub.start().done(function () {
//get recent chat from db and insert to page.
//also saves user's chat id to their user for lookup when private messaging
$.ajax({
method: 'POST',
url: '/api/Chat/SetupChat/'
});
$('#messagebar').html('Connected to chat.');
});
}
Any help appreciated, Thanks.

Not sure exactly how your message is going missing, but you should send messages to a User instead of by connection id. This way you be able to identify on the server that a User has at least one connection, and send messages to all connections for that User. if a given connection id is no longer valid, but another one is (because the client has refreshed the page for example) the message wont be lost.
From the docs https://learn.microsoft.com/en-us/aspnet/core/signalr/groups:
The user identifier for a connection can be accessed by the
Context.UserIdentifier property in the hub.
public Task SendPrivateMessage(string user, string message)
{
return Clients.User(user).SendAsync("ReceiveMessage", message);
}
Not sure how this relates exactly to your server code, but you could add it if you're unclear how to progress.

How to allow JavaScript to receive a message sent to a specific user (or self) using Signal R?

I previously asked this question but it was closed for duplication owing to this thread (SignalR - Sending a message to a specific user using (IUserIdProvider) *NEW 2.0.0*) - but this doesn't show the JavaScript as made clear in my title.
I have a WebForm application in ASP.Net that uses SignalR to push live data to the user logged in. The setup works perfectly, but realised I am broadcasting messages to all clients, which whilst it doesn't cause the wrong data to displayed to the logged in user, does cause the JavaScript function to get called for all users when just one has a data push.
I have amended the Hub code to broadcast to a specific user (User) and provided the User ID, and I have also tried Client with a Connection ID. Both fire off fine in the codebehind, but the javascript will not update the front end.
I believe it's because the JavaScript has not been modified to listen for a message sent to the user, but I'm not sure how I need to adapt the code to allow the message to be received.
The 2 tried lines in Hub here:
context.Clients.User(Me.Context.User.Identity.GetUserId()).ReceiveNotification(notifCount)
context.Clients.Client(Me.Context.ConnectionId).ReceiveNotification(notifCount)
JavaScript/jQuery function for the SignalR message here:
$(function () {
var nf = $.connection.notificationHub;
nf.client.receiveNotification = function (notifCount) {
// Update data
}
$.connection.hub.start().done(function () {
nf.server.sendNotifications();
}).fail(function (e) {
alert(e);
});
//$.connection.hub.start();
});

For calling back to the client (or self) you should use:
Clients.Caller.addContosoChatMessageToPage(name, message);
And for calling users you should use:
Clients.Client(Context.ConnectionId).addContosoChatMessageToPage(name, message);
Reference - docs

Client side SignalR on reconnect doesn't receive messages

I have SignalR Hub running on a server being run as a service. This server for whatever reason, may stop due to power loss, being updated (we use Octopus to automatically update), or whatever.
If I have a user connected to this service sending messages to the server, and then in turn, forwarding this message to a sensor. The sensor then returns a message to the server, and gets forwarded on to the client webapp.
This works fine on the first connection. If the service is stopped and restarted before the reconnect times out, I get my reconnect with the same connection id, and I can send messages. I can't however, receive messages.
If I refresh the page, I will get them as this creates a new connection. The same code is called whether it is OnConnect() or OnReconnect().
Example
public override Task OnConnected()
{
EstablishConnection("Connect");
return base.OnConnected();
}
public override Task OnReconnected()
{
// Remove old Connection Id to receive messages on reconnect
ConnectionsHandler.Instance.RemoveTerminalClient(Context.ConnectionId);
EstablishConnection("Reconnect");
// This block is to tell the user that connection has been reconnected. This message shows on the webapp so connection has been restored.
var hubContext = GlobalHost.ConnectionManager.GetHubContext<TerminalHub>();
var message = TerminalMessageColorer.ColorMessageLime(String.Format("Connection has been re-established!"));
hubContext.Clients.Client(Context.ConnectionId).TerminalEcho(message);
return base.OnReconnected();
}
private void EstablishConnection(string conType)
{
ConnectionsHandler.Instance.AddTerminalClient(Context.ConnectionId, "null");
var terminal = ConnectionsHandler.Instance.GetTerminalClient(Context.ConnectionId);
#if DEBUG
Console.ForegroundColor = ConsoleColor.Yellow;
Console.WriteLine("{0}\t{1}\t...{2}", terminal, Context.ConnectionId, conType);
#endif
}

I found what the problem was. I needed to wrap a $timeout in the client side code as there seems to be a little delay in the C# code. I stumbled across this from the chrome dev tools once I was debugging the initializer, thinking something had to be wrong that the user id wasn't being passed. Once I added a breakpoint at the call to initialize, it would go there so that work, but continuing from there I would receive messages afterwards. Without the breakpoint I wouldn't. So I added the $timeout around the call.
$timeout(function () {
initializeTerminal();
}, 100);

does not work - due to jquery version
<script src="~/Scripts/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/signalr/jquery.signalR-2.4.2.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Areas/Noc/NocDOCSIS/Scripts/script.noc.light.js"></script>
works - due to Jquery version
<script src="~/Scripts/jquery-2.2.4/jquery-2.2.4.min.js"></script>
<script src="~/Scripts/signalr/jquery.signalR-2.4.2.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Areas/Noc/NocDOCSIS/Scripts/script.noc.light.js"></script>

Pusher one to one chat structure

I'm a bit confused on the presence-channels in Pusher's platform, as I'm building a chat application from scratch. Now, I know some of you guys have seen tons of "realtime chat app" topics around, but, I'm looking for a peer-to-peer chat and not the site-wide global thingy. More like a facebook chat, where you can go one-to-one.
Now, I've seen an example in PubNub's demos (named Babel) but, that thing is far from what I'm looking for because I've checked the requests in the console and even if it's not shown, the sent messages between other users are shown in my network request logs too because it's being filtered in JS and not server-side and thats not something I want for sure.
So, coming back to the subject,
I'm aware of the channel / private-channel / presence channel functionality, and I decided to do this:
When opening the app, every user subcribes to his private-user_id channel ( creates, if it doesn't exist already ).
At the same time ( while opening the app ) user1 subscribes to a presence-global channel where others keep track if friends are online.
When others want to send him a message, e.g. user2 to user1, he subscribes to private-1 thereafter javascript will process the events.
Now, I know something's wrong with this because.. if user3 would send a message to user1 he'd subscribe to private-user1 so I guess he'll see the events that user2 is triggering when sending messages to user1 too, right ? Or did I get this wrong ?
I've read in their docs that presence channel is actually a private channel extension, so I'm thinking now.. why using private channels anymore, and then, how can I notify all my friends I'm online.
But then, something else comes up in their docs , telling me that channels provide two important things (among others), from which, first is a way of filtering data and second is a way of controlling access.
How am I supposed to "filter data" since there's no link in their docs, or better, what do you have in mind for a one-to-one chat. I'm sorry if I got all their docs wrong, I had a look on their sample applications but none of them are using the one-to-one technique which I'm looking for.
I am new to Pusher and socket connections etc, but I've learned how to authenticate, how to create , detect and process the events in the channel, and I can create a simple global chat with online members, but, when it comes to private-channels I'm quite confused on how to create separate channels for two users.
Thanks in advance !

The purpose of private channels is to restrict who can subscribe to that channel. So, you can either:
Use it to ensure only a users friends can subscribe to updates
Use it for notifications only for that user
In one-to-one chat I'd suggest you choose the latter (No.2).
With this in mind I'd set out achieving one-to-one chat as follows:
The Forum
When users join the chat application they all subscribe to two channels:
private-notifications-<user_id> where user_id is their unique user ID e.g. leggetter in my case. This channel is utilised for user-specific notifications.
presence-forum for all users in that forum. The question called this presence-global.
This is achieved as follows:
var notifications = pusher.subscribe( 'private-notifications-user_one' );
var forum = pusher.subscribe( 'presence-forum' );
Upon subscription to each channel the channel authentication process will take place.
Within the forum you could have a general public chat on the presence-forum/presence-global presence channel by sending and receiving messages.
Starting one-to-one chat
When one user (user_one) wants to have a private chat with another user (user_two) you obviously need something in the UI to trigger this. Say user_one clicks on something next to user_two that indicates they want a one-to-one chat. When this happens a request should be made to the server (the authority) to indicate that user_one wants to initiate the private chat with user_two†.
Note: † if you chose a channel naming convention for one-to-one chat the private channel authentication could actually be used as the private one-to-one chat initiation
When the server receives this request it can generate a unique private channel name for this one-to-one chat. A really simple way of doing this is by concatenating the user IDs e.g. private-chat-<initiating_user>-<receiving_user> (there are other considerations e.g. maybe you want to ensure the channel name is always the same between the two users). In our simple scenario the channel name would be private-chat-user_one-user_two.
The server can then trigger a one-to-one-chat-request event on the private notification channel for each user delivering the one-to-one private chat channel name in the payload.
// Trigger event on both user channels with one call
var channels = [ 'private-notifications-user_one', 'private-notifications-user_two' ];
// Additional event data could also be sent
// e.g. more info on the initiating user
var eventData = {
'channel_name': 'private-chat-user_one-user_two',
'initiated_by': 'user_one'
'chat_with' : 'user_two'
};
pusher.trigger( channels, 'one-to-one-chat-request', eventData );
When user_one receives the one-to-one-chat-request they will subscribe to the eventData.channel_name channel and the auth process will take place for that channel.
// A lookup of private chats
// where the key is the user ID of the current user is chatting with
var privateChats = {};
notifications.bind( 'one-to-one-chat-request', function( data ) {
// MY_USER_ID would need to be stored somewhere
// and in this case the value would be 'user_one'.
// expectingChatWith should make sure user_one is waiting for
// a private chat response with the given user
if( data.initiated_by === MY_USER_ID &&
expectingChatWith( data.chat_with ) ) {
startPrivateChat( data.chat_with, data.channel_name );
}
} );
function startPrivateChat( withUserId, channelName ) {
privateChats[ withUserId ] = pusher.subscribe( channelName );
}
When user_two receives the one-to-one-chat-request the user will need to be notified about the request and either accept or decline it. If the user accepts then the client-side code simply subscribes to the channel. If the user declines then a request should be sent to the server and an event triggered on private-notifications-user_one telling them their one-to-one chat request was declined. This will allow user_one to unsubscribe from the private chat channel.
var privateChats = {};
notifications.bind( 'one-to-one-chat-request', function( data ) {
if( ... ) { ... }
// has somebody request to chat with this user?
else if( data.chatWith === MY_USER_ID ) {
// Prompt the user
// Note: more user info required
displayChatPrompt( data );
}
} );
// callback when the user accepts the chat request
function accepted( chatUserId, channelName ) {
startPrivateChat( chatUserId, channelName );
}
// the user doesn't want to chat
function declined( chatUserId ) {
// send info to the server indicating declined request
}
Private one-to-one chat success
With both user_one and user_two subscribed to private-chat-user_one-user_two they can trigger events on the channel and participate in their private one-to-one chat.

On page unload strophe.js sends request twice! why?

I'm new to Xmpp server and strophe.js, I implement it into my website for messaging. There is a problem when I am send a message it works fine, but after sending a message if I reload the page immediately then I saw that that message, which I send before reload saved in Xmpp server twice, and when I retrieve message from server obviously it return duplicate message. It is so embarrassing.
Can any one tell me any solutions to stop twice requesting when page load?
I saw a post where one developer told that he face with same problem and contact to strophe team they suggest him to replace the line 2566 of strophe.js file with this code
if (req.sends == 0) {
sendFunc();
}
I have already done it but my problem is still there. :(
Thanks,
biswajitGhosh

You need to create multiple divs/windows, one for each chat. Strophe is meant to be asynchronous so you don't have to reload. Reloading defeats the purpose of strophe. Add a handler to your connection once you attach/connect.
connection.addHandler(onMsg, null, 'message');
In your message handler, you can then determine which conversation the message belongs to and append it to the appropriate div.
var onMsg = function (msg) {
var elems = msg.getElementsByTagName('body');
if (elems.length > 0) {
var type = msg.getAttribute('type');
var from = msg.getAttribute('from');
if (type == "chat") {
//new chat message
}
}
return true;
}