Building A Slideshow App Using SignalR



Over the years I have sat through a great many slideshow presentations where we have local and remote attendees.  The facilitators I’ve seen have always used Microsoft PowerPoint and I’ve noticed that the remote users always have to flip the slides for themselves.  

NOTE: This article will move more quickly than a beginning article.  If you would like step by step on beginning SignalR, please see my other article here at CP : Beginner’s Guide to Using SignalR via ASP.NET[^]

The Impetus For the Idea

Why couldn’t there be a way to have everyone go to a specific URL and then when the facilitator flips to the next slide alll the viewers see the new slide also?  I know you can do Goto Meeting or whatever, but many people don’t have WebEx or GoTo Meeting and besides those are difficult to get set up at times.  

Maybe there is a way to do this in PowerPoint now, I’m not sure.  However, that is the motivation behind my idea.

Main Idea

Using SignalR we can create just such a site.  In this walk-thru explanation we will create an app that allows you to change the image that the remote user sees in real-time.  All the user has to do is go to your URL and then each time you provide an image URL and push the broadcast button she will see the new image in her browser.  

Quick Example

Here’s an example via animated gif that shows three different browsers (Chrome, FireFox, Edge) all looking at the same URL.  The user simply provides a URL to an image and clicks the [Broadcast] button and all other browsers are updated.  Watch closely because it’s fast.  (I’ve pasted URLs to images in the text box ahead of time to shorten the animated gif.)

slideshow overview


Once I knew what I wanted to do, the first thing I wanted to know was how difficult it would be to update the src attribute of an tag.  Using jQuery, it is very easy.

I wrote a quick example to test it out.

Get Code Sample v000

First of all, you can get the code and try it out.  Just download the v000 version of the code at the top of this article.  Unzip it and drop the folder somewhere on your local drive.  Double-click the index.htm file and your default browser will fire up.  This version barely does anything.  

What Does It Do?

Initially, you’ll see a ugly test image (red scrawled x) on the page.  When you click that image, the second ugly test image (blue x) will load.  If you click the image again, it will revert back to the first image.

ugly red x ugly blue x

I warned you it was ugly.   However, it allowed me to determine that what I need to do (update the src attribute of an tag is possible and easy).  We’ll take look at the code, but first allow me to mention why the project is structured the way it is.

Visual Studio Project Structure

During the time I wrote my previous article (Beginner’s Guide to Using SignalR via ASP.NET[^] ) I learned about the project structure that Visual Studio creates for an empty project so stole that from my previous article’s project.  That allowed me to create an index.htm that is ready to be copied into my final ASP.NET project that supports SignalR.  My point here is that is why the jQuery files are found in the /Scripts directory.  The project structure looks like:

project structure

Not Terribly Interesting

I know this isn’t terribly interesting, but knowing about these things can make your life easier.  I can now take my index.htm and drop it into my ASP.NET project (which I will do later in this article) and it will reference the jQuery scripts properly.  OK, enough of this, let’s take a look at the index.htm and the simple jQuery that updates the image.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Slideshow</title> <link rel="stylesheet" href="css/main.css" /> <script src="Scripts/jquery-1.6.4.min.js"></script> <script src="Scripts/jquery.signalR-2.2.2.min.js"></script> <script src="signalR/hubs"></script> </head> <body> <img src="assets/1_local.png" id="slides" onclick="setImageSource()"/> <script src="js/slideshow.js"></script> </body> </html>

You can see that this is basically just a skeleton that references all the scripts.  There is just that one tag and you can see that if the user clicks the then we call a JavaScript method named setImageSource().

Here’s the code from slideshow.js:

function setImageSource(sourcePath) { if (sourcePath === undefined) { if ($("#slides").attr("src") == "assets/1_local.png") { $("#slides").attr("src", "assets/2_local.png"); } else { $("#slides").attr("src", "assets/1_local.png"); } } else { $("#slides").attr("src", sourcePath); } }

First thing the script does, is check to see if sourcePath is defined.  In our use, it is not, because our method does not pass anything in.  That means this outer if statement will always be evaluated to true in this app (our SignalR app will use this to pass in a URL to our image later).

The next thing we see is how we can obtain the value of the image src using jQuery.  It is very easy.  We use the jQuery selector for the id of our tag which is “slides”.  We use the jQuery method called attr() passing in the value of src.  In the if statement we are checking to see if the src value is already equal to the first image.  If it is we simply use the same attr() method to set the src value to our second image which is in our assets directory (2_local.png).

What Does It Mean?

That’s it.  I’ve proven that we can update the src value and see an image change in real-time (when the user clicks the image). 

Since I know I can do this, I now know that I can also use SignalR to broadcast the sourcePath to other browsers. That means I will be able to set the image src value and when I do, all other people looking at my URL will see the new image in their browser too.  It’s a slideshow of sorts that I can use to control what other people are seeing on my page asynchronously or in real-time.  

Let’s convert this code to a SignalR app.  

Setting Up the SignalR Project

I’m going to let you download the completed project from the top of this article and then I’ll explain the code, because it is so simple.  If you want to know how to walk through Visual Studio and set up this project, please see my first article which I mentioned a couple of times already.

I Haz Da Codz : Download v001

Get the v001 version of the code from the top of the article, build it in Visual Studio (mine is built on VStudio 2017) and run it.

When you do that, you will see a page like the following in our browser.

signalR app - initial view

Yes, it is still a bit ugly and shows that ugly original image.  However, notice that it now includes a text box and a