Friday, September 26, 2014

SignalR without generated proxy

Without generated proxy, you can just use plain html on your project, typical of SPA applications. So you won't need this anymore in your SPA application: <script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/jquery-1.6.4.min.js"></script>
    <script src="/Scripts/jquery.signalR-2.1.2.js"></script>
</head>
<body>

    <input type="text" id="theMessage" />

    <button>Loading...</button>

    <div id="messages"></div>

</body>

<script>
    $(function () {
        var tmntConnection = $.hubConnection();

        var tmntHub = tmntConnection.createHubProxy('tmntHub');

        
        tmntHub.connection.start(function () {




            var uuid = generateUUID();
            $('button').text('Ready').click(function () {
                var text = $('#theMessage').val();
                tmntHub.invoke('tellAprilONeil', uuid, text);
            });


            // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
            function generateUUID() {
                var d = new Date().getTime();
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
                });
                return uuid;
            };

        })


        tmntHub.on('cowabungaToTurtles', function (name, message) {

            $('#messages').append("<p>" + name + ": " + message + "</p>");
        });

        
    });
</script>

</html>



Contrast the above to SignalR with generated proxy: http://www.ienablemuch.com/2014/09/signalr-in-three-easy-steps.html


Happy Coding!


No comments:

Post a Comment