Connecting to SignalR in Android app using Sencha Touch 2.1 and PhoneGap

Question

I am trying to connect to SignalR from within a native Android app using Sencha Touch 2.1 and PhoneGap 2.5.0.

Here is what I have so far:

My SignalR server is an ASP.NET MVC3 application running on Windows Server 2012. Cross Domain access has been enabled in global.asax.vb.

Global.asax.vb

Sub Application_Start()
    Dim config As New HubConfiguration
    config.EnableCrossDomain = True     'Allow cross domain (for native apps)
    RouteTable.Routes.MapHubs(config)

    AreaRegistration.RegisterAllAreas()

    RegisterGlobalFilters(GlobalFilters.Filters)
    RegisterRoutes(RouteTable.Routes)
End Sub

I'm using SignalR 1.0.1 Hubs. I have implemented an 'authenticate' method that my Sencha Touch application calls:

Transmitter.vb

Public Class Transmitter
    Inherits Hub

    Public Sub authenticate(ByVal sClientId As String, _
                            ByVal sPassword As String)
        Try
            Dim bRegistered As Boolean = ValidateUser(sClientId, sPassword)

            If bRegistered Then
                Clients.Caller.isAuthenticated(True)
            Else
                Clients.Caller.isAuthenticated(False)
            End If
        Catch ex As Exception
            LogEvent("Authenticate: " & ex.Message)
        End Try
    End Sub
End Class

I have developed a Sencha Touch 2.1 application that connects to my SignalR Server and calls the 'authenticate' function. This works well in a chrome web browser. I have added the references to SignalR in the index.html file, like so:

index.html

<script src="https://www.mySite.com/SignalRServer/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="https://www.mySite.com/SignalRServer/Scripts/jquery.signalR-1.0.1.js" type="text/javascript"></script>
<script src="https://www.mySite.com/SignalRServer/signalr/hubs"></script>

Here is the code used to connect to SignalR and call the 'authenticate' method from within my Sencha Touch application:

MySenchaTabPanel.js

listeners: {

activate: function () {
    $.connection.hub.logging = true;
    $.connection.hub.url = 'https://www.mySite.com/SignalRServer/signalr';

    var transmitterProxy = $.connection.transmitter;

    transmitterProxy.client.isAuthenticated = function (bAuthenticated) {
        console.log('isAuthenticated: ' + bAuthenticated);
    };

    console.log('Connecting to server...');

    $.connection.hub.start()
        .done(function () {
            console.log('Connected to Server: Transport: ' + $.connection.hub.transport.name);
            transmitterProxy.server.authenticate(sClientId, sPassword);
        })
        .fail(function (error) {
            console.log('Could not connect to server:' + error);
        });
}
}

I’m now using PhoneGap 2.5.0 to wrap the Sencha Touch 2.1 application, and I am deploying it on an Android 4.2.2 simulator. The application displays the “Connected to Server” log found in the done callback function when starting the connection. But nothing happens when it tries to call the 'authenticate' function. Here is the log:

03-26 05:29:38.631: D/CordovaLog(1758): exception firing pause event from native
03-26 05:29:49.978: D/CordovaLog(1758): Connecting to server...
03-26 05:29:51.330: D/CordovaLog(1758): exception firing destroy event from native
03-26 05:29:51.688: D/CordovaLog(1758): [05:29:51 GMT+0000 (GMT)] SignalR: Auto detected cross domain url.
03-26 05:29:51.688: D/CordovaLog(1758): [05:29:51 GMT+0000 (GMT)] SignalR: Negotiating    with 'https://www.mySite.com/SignalRServer/signalr/negotiate'.
03-26 05:29:52.840: D/CordovaLog(1758): [05:29:52 GMT+0000 (GMT)] SignalR: SignalR: Initializing long polling connection with server.
03-26 05:29:53.988: D/CordovaLog(1758): [05:29:53 GMT+0000 (GMT)] SignalR: Attempting to connect to 'https://www.mySite.com/SignalRServer/signalr/connect?transport=longPolling&connectionToken=fW1SyP5V9Qwq7d0WF3FBn8Fr9rXvNJZ-VryuonW7LlsUyIbUlQ5LlW9gTRJNGch9t8yO4te8fbyZW2ZPKY_eAdnvIz6tHKxX0rmq8qNa8tv0budwIBjwD6YM1j4pSDTs0&connectionData=%5B%7B%22name%22%3A%22transmitter%22%7D%5D&tid=2' using longPolling.
03-26 05:29:54.258: D/CordovaLog(1758): Connected to Server: Transport: longPolling
03-26 05:29:54.358: D/CordovaLog(1758): [05:29:54 GMT+0000 (GMT)] SignalR: Longpolling connected
03-26 05:29:54.799: D/CordovaLog(1758): [05:29:54 GMT+0000 (GMT)] SignalR: Triggering client hub event 'joined' on hub 'Transmitter'.
03-26 05:29:54.808: D/CordovaLog(1758): [05:29:54 GMT+0000 (GMT)] SignalR: Attempting to connect to 'https://www.mySite.com/SignalRServer/signalr?transport=longPolling&connectionToken=fW1SyP5V9Qwq7d0WF3FBn8Fr9rXvNJZ-VryuonW7LlsUyIbUlQ5LlW9gTRJNGch9t8yO4te8fbyZW2ZPKY_eAdnvIz6tHKxX0rmq8qNa8tv0budwIBjwD6YM1j4pSDTs0&connectionData=%5B%7B%22name%22%3A%22transmitter%22%7D%5D&messageId=B%2C45%7CBo%2C0%7CBp%2C0%7CBq%2C0&tid=10' using longPolling.

The same results are seen when I deploy the app on a Samsung Galaxy Android 4.1.2 device (after I specify the Transport protocol to get around a known issue with Android and SignalR). Can someone please help me to get SignalR working on Android?

Gustavo Armenta Gustavo Armenta · Accepted Answer · 2013-03-27T18:26:22

Please try a few things to troubleshoot: 1. Add a simple Hub.Echo() method and log it with System.Diagnostics.Debug.WriteLine when called 2. Enable server tracing on web.config to ensure the client is actually sending the message to server 3. Compare traces generated by your working device and your failing device

If possible, try to enable Fiddler on the client side (http://www.fiddler2.com/fiddler2/version.asp) https://github.com/SignalR/SignalR/wiki/Using-fiddler-with-signalr

Changes in web.config

  <system.diagnostics>
    <trace autoflush="true" indentsize="4">
      <listeners>
        <add name="default_traces" type="System.Diagnostics.TextWriterTraceListener" initializeData="default_traces.txt" />
      </listeners>
    </trace>
    <switches>
      <add name="SignalRSwitch" value="All" />
    </switches>
    <sources>

      <source name="Application" switchValue="All">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>

      <source name="Microsoft.Owin.Host.SystemWeb" switchValue="All">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>

      <source name="SignalR.Connection">
        <listeners>
          <add name="traces" />
        </listeners>        
      </source>
      <source name="SignalR.PersistentConnection">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>
      <source name="SignalR.HubDispatcher">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>
      <source name="SignalR.Transports.WebSocketTransport">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>
      <source name="SignalR.Transports.ServerSentEventsTransport">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>
      <source name="SignalR.Transports.ForeverFrameTransport">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>
      <source name="SignalR.Transports.LongPollingTransport">
        <listeners>
          <add name="traces" />
        </listeners>
      </source>
    </sources>
    <sharedListeners>
      <add name="traces" type="System.Diagnostics.TextWriterTraceListener" initializeData="server_traces.txt" />
    </sharedListeners>
  </system.diagnostics>

Sample class to do tracing in your Hub

public class AppLogging
{
    static TraceSource traceSource = new TraceSource("Application");

    internal static void WriteVerbose(string format, params object[] args)
    {
        traceSource.TraceEvent(TraceEventType.Verbose, 0, format, args);
    }

    internal static void WriteInformation(string format, params object[] args)
    {
        traceSource.TraceEvent(TraceEventType.Information, 0, format, args);
    }
}

Connecting to SignalR in Android app using Sencha Touch 2.1 and PhoneGap

2 Answers