如何从 iOS 上的 PhoneGap 应用程序连接到 SignalR 集线器？
Posted
技术标签:
【中文标题】如何从 iOS 上的 PhoneGap 应用程序连接到 SignalR 集线器？【英文标题】：How to connect to a SignalR hub from PhoneGap app on iOS? 【发布时间】：2013-05-11 20:49:23 【问题描述】：我正在尝试为我正在运行的基本 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>: ' + 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>
我浏览过很多网站，他们谈论其中的点点滴滴，但无法弄清楚。
提前致谢， 杰森
【问题讨论】：
asp.net/signalr/overview/hubs-api/…。仔细阅读笔记。 感谢 dfowler 的文章。实际上，我已经删除了注释中提到的 cors 行，这是我经历的许多调试步骤之一，但它没有任何区别。我实际上并没有看到那篇特定的文章，它看起来很不错，所以我会仔细阅读它，看看里面是否还有其他可能有帮助的东西。 你遇到过这种情况吗？我想测试同样的东西。 不幸的是，该项目在我进一步了解之前就被取消了。现在有了 SignalR 2，我想无论如何事情都会有所不同。看看 blrbr 的答案，让我知道它是否适合您，我会将其标记为答案。 【参考方案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>
【讨论】：
谢谢，我在mvc中使用此代码，在pc浏览器中可以，但在iphone浏览器中不起作用？以上是关于如何从 iOS 上的 PhoneGap 应用程序连接到 SignalR 集线器？的主要内容，如果未能解决你的问题，请参考以下文章
如何在iOS 8上的Cordova / PhoneGap应用程序中隐藏键盘表格附件栏？ [重复]
如何在 iOS 8 上的 Cordova / PhoneGap 应用程序中隐藏键盘表单附件栏？ [复制]
如何在 iOS 上的 Phonegap 中获取 Parse.com PUSH 注册设备令牌