How to use SignalR with cross domain?

Jak
Jak
Member
352 Points
151 Posts

Hi,

I am using signalr api to show live currency rate. I have implemented successfully in same domain in same project.
Now I want to create different project with singnalr to expose live currency. And from another client project we want to access that hub connection.
Is it posible? if yes how?

Views: 8293
Total Answered: 1
Total Marked As Answer: 1
Posted On: 09-Sep-2015 02:31

Share:   fb twitter linkedin
Answers
Rahul Maurya
Rahul M...
Moderator
1170 Points
210 Posts
Marked as answer      

Hi Jak,

Follow the two simple step to show live currency rate

1. Create the project for signalr hub:

Create a standard c# project signalrdemo. Install SignalR via nuget. The following example gives the live currency per second.

Enable CORS:

We must enable CORS on the server so we can call it cross domain. Install Microsoft.Owin.Cors via nugget
Add class startup1.cs as:

using System;
using System.Threading.Tasks;
using Microsoft.Owin.Cors;
using Microsoft.Owin;
using Owin;
using Microsoft.AspNet.SignalR;
[assembly: OwinStartup(typeof(Startup1))]
public class Startup1
{
public void Configuration(IAppBuilder app)
{
//// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=316888
//app.MapSignalR();
// Branch the pipeline here for requests that start with "/signalr"
app.Map("/signalr", map =>
{
// Setup the CORS middleware to run before SignalR.
// By default this will allow all origins. You can
// configure the set of origins and/or http verbs by
// providing a cors options with a different policy.
map.UseCors(CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
// You can enable JSONP by uncommenting line below.
// JSONP requests are insecure but some older browsers (and some
// versions of IE) require JSONP to work cross domain
// EnableJSONP = true
};
// Run the SignalR pipeline. We're not using MapSignalR
// since this branch already runs under the "/signalr"
// path.
map.RunSignalR(hubConfiguration);
});
}
}

 


Create a Hub:

Lets create a class CurrencyHub by inheriting Hub as:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading;
using System.Data;
using System.Threading.Tasks;
using System.Collections.Concurrent;
public class CurrencyHub : Hub
{
public static System.Timers.Timer _Timer;
public void SendCurrency()
{
if (_Timer == null)
{
_Timer = new System.Timers.Timer();
_Timer.Elapsed += (sender, e) => { OnTimedEvent_Live(""); };// new System.Timers.ElapsedEventHandler(OnTimedEvent_Live);
_Timer.Enabled = true;
_Timer.Interval = 1000;
}
}
private void OnTimedEvent_Live(string ReferrerURL)
{
Clients.all.sendCurrencyLive(GetCurrencyAll_Live());
}
public List<Currency> GetCurrencyAll_Live()
{
// return CurrencyList;
}
}
 

2. The client website (Javascript client):

Create the html page as (https://hubapplication is hub application host path):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://hubapplication/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://hubapplication/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script type="text/javascript" src="https://hubapplication/signalr/hubs"></script>
<link href="https://hubapplication/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://hubapplication/Scripts/RealTimeCurrency.js"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.url = "https://hubapplication/signalr";
var RealTimeCurrencyHub = $.connection.currencyHub;
RealTimeCurrencyHub.client.sendCurrencyLive = function (Currency) {
getCurrencyLive(Currency) //javascript method to update html table or div for currency.
};
$.connection.hub.start(function () {
RealTimeCurrencyHub.server.sendCurrency();
});
});
</script>
</head>
<body>
//currency container
</body>
</html>
Posted On: 14-Sep-2015 03:37
banner

Blog

Active User (0)

No Active User!
 Log In to Chat