IT:AD:SignalR:HowTo:Create a JS Client
Summary
Process
A bare bones implementation of the JS required to create a pub/sub SignalR client would be:
<callout icon="true" type="class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion">
</ul">
</callout>
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.8.2.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub
//which is defined by the attribute -- or if ommitted
//is the camelcase of the hub classname:
var chat = $.connection.myChatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName
+ '</strong>: ' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
A little more succinct is this example:
<script type="text/javascript" src="~/Scripts/jquery.signalR-0.5.2.js"></script>
<script type="text/javascript" src="SignalR/Hubs"></script>
<script type="text/javascript">
$(document).ready(function () {
var chat = $.connection.chatHub;
chat.writeMessage = function (msg) {
$("#messages").append("<li>" + msg + "</li>");
}
$("#buttonSubmit").click(function () {
chat.broadcastMessage($("#txtInput").val());
});
$.connection.hub.start();
});
</script>
You'll have to update the paths to the JQuery libs that are current in your app.