I've been following a tutorial on hosting an ASP.NET Core web application (API in .NET C# and Front-end in Angular) to Heroku. I'm using the free plan and the asp.net core buildpack. I've implemented SignalR hubs in order for users to send each other live messages and know who is currently online. It worked perfectly when I was testing the app on the localhost, but when I pushed the same application to Heroku I started getting multiple 400 and 503 errors. All the code below is also at GitHub https://github.com/eloprey123/DatingApp
EDIT I was checking the heroku logs and noticed that all the HTTP POST and GET requests go to "http://myapp.herokuapp.com" instead of "https//myapp.herokuapp.com" which is where the application is hosted. I know making calls to http can be an issue with WebSockets. I've tried updating to a paid dyno to enable SSL, but that doesn't change anything. end of edit
The first error returned is Websocket connection to "wss://myapp.herokuapp.com/hubs/presence?id=string&access_token=string" failed: Error during WebSocket handshake: Unexpected response code: 400
Followed by: Failed to start the transport 'WebSockets': Error: There was an error with the transport.
Then I get a 400 GET error call to: https://datingapp-angular.herokuapp.com/hubs/presence?id=string&access_token=string and Failed to start the transport 'ServerSentEvents': Error: Error occurred
Lastly, I get a 503 GET error call to https://datingapp-angular.herokuapp.com/hubs/presence?id=string and Error: Connection disconnected with error 'Error: Service Unavailable'.
This error cycle goes on-and-on ad nauseum.
Are there any changes I can make to the options for SignalR and the Hubs on the API and client? Or should I make changes on Heroku? Or is it something else entirely?
This is in my C# Startup class:
public void ConfigureServices(IServiceCollection services)
{
services.AddApplicationServices(_config);
services.AddControllers();
services.AddCors();
services.AddIdentityServices(_config);
services.AddSignalR(options => {
options.EnableDetailedErrors = true;
options.KeepAliveInterval = TimeSpan.FromMinutes(1);
options.ClientTimeoutInterval = TimeSpan.FromMinutes(2);
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseMiddleware<ExceptionMiddleware>();
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors(x => x.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
.WithOrigins("https://localhost:4200"));
app.UseAuthentication();
app.UseAuthorization();
app.UseAuthorization();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<PresenceHub>("hubs/presence");
endpoints.MapHub<MessageHub>("hubs/message");
endpoints.MapFallbackToController("Index", "Fallback");
});
}
}
I've tried using services.AddSignalR() with different options, without any success. The WithOrigins() part of app.UseCors() only comes into play during development. This because during production, both the API and client are located in the same address. From what I've seen CORS is not the issue because the application is able to make all non-hub related calls to the API all the time.
This is where I add my DB Context to the application:
services.AddDbContext<DataContext>(options =>
{
var env = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
string connStr;
// Depending on if in development or production, use either Heroku-provided
// connection string, or development connection string from env var.
if (env == "Development")
{
// Use connection string from file.
connStr = config.GetConnectionString("DefaultConnection");
}
else
{
// Use connection string provided at runtime by Heroku.
var connUrl = Environment.GetEnvironmentVariable("DATABASE_URL");
// Parse connection URL to connection string for Npgsql
connUrl = connUrl.Replace("postgres://", string.Empty);
var pgUserPass = connUrl.Split("@")[0];
var pgHostPortDb = connUrl.Split("@")[1];
var pgHostPort = pgHostPortDb.Split("/")[0];
var pgDb = pgHostPortDb.Split("/")[1];
var pgUser = pgUserPass.Split(":")[0];
var pgPass = pgUserPass.Split(":")[1];
var pgHost = pgHostPort.Split(":")[0];
var pgPort = pgHostPort.Split(":")[1];
connStr = $"Server={pgHost};Port={pgPort};User Id={pgUser};Password={pgPass};Database={pgDb};SSL Mode=Require;TrustServerCertificate=True";
}
// Whether the connection string came from the local development configuration file
// or from the environment variable from Heroku, use it to set up your DbContext.
options.UseNpgsql(connStr);
});
This is where the application gets the access token for the SignalR hub calls to the API.
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuerSigningKey = true,
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["TokenKey"])),
ValidateIssuer = false,
ValidateAudience = false
};
options.Events = new JwtBearerEvents
{
OnMessageReceived = context =>
{
var accessToken = context.Request.Query["access_token"];
var path = context.HttpContext.Request.Path;
if (!string.IsNullOrEmpty(accessToken)
&& path.StartsWithSegments("/hubs"))
{
context.Token = accessToken;
}
return Task.CompletedTask;
}
};
});
At the moment I'm using a basic Dictionary to track users instead of Redis, so here is the PresenceTracker class:
private static readonly Dictionary<string, List<string>> OnlineUsers =
new Dictionary<string, List<string>>();
public Task<bool> UserConnected(string username, string connectionId)
{
bool isOnline = false;
lock (OnlineUsers)
{
if (OnlineUsers.ContainsKey(username))
{
OnlineUsers[username].Add(connectionId);
}
else
{
OnlineUsers.Add(username, new List<string>{connectionId});
isOnline = true;
}
}
return Task.FromResult(isOnline);
}
public Task<bool> UserDisconnected(string username, string connectionId)
{
bool isOffline = false;
lock(OnlineUsers)
{
if (!OnlineUsers.ContainsKey(username))
return Task.FromResult(isOffline);
OnlineUsers[username].Remove(connectionId);
if (OnlineUsers[username].Count == 0)
{
OnlineUsers.Remove(username);
isOffline = true;
}
}
return Task.FromResult(isOffline);
}
public Task<string[]> GetOnlineUsers()
{
string[] onlineUsers;
lock(OnlineUsers)
{
onlineUsers = OnlineUsers.OrderBy(k => k.Key)
.Select(k => k.Key).ToArray();
}
return Task.FromResult(onlineUsers);
}
public Task<List<string>> GetConnectionsForUser(string username)
{
List<string> connectionIds;
lock (OnlineUsers)
{
connectionIds = OnlineUsers.GetValueOrDefault(username);
}
return Task.FromResult(connectionIds);
}
These are the hubs where I inject the PresenceTracker
(PresenceHub)
public override async Task OnConnectedAsync()
{
var isOnline = await _tracker.UserConnected(Context.User.GetUsername(), Context.ConnectionId);
if (isOnline)
await Clients.Others.SendAsync("UserIsOnline", Context.User.GetUsername());
var currentUsers = await _tracker.GetOnlineUsers();
await Clients.Caller.SendAsync("GetOnlineUsers", currentUsers);
}
public override async Task OnDisconnectedAsync(Exception exception)
{
var isOffline = await _tracker.UserDisconnected(Context.User.GetUsername(), Context.ConnectionId);
if (isOffline)
await Clients.Others.SendAsync("UserIsOffline", Context.User.GetUsername());
await base.OnDisconnectedAsync(exception);
}
(MessageHub)
public override async Task OnConnectedAsync()
{
var httpContext = Context.GetHttpContext();
var otherUser = httpContext.Request.Query["user"].ToString();
var groupName = GetGroupName(Context.User.GetUsername(), otherUser);
await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
var group = await AddToGroup(groupName);
await Clients.Group(groupName).SendAsync("UpdatedGroup", group);
var messages = await _unitOfWork.MessageRepository
.GetMessageThread(Context.User.GetUsername(), otherUser);
if (_unitOfWork.HasChanges())
await _unitOfWork.Complete();
await Clients.Caller.SendAsync("ReceiveMessageThread", messages);
}
public override async Task OnDisconnectedAsync(Exception exception)
{
var group = await RemoveFromMessageGroup();
await Clients.Group(group.Name).SendAsync("UpdatedGroup", group);
await base.OnDisconnectedAsync(exception);
}
public async Task SendMessage(CreateMessageDto createMessageDto)
{
var username = Context.User.GetUsername();
if (username == createMessageDto.RecipientUsername.ToLower())
{
throw new HubException("You cannot send a message to yourself");
}
var sender = await _unitOfWork.UserRepository.GetUserByUsernameAsync(username);
var recipient = await _unitOfWork.UserRepository.GetUserByUsernameAsync(createMessageDto.RecipientUsername);
if (recipient == null)
throw new HubException("Not found user");
var message = new Message
{
Sender = sender,
Recipient = recipient,
SenderUsername = sender.UserName,
RecipientUsername = recipient.UserName,
Content = createMessageDto.Content
};
var groupName = GetGroupName(sender.UserName, recipient.UserName);
var group = await _unitOfWork.MessageRepository.GetMessageGroup(groupName);
if (group.Connections.Any(x => x.Username == recipient.UserName))
{
message.Read = DateTime.UtcNow;
}
else
{
var connections = await _tracker.GetConnectionsForUser(recipient.UserName);
if (connections != null)
{
await _presenceHub.Clients.Clients(connections).SendAsync("NewMessageReceived",
new {username = sender.UserName, knownAs = sender.KnownAs});
}
}
_unitOfWork.MessageRepository.AddMessage(message);
if (await _unitOfWork.Complete())
{
await Clients.Group(groupName).SendAsync("NewMessage", _mapper.Map<MessageDto>(message));
}
}
private async Task<Group> AddToGroup(string groupName)
{
var group = await _unitOfWork.MessageRepository.GetMessageGroup(groupName);
var connection = new Connection(Context.ConnectionId, Context.User.GetUsername());
if (group == null)
{
group = new Group(groupName);
_unitOfWork.MessageRepository.AddGroup(group);
}
group.Connections.Add(connection);
if (await _unitOfWork.Complete())
return group;
throw new HubException("Failed to join group");
}
private async Task<Group> RemoveFromMessageGroup()
{
var group = await _unitOfWork.MessageRepository.GetGroupForConnection(Context.ConnectionId);
var connection = group.Connections.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
_unitOfWork.MessageRepository.RemoveConnection(connection);
if (await _unitOfWork.Complete())
return group;
throw new HubException("Failed to remove from group");
}
private string GetGroupName(string caller, string other)
{
var stringCompare = string.CompareOrdinal(caller, other) < 0;
return stringCompare ? $"{caller}-{other}" : $"{other}-{caller}";
}
This is the presence.service.ts file on the client:
createHubConnection(user: User) {
this.hubConnection = new HubConnectionBuilder()
.withUrl(this.hubUrl + 'presence', {
accessTokenFactory: () => user.token
})
.withAutomaticReconnect()
.build();
this.hubConnection.start()
.catch(error => console.log(error));
this.hubConnection.on('UserIsOnline', username => {
this.onlineUsers$.pipe(take(1)).subscribe(usernames => {
this.onlineUserSource.next([...usernames, username])
});
});
this.hubConnection.on('UserIsOffline', username => {
this.onlineUsers$.pipe(take(1)).subscribe(usernames => {
this.onlineUserSource.next([...usernames.filter(x => x !== username)])
});
});
this.hubConnection.on('GetOnlineUsers', (usernames: string[]) => {
this.onlineUserSource.next(usernames);
});
this.hubConnection.on('NewMessageReceived', ({username, knownAs}) => {
this.toastr.info(knownAs + ' has sent you a message!')
.onTap.pipe(take(1)).subscribe(() => {
this.router.navigateByUrl(`/members/${username}?tab=3`)
});
})
}
stopHubConnection() {
this.hubConnection.stop()
.catch(errpr => console.log(errpr));
}
The message.service.ts file on the client:
createHubConnection(user: User, otherUsername: string) {
this.busyService.busy();
this.hubConnection = new HubConnectionBuilder()
.withUrl(this.hubUrl + 'message?user=' + otherUsername, {
accessTokenFactory: () => user.token
})
.withAutomaticReconnect()
.build();
this.hubConnection.start()
.catch(error => console.log(error))
.finally(() => this.busyService.idle());
this.hubConnection.on('ReceiveMessageThread', messages => {
this.messageThreadSource.next(messages);
});
this.hubConnection.on('NewMessage', message => {
this.messageThread$.pipe(take(1)).subscribe(messages => {
this.messageThreadSource.next([...messages, message]);
})
});
this.hubConnection.on('UpdatedGroup', (group: Group) => {
if (group.connections.some(x => x.username === otherUsername)) {
this.messageThread$.pipe(take(1)).subscribe(messages => {
messages.forEach(message => {
if (!message.read) {
message.read = new Date(Date.now())
}
})
this.messageThreadSource.next([...messages]);
})
}
})
}
stopHubConnection() {
if (this.hubConnection) {
this.messageThreadSource.next([]);
this.hubConnection.stop();
}
}
getMessages(pageNumber, pageSize, container) {
let params = getPaginationHeaders(pageNumber, pageSize);
params = params.append("Container", container);
return getPaginatedResult<Message[]>(this.baseUrl + 'messages', params, this.http);
}
getMessageThread(username: string) {
return this.http.get<Message[]>(this.baseUrl + 'messages/thread/' + username);
}
async sendMessage(username: string, content: string) {
return this.hubConnection.invoke('SendMessage',
{recipientUsername: username, content})
.catch(error => console.log(error));
}
deleteMessage(id: number) {
return this.http.delete(this.baseUrl + 'messages/' +id);
}