2013-05-11 4 views
5

私は実行している基本的なSignalRチャットサーバーのためのPhoneGap iOSクライアントを構築しようとしています(ASP.NET MVC 4)。ブラウザのページからアクセスするとすばらしいことになりますが、PhoneGapアプリから接続することはできません。iOSのPhoneGapアプリからSignalRハブに接続する方法は?

サーバーのGlobal.asax

protected void Application_Start() 
{ 
    // Register the default hubs route: ~/signalr * This must be registered before any other routes 
    RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true }); 

    AreaRegistration.RegisterAllAreas(); 

    WebApiConfig.Register(GlobalConfiguration.Configuration); 
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 
    RouteConfig.RegisterRoutes(RouteTable.Routes); 
} 

サーバーのweb.config

<configuration> 
    <system.webServer> 
     <modules runAllManagedModulesForAllRequests="true"></modules> 
    </system.webServer> 
</configuration> 

サーバーハブ

public class ChatHub : Hub 
{ 
    public void Send(string name, string message) 
    { 
     Clients.All.broadcastMessage(name, message); 
    } 
} 

PhoneGapのクライアント

<body> 
    <div data-role="page"> 

     <div data-role="header"> 
      <h1>Life As A Pixel</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <label for="username">Name:</label> 
      <input type="text" name="username" id="username" value="" /> 
      <label for="message">Message:</label> 
      <input type="text" name="message" id="message" value="" /> 
      <br> 
      <input type="button" value="Send" id="sendmessage" /> 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed"> 
      <h4></h4> 
     </div><!-- /footer --> 
    </div><!-- /page --> 

    <script type="text/javascript" src="cordova-2.7.0.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script> 
    <script type="text/javascript" src="js/jquery.signalR-1.0.0-rc1.min.js"></script> 
    <script type="text/javascript" src="http://www.mysite.com/signalr/hubs"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
    <script type="text/javascript"> 
     $(function() { 
      // Declare a proxy to reference the hub 
      jQuery.support.cors = true; 
      $.connection.hub.url = 'http://www.mysite.com/signalr'; 
      var chat = $.connection.chatHub; 
      alert(chat); 
      //alert(chat); 
      // Create a function that the hub can call to broadcast messages. 
      //chat.client.broadcastMessage = function (name, message) { 
      //$('#discussion').append('<li><strong>' + name 
      //      + '</strong>:&nbsp;&nbsp;' + message + '</li>'); 
      //}; 
      // Set initial focus to message input box. 
      //$('#message').focus(); 
      // Start the connection. 
      $.connection.hub.start({ jsonp: true }).done(function() { 
       alert("connected"); 
       $('#sendmessage').click(function() { 
        // Html encode display name and message. 
        var encodedName = $('<div />').text($('#username').val()).html(); 
        var encodedMsg = $('<div />').text($('#message').val()).html(); 
        // Call the Send method on the hub. 
        chat.send(encodedName, encodedMsg); 
        // Clear text box and reset focus for next comment. 
        $('#message').val('').focus(); 
       }); 
      }).fail(function() { 
       alert("Failed to connect"); 
      }); 
     }); 
     </script> 
</body> 
01:ここに私のコードの関連部分です

私は数多くのサイトを見てきましたが、それについては数多くの話がありましたが、理解できませんでした。事前に

おかげで、 ジェイソン

+0

http://www.asp.net/signalr/overview/hubs-api/hubs-api-guide-javascript-client#crossdomain。メモを注意深く読んでください。 – davidfowl

+0

記事dfowlerをありがとう。私が実際に行った多くのデバッグステップの1つとしてノートに記載されているように、実際にはcorsラインを削除しましたが、それは何の違いもありませんでした。私は実際にその特定の記事に出くわしたわけではありませんでした、そして、それはかなり良いように見えるので、私はそれを通過し、助けになるかもしれない他のものがあるかどうかを見ます。 – Jason

+0

あなたはこれで運がありましたか?私は同じことをテストしようとしていました。 – user441521

答えて

1

私はこのことができます願っています。ここから - >http://agilefromthegroundup.blogspot.com/2012/09/getting-signalr-and-phonegap-working.html

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>Chat</title> 
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" /> 
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript" src="jquery.mobile-1.0.1.js"></script> 
<script type="text/javascript" src="http://jgough/SignalR/Scripts/jquery.signalR-0.5.3.js"></script> 
<script type="text/javascript" src="http://jgough/SignalR/signalr/hubs"></script> 
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> 
<style type="text/css"> 
    .ui-title 
    { 
     font-weight: bold; 
    } 
</style> 
<script type="text/javascript"> 
    $(function() { 
     $.connection.hub.url = "http://jgough/SignalR/signalr"; 

     // Grab the hub by name, the same name as specified on the server 
     var chat = $.connection.chat; 

     chat.addMessage = function (message) { 
      $('#chatMessages').append('<li>' + message + '</li>'); 
     }; 

     $.connection.hub.start({ jsonp: true }); 

     $("#sendChatMessage").click(function() { 
      var message = $("#chatMessage").val(); 
      console.log("Message: " + message); 
      chat.send(message); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
    <div data-role="header"> 
     <h1> 
      Chat!</h1> 
    </div> 
    <div data-role="content"> 
     <h2> 
      Chat your heart out...</h2> 
     <div> 
      <textarea id="chatMessage"></textarea> 
      <br /> 
      <a id="sendChatMessage" data-role="button">Send Chat Message</a> 
     </div> 
     <ul id="chatMessages"> 
     </ul> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     Thank you for chatting 
    </div> 
</div> 
</body> 
</html> 
関連する問題