我正在尝试使用选定的复选框过滤“聊天”中的在线用户，这是聊天视图的示例，我在数据库中有此表： connectedUserChat-用户连接到聊天时（id，登录时间以及更多插入数据库） userAddress（当用户注册时（地址随数据库的纬度和经度一起插入）
this is the sample of the chat view
现在，当用户单击复选框之一时，在线用户将根据复选框的值进行更改。
这是我的聊天中心类：
[HubName("forplaychat")]
public class ChatHub : Hub
{
public static string emailIDLoaded = "";
public void Connect(string userName, string email)
{
emailIDLoaded = email;
var id = Context.ConnectionId;
using (ApplicationDbContext dbo = new ApplicationDbContext())
{
var item = dbo.connectedUsersChat.FirstOrDefault(x => x.Email == email);
if (item != null)
{
dbo.connectedUsersChat.Remove(item);
dbo.SaveChanges();
// Disconnect
Clients.All.onUserDisconnectedExisting(item.ConnectionId, item.UserName);
}
var Users = dbo.connectedUsersChat.ToList();
string logintime = DateTime.Now.ToString();
string UserImg = GetUserImage(userName);
if (Users.Where(x => x.Email == email).ToList().Count == 0)
{
var userdetails = new ConnectedUsersChat
{
ConnectionId = id,
UserName = userName,
UserImage = UserImg,
Email = email,
LoginTime = logintime
};
dbo.connectedUsersChat.Add(userdetails);
dbo.SaveChanges();
// send to caller
var connectedUsers = dbo.connectedUsersChat.ToList();
var CurrentMessage = dbo.messages.ToList();
Clients.Caller.onConnected(id, userName, connectedUsers, CurrentMessage);
}
// send to all except caller client
Clients.AllExcept(id).onNewUserConnected(id, userName, UserImg, email, logintime);
}
}
public void Send(string name, string message, string time)
{
string UserImg = GetUserImage(name);
// store last 100 messages in cache
AddMessageinCache(name, message, time, UserImg);
// Broad cast message
Clients.All.messageReceived(name, message, time, UserImg);
}
private void AddMessageinCache(string userName, string message, string time, string UserImg)
{
using (ApplicationDbContext dbo = new ApplicationDbContext())
{
var details = new Messages
{
UserName = userName,
Message = message,
Time = time,
UserImage = UserImg
};
dbo.messages.Add(details);
dbo.SaveChanges();
}
}
// get user image, if user image is null, image will be=dummy, if there is image so
// we will convert it form byte64 to string.
public string GetUserImage(string username)
{
string serverPath = HttpContext.Current.Server.MapPath("ForePlay/assets/images");
string RetimgName = serverPath + "dummy.png";
try
{
var manager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(new ApplicationDbContext()));
var currentUser = manager.FindByName(username);
string imageBase64Data = Convert.ToBase64String(currentUser.UserPhoto);
string imageDataURL = string.Format("data:image/png;base64,{0}", imageBase64Data);
if (imageDataURL != "")
RetimgName = imageDataURL;
}
catch (Exception ex)
{ }
return RetimgName;
}
//Clear Chat History
// public void clearTimeout() {
// }
// }
public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)
{
using (ApplicationDbContext dbo = new ApplicationDbContext())
{
var item = dbo.connectedUsersChat.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
if (item != null)
{
dbo.connectedUsersChat.Remove(item);
dbo.SaveChanges();
var id = Context.ConnectionId;
Clients.All.onUserDisconnected(id, item.UserName);
}
}
return base.OnDisconnected(stopCalled);
}
这是我的聊天视图：
<script type="text/javascript">
var IntervalVal;
// setup hub connection
var hub = $.connection.forplaychat;
registerClientMethods(hub);
//start the hub
$.connection.hub.start().done(function () {
registerEvents(hub)
});
// Reset Message Counter on Hover
$("#discussion").mouseover(function () {
$("#MsgCountMain").html('0');
$("#MsgCountMain").attr("title", '0 New Messages');
});
// Diplay Image Preview on File Upload
$(document).on('change', '#<%# FileUpload1.ClientID%>', function (e) {
var tmppath = URL.createObjectURL(e.target.files[0]);
$("#ImgDisp").attr('src', tmppath);
});
// Stop Title Alert
window.onfocus = function (event) {
if (event.explicitOriginalTarget === window) {
clearInterval(IntervalVal);
document.title = 'ForPlay Chat App';
}
}
// Show Title Alert
function ShowTitleAlert(newMessageTitle, pageTitle) {
if (document.title == pageTitle) {
document.title = newMessageTitle;
}
else {
document.title = pageTitle;
}
}
function registerEvents(hub) {
// get the current user name and his email and sent to hub.server.connect
var name = "@currentUser.UserName";
var email = "@currentUser.Email";
if (name.length > 0 && email.length>0) {
hub.server.connect(name,email);
}
// when i able to connect hub i will make here what i need.
hub.server.hello("signlr working");
// Clear Chat-Without Delete all the message on the database just the chat screen.
$('#btnClearChat').click(function () {
var msg = $("#discussion").html();
if (msg.length > 0) {
$('#discussion').html('');
}
});
// Send Button Click Event
$('#btnSendMsg').click(function () {
var msg = $("#txtMessage").val();
if (msg.length > 0) {
var userName = $('#hdUserName').val();
var date = GetCurrentDateTime(new Date());
hub.server.send(userName, msg, date);
$("#txtMessage").val('');
}
});
// Send Message on Enter Button
$("#txtMessage").keypress(function (e) {
if (e.which == 13) {
$('#btnSendMsg').click();
}
});
}
function registerClientMethods(hub) {
// Calls when user successfully logged in/enter to Chat Page
hub.client.onConnected = function (id, userName, allUsers, messages, times) {
$('#hdId').val(id);
$('#hdUserName').val(userName);
$('#spanUser').html(userName);
// Add All Users
for (i = 0; i < allUsers.length; i++) {
AddUser(hub, allUsers[i].ConnectionId, allUsers[i].UserName, allUsers[i].UserImage, allUsers[i].LoginTime);
}
//Add Existing Messages
for (i = 0; i < messages.length; i++) {
AddMessage(messages[i].UserName, messages[i].Message, messages[i].Time, messages[i].UserImage);
}
}
hub.client.onNewUserConnected = function (id, name, UserImage, loginDate, email) {
$('#imageUser').val(UserImage);
AddUser(hub, id, name, loginDate, email);
}
// On User Disconnected
hub.client.onUserDisconnected = function (id, userName) {
$('#Div' + id).remove();
var ctrId = 'private_' + id;
$('#' + ctrId).remove();
var disc = $('<div class="disconnect">"' + userName + '" logged off.</div>');
$(disc).hide();
$('#divusers').prepend(disc);
$(disc).fadeIn(200).delay(2000).fadeOut(200);
}
hub.client.messageReceived = function (userName, message, time, userimg) {
AddMessage(userName, message, time, userimg);
// Display Message Count and Notification
var CurrUser1 = $('#hdUserName').val();
if (CurrUser1 != userName) {
var msgcount = $('#MsgCountMain').html();
msgcount++;
$("#MsgCountMain").html(msgcount);
$("#MsgCountMain").attr("title", msgcount + ' New Messages');
var Notification = 'New Message From ' + userName;
IntervalVal = setInterval("ShowTitleAlert('For Play Chat App', '" + Notification + "')", 800);
}
}
hub.client.sendPrivateMessage = function (windowId, fromUserName, message, userimg, CurrentDateTime) {
var ctrId = 'private_' + windowId;
if ($('#' + ctrId).length == 0) {
OpenPrivateChatBox(hub, windowId, ctrId, fromUserName, userimg);
}
var CurrUser = $('#hdUserName').val();
var Side = 'right';
var TimeSide = 'left';
if (CurrUser == fromUserName) {
Side = 'left';
TimeSide = 'right';
}
else {
var Notification = 'New Message From ' + fromUserName;
IntervalVal = setInterval("ShowTitleAlert('SignalR Chat App', '" + Notification + "')", 800);
var msgcount = $('#' + ctrId).find('#MsgCountP').html();
msgcount++;
$('#' + ctrId).find('#MsgCountP').html(msgcount);
$('#' + ctrId).find('#MsgCountP').attr("title", msgcount + ' New Messages');
}
var divChatP = '<div class="direct-chat-msg ' + Side + '">' +
'<div class="direct-chat-info clearfix">' +
'<span class="direct-chat-name pull-' + Side + '">' + fromUserName + '</span>' +
'<span class="direct-chat-timestamp pull-' + TimeSide + '"">' + CurrentDateTime + '</span>' +
'</div>' +
' <img class="direct-chat-img" src="' + userimg + '" alt="Message User Image">' +
' <div class="direct-chat-text" >' + message + '</div> </div>';
$('#' + ctrId).find('#divMessage').append(divChatP);
// Apply Slim Scroll Bar in Private Chat Box
var ScrollHeight = $('#' + ctrId).find('#divMessage')[0].scrollHeight;
$('#' + ctrId).find('#divMessage').slimScroll({
height: ScrollHeight
});
}
}
// get the date and return as day/month/year and time
function GetCurrentDateTime(now) {
var localdate = dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");
return localdate;
}
function AddUser(hub, id, name, UserImage, date, email) {
var userId = $('#hdId').val();
var email = "@currentUser.Email";
var code, Clist;
if (userId == id) {
code = $('<div class="box-comment">' +
'<img class="img-circle img-sm" img src="' + UserImage + '" alt="User Image" style="max-width:50px; max-height:50px;/>' +
' <div class="comment-text">' +
'<span class="username">' + name + '<span class="text-muted pull-right">' + date + '</span> </span></div></div>');
Clist = $(
'<li style="background:#494949;">' +
'<a href="#">' +
'<img class="contacts-list-img" src="' + UserImage + '" alt="User Image" style="max-width:50px; max-height:50px; />' +
' <div class="contacts-list-info">' +
' <span class="contacts-list-name" id="' + id + '">' + name + ' <small class="contacts-list-date pull-right">' + date + '</small> </span>' +
' <span class="contacts-list-msg">How have you been? I was...</span></div></a > </li >');
}
else {
code = $('<div class="box-comment" id="Div' + id + '">' +
'<img class="img-circle img-sm" src="' + UserImage + '" alt="User Image" style="max-width:50px; max-height:50px; />' +
' <div class="comment-text">' +
'<span class="username">' + '<a id="' + id + '" class="user" >' + name + '<a>' + '<span class="text-muted pull-right">' + date + '</span> </span></div></div>');
Clist = $(
'<li>' +
'<a href="#">' +
'<img class="contacts-list-img" src="' + UserImage + '" alt="User Image" style="max-width:50px; max-height:50px; />' +
' <div class="contacts-list-info">' +
'<span class="contacts-list-name" id="' + id + '">' + name + ' <small class="contacts-list-date pull-right">' + date + '</small> </span>' +
' <span class="contacts-list-msg">How have you been? I was...</span></div></a > </li >');
var UserLink = $('<a id="' + id + '" class="user" >' + name + '<a>');
$(code).click(function () {
var id = $(UserLink).attr('id');
if (userId != id) {
var ctrId = 'private_' + id;
OpenPrivateChatBox(hub, id, ctrId, name);
}
});
var link = $('<span class="contacts-list-name" id="' + id + '">');
$(Clist).click(function () {
var id = $(link).attr('id');
if (userId != id) {
var ctrId = 'private_' + id;
OpenPrivateChatBox(hub, id, ctrId, name);
}
});
}
$("#divusers").append(code);
$("#ContactList").append(Clist);
}
function AddMessage(userName, message, time, userimg) {
var CurrUser = $('#hdUserName').val();
var Side = 'right';
var TimeSide = 'left';
if (CurrUser == userName) {
Side = 'left';
TimeSide = 'right';
}
var divChat = '<div class="direct-chat-msg ' + Side + '">' +
'<div class="direct-chat-info clearfix">' +
'<span class="direct-chat-name pull-' + Side + '">' + userName + '</span>' +
'<span class="direct-chat-timestamp pull-' + TimeSide + '"">' + time + '</span>' +
'</div>' +
' <img class="direct-chat-img" src="' + userimg + '" alt="Message User Image">' +
' <div class="direct-chat-text" >' + message + '</div> </div>';
$('#discussion').append(divChat);
var height = $('#discussion')[0].scrollHeight;
//Apply Slim Scroll Bar in Group Chat Box
$('#discussion').slimScroll({
height: height
});
ParseEmoji('#discussion');
}
function OpenPrivateChatBox(hub, userId, ctrId, userName) {
var PWClass = $('#PWCount').val();
if ($('#PWCount').val() == 'info')
PWClass = 'danger';
else if ($('#PWCount').val() == 'danger')
PWClass = 'warning';
else
PWClass = 'info';
$('#PWCount').val(PWClass);
var div1 = ' <div class="col-md-4"> <div id="' + ctrId + '" class="box box-solid box-' + PWClass + ' direct-chat direct-chat-' + PWClass + '">' +
'<div class="box-header with-border">' +
' <h2 class="box-title">' + userName + '</h2>' +
' <div class="box-tools pull-right">' +
' <span data-toggle="tooltip" id="MsgCountP" title="0 New Messages" class="badge bg-' + PWClass + '">0</span>' +
' <button type="button" class="btn btn-box-tool" data-widget="collapse">' +
' <i class="fa fa-minus"></i>' +
' </button>' +
' <button id="imgDelete" type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button></div></div>' +
' <div class="box-body">' +
' <div id="divMessage" class="direct-chat-messages">' +
' </div>' +
' </div>' +
' <div class="box-footer">' +
' <input type="text" id="txtPrivateMessage" name="message" placeholder="Type Message ..." class="form-control" />' +
' <div class="input-group">' +
' <input type="text" name="message" placeholder="Type Message ..." class="form-control" style="visibility:hidden;" />' +
' <span class="input-group-btn">' +
' <input type="button" id="btnSendMessage" class="btn btn-' + PWClass + ' btn-flat" value="send" />' +
' </span>' +
' </div>' +
' </div>' +
' </div></div>';
var $div = $(div1);
// Closing Private Chat Box
$div.find('#imgDelete').click(function () {
$('#' + ctrId).remove();
});
// Send Button event in Private Chat
$div.find("#btnSendMessage").click(function () {
$textBox = $div.find("#txtPrivateMessage");
var msg = $textBox.val();
if (msg.length > 0) {
hub.server.sendPrivateMessage(userId, msg);
$textBox.val('');
}
});
//Text Box event on Enter Button
$div.find("#txtPrivateMessage").keypress(function (e) {
if (e.which == 13) {
$div.find("#btnSendMessage").click();
}
});
// Clear Message Count on Mouse over
$div.find("#divMessage").mouseover(function () {
$("#MsgCountP").html('0');
$("#MsgCountP").attr("title", '0 New Messages');
});
// Append private chat div inside the main div
$('#PriChatDiv').append($div);
var msgTextbox = $div.find("#txtPrivateMessage");
$(msgTextbox).emojioneArea();
}
function ParseEmoji(div) {
var input = $(div).html();
var output = emojione.unicodeToImage(input);
$(div).html(output);
}
</script>
<!DOCTYPE html>
</head>
<body>
<form id="form1" runat="server">
<div class="content-wrapper">
<header class="main-header" style="background: #222222 ;">
<!-- Logo -->
<div class="logo">
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>ForPlay</b> Chat App </span>
</div>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<img src="~/assets/icons/ForePlayLogo.png" style="max-height:50px; float:right;" />
</nav>
</header>
<!--this div is connect to the checkbox Fitering data-->
<center>
<div class="form-group">
@Html.Label("Filter Users By Address")
@for (int i = 0; i < Model.FilteringChatBoxlist.Count; i++)
{
@Html.CheckBoxFor(m => Model.FilteringChatBoxlist[i].IsChecked)
@Html.HiddenFor(m => Model.FilteringChatBoxlist[i].filterId)
@Html.DisplayFor(m => Model.FilteringChatBoxlist[i].filterName)
}
</div>
</center>
<div class="row">
我知道我需要计算当前用户与桌子上所有其他用户之间的距离，但是我不知道如何开始以及如何将所有这些连接在一起