var connection = $.hubConnection("http://signalrfiddle.cloudapp.net");
var groupName = "";
var group = connection.createHubProxy("group");
group.on("Receive", function (name, text) {
$("#list").append("<li>" + name + ":" + text + "</li>");
});
$("#send").click(function () {
group.invoke("Send", groupName, $("#message").val());
$("#message").val("");
});
$("#group").change(function () {
var newGroupName = $(this).val();
if (newGroupName != groupName) {
group.invoke("Leave", groupName).done(function () {
group.invoke("Enter", newGroupName);
groupName = newGroupName;
});
}
});
connection.start(function () {
groupName = $("#group").val();
group.invoke("Enter", groupName);
});
<select id="group">
<option value="group1">group 1</option>
<option value="group2">group 2</option>
</select>
<input type="text" id="message" />
<input type="button" id="send" value="send" />
<ul id="list"></ul>
External resources loaded into this fiddle: