Hi,
I've made a chat application using SignalR. To support 1-on-1 chatting I have created a custom HubPipelineModule that adds the SignalR connections to a group named after the owning ProfileID.
But there is no communication possible from server to client, although the SignalR connection is initialised correctly and the Client > Server communication is working correctly, BUT the clientside jQuery code is not being called. My question: Why?
This all used to work correctly but my mobile browser kept crashing randomly, so I dicided to upgrade all SignalR/Jquery code to the latest version to see if that would be a solution, but after the upgrade no Server > Client communication worked anymore.
Global.asax:
protected void Application_Start()
{
ViewEngines.Engines.Clear();
ViewEngines.Engines.Add(new CustomRazorViewEngine());
GlobalHost.HubPipeline.AddModule(new CustomHubPipelineModule());
RouteTable.Routes.MapHubs();
AreaRegistration.RegisterAllAreas();
RegisterGlobalFilters(GlobalFilters.Filters);
RegisterRoutes(RouteTable.Routes);
}
CustomHubPipelineModule.cs:
using System;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using MyChatApp.DataHelpers;
namespace MyChatApp
{
public class CustomHubPipelineModule : HubPipelineModule
{
protected override bool OnBeforeIncoming(IHubIncomingInvokerContext context)
{
if (HttpContext.Current.User != null)
{
Profiel_DataHelper profiel =
new Profiel_DataHelper(HttpContext.Current.User.Identity.Name);
context.Hub.Groups.Add(
context.Hub.Context.ConnectionId,
profiel.ProfielID.ToString());
}
return base.OnBeforeIncoming(context);
}
protected override bool OnBeforeOutgoing(IHubOutgoingInvokerContext context)
{
return base.OnBeforeOutgoing(context);
}
}
}
Then I have created a serverside class to talk to the clients.
ChatServer.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using MyChatApp.DataHelpers;
public class ChatServer
{
public static void addPublicMessage(
string Bericht,
string profielid,
string profielnaam,
string BerichtID,
string DatumActief,
string DatumVerzonden)
{
try
{
var context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.All.addPublicMessage(
Bericht, profielid.ToString(),
profielnaam,
BerichtID.ToString(),
DatumActief,
DatumVerzonden);
}
catch
{
}
}
public static void addMessage(
string ProfielID,
string Bericht,
long? ProfielIDVan,
long? ProfielIDNaar,
bool lastmessage,
int openstaandeberichten,
DateTime? DatumActief,
bool GelezenDoorOntvanger,
int berichtnr,
long BerichtID,
bool showdate = false,
string setdate = "")
{
try
{
var context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.Group(ProfielID).addMessage(
Bericht,
ProfielIDVan.ToString(),
ProfielIDNaar.ToString(),
lastmessage.ToString(),
openstaandeberichten.ToString(),
DatumActief.Value.Hour.ToString("") + ":" +
DatumActief.Value.Minute.ToString(""),
GelezenDoorOntvanger.ToString(),
berichtnr.ToString(),
BerichtID.ToString(),
showdate.ToString(),
setdate);
}
catch
{
}
}
}
And ofcourse the ClientSide jQuery code.
Chat.js:
var stopevents = false;
var test = null;
var interval = 1000;
var timeout = null;
var tickercheckdate;
$(function () {
$.connection.hub.stateChanged(function (change) {
if (stopevents == false) {
if (change.newState == $.signalR.connectionState.reconnecting) {
timeout = setTimeout(function () {
$('#state').css('color', 'red')
.html('The server is unreachable...');
}, interval);
}
else if (timeout && change.newState === $.signalR.connectionState.connected) {
$('#state').css('color', '')
.html('');
clearTimeout(timeout);
timeout = null;
}
}
});
$.connection.hub.start().done(function () {
var chat = $.connection.Chat;
chat.client.addPublicMessage = function (msg, prof_id, prof_naam, bericht_id, bericht_tijd, bericht_datum) {
if (stopevents == false) {
var bubble = '';
if ($("#ActiveDate").val() != bericht_datum) {
bubble = bubble + '<center><div class=\"bubble_date\" >' + bericht_datum + '</div></center><br/>';
$("#ActiveDate").val(bericht_datum)
}
if (prof_id == 0) {
bubble = bubble + '<div class=\"bubble_receiver\" style=\"max-width:' + ($(document).width() - 70) + 'px;\"><div class=\"border_receiver\"></div><div class=\"content_receiver\">' + prof_naam + ' (' + bericht_tijd + '): ' + msg + '</div></div>';
}
else {
bubble = bubble + '<div class=\"bubble_receiver\" style=\"max-width:' + ($(document).width() - 70) + 'px;\"><div class=\"border_receiver\"></div><div class=\"content_receiver\"><a href=\"/Profielen/Details/' + prof_id + '\">' + prof_naam + '</a> (' + bericht_tijd + '): ' + msg + '</div></div>';
}
$('#publicmessages').append(bubble);
jQuery('html, body').animate({ scrollTop: $(document).height() }, 1000);
}
};
chat.client.addMessage = function (msg, prof, profvan, lastmessage, unreadablemessagecount, datumactief, gelezen, berichtnr, berichtid, showdate, setdate) {
if (stopevents == false) {
if (($("#profielid").val() == prof && $("#profielidNaar").val() == profvan) || ($("#profielid").val() == profvan && $("#profielidNaar").val() == prof) || (prof == 0) || (profvan == 0)) {
var cssclass = "receiver";
if (prof == $("#profielid").val()) {
cssclass = "sender";
}
var bubble = '';
if (showdate == true) {
bubble = bubble + '<center><div class=\"bubble_date\" >' + setdate + '</div></center><br/>';
}
bubble = bubble + '<div class=\"bubble_' + cssclass + '\" style=\"max-width:' + ($(document).width() - 70) + 'px;\"><div class=\"border_' + cssclass + '\"></div><div class=\"content_' + cssclass + '\">' + msg + '<div class=\"tijd_' + cssclass + '\">' + datumactief;
if (prof != $("#profielidNaar").val()) {
bubble = bubble + '<div class=\"gelezen_' + gelezen + '\" id=\"read_img' + berichtid + '\"></div>';
}
bubble = bubble + '</div></div></div>';
$('#messages').append(bubble);
}
if (lastmessage == true) {
jQuery('html, body').animate({ scrollTop: $(document).height() }, 1000);
}
}
};
});
});
And of course the header information:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="/Content/jquery.mobile-1.3.0.min.css" rel="stylesheet" />
<link href="/Files/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="/Files/Styles/Chat.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script src="/Scripts/SignalR/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script src="/Scripts/Website/Chat.js" type="text/javascript"></script>
</head>