Basically I am implementing a SignalR chat in my website. I can already send messages to all connected users and now I hope to add the "who is typing" feature. I'm trying to add it in the $('#message').keypress
function and it works but now I can't send messages to users.
What did I do wrong?
After remove $('#message').keypress can send message
Didn't remove $('#message').keypress cannot send message
My html {
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" class="btn btn-default" />
<input type="hidden" id="displayname" />
<label id="isTyping" />
<ul id="discussion"></ul>
}
Below is the script:
<!--SignalR script to update the chat page and send messages.-->
<script type="text/javascript">
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.broadcastMessage = function (name, message) {
$('#discussion').append('<li><strong>' + name
+ '</strong>: ' + message + '</li>');
};
chat.client.sayWhoIsTyping = function (name) {
$('#isTyping').html('<em>' + name + ' is typing...</em>');
setTimeout(function () {
$('#isTyping').html(' ');
}, 5000);
};
// 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 () {
var encodedName = $('<div />').text($('#displayname').val()).html();
var encodedMsg = $('<div />').text($('#message').val()).html();
chat.server.sendPublic(encodedName, encodedMsg);
$('#message').val('').focus();
});
$('#message').keypress(function (e) {
if (e.which == 13) {
var encodedName = $('<div />').text($('#displayname').val()).html();
var encodedMsg = $('<div />').text($('#message').val()).html();
chat.server.sendPublic(encodedName, encodedMsg);
$('#message').val('').focus();
} else {
var encodedName = $('<div />').text($('#displayname').val()).html();
chat.server.isTyping(encodedName);
}
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
Below is my Hub code:
public void SendPublic(string name, string message)
{
// Call the addNewMessageToPage method to update clients
Clients.All.broadcastMessage(name, message);
}
public void IsTyping(string name)
{
SayWhoIsTyping(name);
}
public void SayWhoIsTyping(string name)
{
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.All.sayWhoIsTyping(name);
}
We change the BroadcastChartData() method to accept connectionId as an additional parameter. This way, we can find the client using the connectionId and send a message just to that client. Additionally, we add a new GetConnectionId() method, which returns the connectionId of the client.
Two-way communication means that both the server and client share an open channel in which they can initiate contact with each other. This channel is high-speed and works both directions between server and client. Many kinds of software can benefit from the real-time, two-way, communication system of SignalR.
SignalR Hubs are a way to logically group connections as documented. Take an example of a chat application. A group of users could be part of the same hub which allows for sending messages between users in the group. The hubName here can be any string which is used to scope messages being sent between clients.
in the hub class Server Side
public void UserTyping(groupName)
{
var userName = "Get current user's name";
//client method here
Clients.OthersInGroup(groupName).OtherUserIsTyping(userName);
}
Client Side
<textbox id="message"></textbox>
<span id="userTyping"></span>
var keyPressCount = 0;
$("#message").on("keypress", function () {
if (e.which == 13) {
$('#sendmessage').trigger('click');
}
else {
// Don't want to call the server on every keypress
if (keyPressCount++ % 10 == 0) {
chatHub.server.userTyping("myChatGroup");
}
}
});
chatHub.client.OtherUserIsTyping = function (userName) {
$("#userTyping").html(userName + " is typing...");
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With