I am learning both PhoneGap and SignalR and figured out tonight how to enable both polling and message sending under PhoneGap, at least within the Windows Phone emulator. I have not tried on my Android phone yet. That will wait until I deploy the server hub.
Server Side Code
using SignalR.Hubs;
namespace Vocab.SignalR.SignalR.Sample
{
public class Chat : Hub
{
public void Send(string message)
{
// Call the addMessage method on all clients
Clients.addMessage(message);
}
}
}
Yes. That is all. That means when any JavaScript client calls the Send method, the server will dispatch the message to all connected clients by calling their "addMessage" JavaScript method. Clients is declared as dynamic to allow this to work.
HTML & JavaScript Code Under PhoneGap and Windows Phone Emulator
Pay attention most to the blue italicized lines. That's what I had to do in order for the Windows Phone emulator and/or PhoneGap to work properly. At one point before both of those lines, I had it able to get new messages when sent by the server, but it would not send messages to the server. Now it all works! See the section underneath for a standard HTML client that I run within a web browser on the desktop, which has nothing to do with PhoneGap or mobile jQuery whatsoever. But, both the phone app and the page are able to send and receive messages from and to each other now.
<!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>
Regular HTML / JavaSript Page for Desktop Browsers
You may notice that not all the variable names or page elements have the same names. This is fine. The only important part is that the chat instance have an "addMessage" function, and that when the #broadcat button is clicked it calls client.send, as both of these correspond to what we saw above in the server hub code.
<html>
<head>
<script src="../Scripts/jquery-1.8.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.signalR-0.5.3.js" type="text/javascript"></script>
<script src="../signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// Proxy created on the fly
var chat = $.connection.chat;
// Declare a function on the chat hub so the server can invoke it
chat.addMessage = function (message) {
$('#messages').append('<li>' + message + '</li>');
};
$("#broadcast").click(function () {
// Call the chat method on the server
chat.send($('#msg').val());
});
// Start the connection
$.connection.hub.start();
});
</script>
</head>
<body>
<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />
<ul id="messages">
</ul>
</body>
</html>
0 comments:
Post a Comment