I built already windows forms app signalr server and hub named "MyHub". I created new MVC project website to connect to my windows forms server, nevertheless i stack with that how to connect to the server. Can you help me out? This is my current code below. Besides on "MyHub" there is at the moment one method called "Send" which sends out messages to all, how to make something like: HubProxy.On (this is from win forms) but here in mvc.
@{
ViewBag.Title = "Chat";
}
<fieldset>
<legend style="color:orangered">Welcome To Satya's signalR MVC Group Chat Club</legend>
</fieldset>
<div class="form-group col-xl-12">
<label style="color: blue; font-style: oblique;font-size: medium" id="label1">Write Your Message Here!</label><br />
<textarea class="form-control" rows="4" cols="40" id="message" placeholder="Share what's in your mind..."></textarea>
<br />
<input type="button" class="btn btn-primary" id="sendmessage" value="Send" />
<br />
<br />
<label style="color: blue;font-style:oblique;font-size:medium" id="label2">Group Chat Conversations History</label>
<div class="container chatArea">
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
</div>
@section scripts {
<script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
$(function () {
var chat = "MyHub"
chat.hub.url = 'http://xxxxxxxx:4848/';
chat.hub.qs = { 'username' : 'John' };
chat.client.Send = function (name, message) {
$('#discussion').append('<ul style="list-style-type:square"><li><strong style="color:red;font-style:normal;font-size:medium;text-transform:uppercase">' + htmlEncode(name) + ' ' + '<strong style="color:black;font-style:normal;font-size:medium;text-transform:lowercase">said</strong>'
+ '</strong>: ' + '<strong style="color:blue;font-style:oblique;font-size:medium">' + htmlEncode(message) + '</strong>' + '</li></ul>');
};
$('#displayname').val(prompt('Your Good Name Please:', ''));
$('#message').focus();
chat.start().done(function () {
$('#sendmessage').click(function () {
chat.client.Send($('#displayname').val(), $('#message').val());
$('#message').val('').focus();
});
});
});
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
EDIT:
On server side:
class Startup
{
public void Configuration(IAppBuilder app)
{
//app.UseCors(CorsOptions.AllowAll);
//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.
hubConfiguration.EnableDetailedErrors = true;
map.RunSignalR(hubConfiguration);
});
}
}
public class MyHub : Hub
{
public async Task Send(string name, string message)
{
await Clients.All.addMessage(name, message);
uListHistory.Add(new ChatHistory { name = name, message = message });
}
....
Now on MVC client side i have:
@{
ViewBag.Title = "Chat";
}
<fieldset>
<legend style="color:orangered">Welcome To Satya's signalR MVC Group Chat Club</legend>
</fieldset>
<div class="form-group col-xl-12">
<label style="color: blue; font-style: oblique;font-size: medium" id="label1">Write Your Message Here!</label><br />
<textarea class="form-control" rows="4" cols="40" id="message" placeholder="Share what's in your mind..."></textarea>
<br />
<input type="button" class="btn btn-primary" id="sendmessage" value="Send" />
<br />
<br />
<label style="color: blue;font-style:oblique;font-size:medium" id="label2">Group Chat Conversations History</label>
<div class="container chatArea">
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
</div>
@section scripts {
<script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>
<script src="http://52.236.38.106:4848/signalr/hubs"></script>
<script>
$(function () {
$.connection.hub.url = "http://52.236.38.106:4848/signalr";
var chat = $.connection.myHub;
chat.client.AddMessage = function (name, message) {
$('#discussion').append('<ul style="list-style-type:square"><li><strong style="color:red;font-style:normal;font-size:medium;text-transform:uppercase">' + htmlEncode(name) + ' ' + '<strong style="color:black;font-style:normal;font-size:medium;text-transform:lowercase">said</strong>'
+ '</strong>: ' + '<strong style="color:blue;font-style:oblique;font-size:medium">' + htmlEncode(message) + '</strong>' + '</li></ul>');
};
$('#displayname').val(prompt('Your Good Name Please:', ''));
$('#message').focus();
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
chat.server.send($('#displayname').val(), $('#message').val());
$('#message').val('').focus();
});
});
});
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
