How to use SignalR with cross domain?
|
Jak
908
Points
132
Posts
|
Hi, I am using signalr api to show live currency rate. I have implemented successfully in same domain in same project.
Views:
14205
Total Answered: 1 Total Marked As Answer: 1 Posted On: 09-Sep-2015 02:31 Share: 
|
|
Rahul M...
4916
Points
27
Posts
|
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 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);
});
}
}
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
great example! still helpful. thanks. - Rashmi 17-Apr-2024 03:49
|
