Saturday, May 9, 2015

SignalR - Damien Edwards' MoveShape sample . Getting it to work with latest SignalR + Sample Project

Introduction

I had a good learning experience with SignalR. I started by watching Damien Edwards Video on YouTube. Now I am officially the SignalR newbie and I am hoping to keep climbing this ladder in upward direction :)

In this post I would like to share my experience with the Move Shape example that Damien showed in his video. I initially followed all the instructions as he demonstrated, but I failed to get it to work. I then read through the SignalR documentation and found that the latest version has a few changes since that video was filmed. I corrected the example and this post contains all the things that are different and of course the sample project source code for you to download. So lets get started.

Screenshot


As you may have noticed in the video, this was how the example worked. You drag and move the box in one browser, the box in other browser will follow the movements.




Changes

First thing you would need to change is in the Hub definition file. Or the MoveShapeHub class. There are a couple of changes in the class code.

  1. Hub methods have to be attributed using HubMethodNameAttribute
  2. Instead of calling the client method on Clients object, you have to call it on Clients.All property.

So the new code looks like this (notice the highlights)

    [HubName("moveShape")]
    public class MoveShapeHub : Hub
    {

        [HubMethodName("moveShape")]
        public void MoveShape(int x, int y)
        {
            Clients.All.shapeMoved(Context.ConnectionId, x, y);
        }
    }


The next thing that is changed is the way hub was extended. If you remember the video, he used the $.connection.extend method. But now you just have to define it like a regular prototype

    hub.client.shapeMoved = function (cid, x, y) {
        if ($.connection.hub.id != cid) {
            console.log("Yes");
            $shape.css({ left: x, top: y });
        }
    };

Also notice that instead of hub.shapeMoved, it is now called hub.client.shapeMoved. Next change goes inside the drag handler. Instead of calling hub.moveShape, you have to call hub.server.moveShape.

so the Hub's start-done handler looks like this

    $.connection.hub.start().done(function() {
        $shape.draggable({
            drag: function () {
                hub.server.moveShape(this.offsetLeft, this.offsetTop || 0);
            }
        });
    });


And you're done. Happy coding!

Downloading the sample project

You can download the full-blown VS2013 Solution Here.



4 comments:

  1. I am really impressed by the way you detailed everything. It’s very informative and you are obviously very knowledgeable in this field. It’s a great pleasure reading your post. It’s useful information. Thanks for sharing such an amazing post. Best iOS App Development Service.

    ReplyDelete
  2. There will always be one thing new and thrilling that you just can} play. Stake.com’s catalog of Bitcoin on line casino games just isn't the most important, however with over 1,000 titles in its library, might possibly} easily keep each informal and severe gamblers entertained. Cloudbet doesn't accept 1xbet fiat foreign money, however since you might be} trying out a evaluate for Bitcoin playing sites, this shouldn't be a problem for you. At the highest of the page, find a way to|you probably can} swap shortly from the sportsbook to the eSports section to the on line casino with one click on. In the on line casino foyer, you will discover helpful tabs on the higher portion or use the menu operate on the left.

    ReplyDelete