5

我正在尝试为我正在运行的基本 SignalR 聊天服务器（ASP.NET MVC 4）构建 PhoneGap iOS 客户端。从浏览器中的页面访问它时一切正常，但我似乎无法从 PhoneGap 应用程序连接它。这是我的代码的相关部分：

服务器 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>

我浏览过很多网站，这些网站都在谈论它的点点滴滴，但无法弄清楚。

在此先感谢，杰森

4

1 回答 1

1

I hope this helps. From here -> 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>
于 2014-04-02T14:30:11.797 回答