Wednesday, September 19, 2012

Getting SignalR and PhoneGap Working Under Windows Phone Emulator

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: