Friday, November 1, 2013

Real Time Web using SignalR


Hi Guys,

This time I made a shopping site which works real time. Yes, you heard it right. It is real time.

If two users ave connected and one buys something, the other person gets the update without him making any interaction to the Server. Surely the potential of this real time web is limitless.

Before you Start,

1) Visual Studio with .NET Framework 4 or higher

Step One : The Solution
Create a Web application project.

Then Right Click on Solution -> Manage NuGet Packages For Solution













Then Search for SignalR, Json2 and jquery as shown and then install them.









Then make Solution as shown













Then Open UpdateStock.js paste the following code.


/// <reference path="../Scripts/jquery-1.6.4.min.js" />
/// <reference path="../Scripts/jquery.signalR-2.0.0.js" />
/// <reference path="../Scripts/jquery-ui-1.10.3.js" />

$(function () {

//Instance of the Hub
var hub = $.connection.updateStockHub;

//Event handler and logic for update stock
hub.client.updateStock = function (cid, pid, chkAmnt) {

$('#stockTable tr input[type=hidden]').each(function () {
if ($(this).val() == pid) {

var stock = $(this).closest("tr").find('#stock');
var stockVal = stock.html();
if (parseInt(stockVal) > 0) {
stock.html((parseInt(stockVal) - chkAmnt));
}

}

});


if ($.connection.hub.id == cid) {
$('#msg').html('<strong> You have Bought it Successfully!</strong>');
}

};



//Event Habndler binding for Buy Now button
$.connection.hub.start().done(function () {
$('#stockTable tr input[type=button]').each(function () {
$(this).click(function() {
var pid = $(this).closest("td").find('input[type=hidden]').val();
hub.server.update($.connection.hub.id, parseInt(pid), 1)});
});
});
});


Then Open UpdateStockHub.cs and paste the following code.




using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalR.UpdateStock
{
[HubName("updateStockHub")]
public class UpdateStockHub : Hub
{

public void Update(string connectionId, int productId, int checkedOutAmount)
{
Clients.All.updateStock(connectionId, productId, checkedOutAmount);
}

}

}



Then Open the index.html and paste the following code.


<head>
<title>Real Time Shopping Site</title>
<script src="../Scripts/json2.js"></script>
<script src="../Scripts/jquery-1.6.4.min.js"></script>
<script src="../Scripts/jquery-ui-1.10.3.js"></script>
<script src="../Scripts/jquery.signalR-2.0.0.js"></script>
<script src='/signalr/hubs'></script>
<script src="UpdateStock.js"></script>
<style>


.highlight {
background-color:PaleGreen;
}

#stockTable {
border:solid;
width:100%;
font-family:Verdana;
font-size:small;
}

#stock {
font-weight:bold;
}


#imgtd {
border:solid 1px 1px 1px 1px;
padding:5px;
border-color:black;
}


#pName {
font-size:larger;
}

</style>
</head>
<body>


<table id="stockTable">
<tr width="50%">
<td colspan="3">
<table>
<tr><td id="imgtd">
<img width="100px" height="100px" src="../Images/shampoo.jpg" /></td></tr>
<tr><td id="pName">Shampoo</td></tr>
<tr><td>$ 2.00</td></tr>
</table>

</td>
<td width="25%" id="stock">10</td>
<td width="25%"><input type="hidden" id="hf1" value="1" />
<input type="button" id="updStock1" value="Buy Now" /></td>
</tr>
<tr>
<td colspan="3">
<table>
<tr><td id="imgtd">
<img width="100px" height="100px" src="../Images/towel.jpg" /></td></tr>
<tr><td id="pName">Towel</td></tr>
<tr><td>$ 2.00</td></tr>
</table>

</td>

<td id="stock">12</td>
<td><input type="hidden" id="hf2" value="2" />
<input type="button" id="updStock2" value="Buy Now" /></td>
</tr>

</table>
<br />
<div id="msg">

</div>

</body>
</html>


Then build and Run the solution. And don't forget to set index.html as your starting page.
And open another connection from another browser.











Then Click on buy now on any of the product in any browser and notice that the other browsers same products count gets reduced automatically.