基本上我正在我的网站上实施SignalR聊天。我已经可以向所有连接的用户发送消息,现在我希望添加“谁正在打字”功能。我正在尝试将其添加到$('#message').keypress
函数中并且它可以正常工作,但现在我无法向用户发送消息。
我做错了什么?
删除$('#message')后,按键可以发送消息
没有删除$('#message')。keypress无法发送消息
我的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>
}
以下是剧本:
<!--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;
}
以下是我的中心代码:
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);
}
答案 0 :(得分:10)
在您的服务器上,您必须在ChatHub
中使用两个名称:
public void IsTyping (string html)
{
// do stuff with the html
SayWhoIsTyping(html); //call the function to send the html to the other clients
}
public void SayWhoIsTyping (string html)
{
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.All.sayWhoIsTyping (html);
}
这个过程如何运作?
您抓住了一个客户正在键入的事件,即使用javascript的按键功能。然后,使用所需的html从服务器调用一个函数,其中包含名称和其他信息。服务器接收信息,处理它,然后从客户端调用一个函数,该函数可以显示谁在键入。
在您的情况下,来自服务器的IsTyping
方法将处理来自客户端的信息,来自服务器的SayWhoIsTyping
方法将调用客户端来处理它所需的信息。
编辑您的评论:
我建议从这样的javascript修改函数:
chat.client.sayWhoIsTyping = function (name) {
$('#isTyping').html('<em>' + name + ' is typing...</em>');
setTimeout(function () {
$('#isTyping').html(' ');
}, 5000);
};
$('#message').keypress(function(e) {
if (e.which == 13) {
$('#sendmessage').trigger('click');
} else {
var encodedName = $('<div />').text($('#displayname').val()).html();
chat.server.isTyping(encodedName);
}
});
并删除
$(document).keypress
功能。
答案 1 :(得分:1)
在集线器类服务器端
中public void UserTyping(groupName)
{
var userName = "Get current user's name";
//client method here
Clients.OthersInGroup(groupName).OtherUserIsTyping(userName);
}
客户端
<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...");
};