ASP.NET SignalR聊天显示错误的头像
本文关键字：错误 显示 NET SignalR 聊天 ASP | 更新日期: 2023-09-27 18:21:41
我正在使用SignalR为人力资源管理项目开发聊天模块。一切都很好，只是用户在线列表和聊天框中的头像和用户名不匹配。例如，在浏览器1中，登录用户名1是：thanhlem和化身url liem.png，用户名2是：admin，来自broswer 2，但它对不同的用户名使用了相同的化身url。在浏览器2中，登录用户名1是admin，化身url是admin.png，从浏览器1获得的用户名2是thanhlem也使用来自用户名1的相同化身url。所以我的问题是：为什么signalR可以传递正确的用户名，但它在化身url上出了问题。这是我的详细代码：1.编码：
using System.Collections.Concurrent;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
namespace BIX
{
public class ChatHub : Hub
{
private static readonly ConcurrentDictionary<string, string> dic = new ConcurrentDictionary<string, string>();
public void Send(string name, string message)
{
Clients.All.broadcastMessage(name, message);
}
public void SendToSpecific(string name, string message, string to)
{
Clients.Caller.broadcastMessage(name, message);
Clients.Client(dic[to]).broadcastMessage(name, message);
}
public void Notify(string name, string id)
{
if (dic.ContainsKey(name))
{
Clients.Caller.differentName();
}
else
{
dic.TryAdd(name, id);
foreach (var entry in dic)
{
Clients.Caller.online(entry.Key);
}
Clients.Others.enters(name);
}
}
public override Task OnDisconnected(bool stopCalled)
{
var name = dic.FirstOrDefault(x => x.Value == Context.ConnectionId.ToString());
string s;
dic.TryRemove(name.Key, out s);
return Clients.All.disconnected(name.Key);
}
}
}
和：
using System;
using System.Web.UI;
using BIX.Business;
namespace BIX.Admins
{
public partial class Chat : Page
{
protected static string userName { get; set; }
protected static string userImage { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getUserInfo();
}
}
private void getUserInfo()
{
if (string.IsNullOrEmpty((string)Session["UserId"]))
{
Response.Redirect("/Account/Logout.aspx");
}
else
{
userName = (string)Session["UserName"];
var userId = (string)Session["UserId"];
var listE = UsersService.Users_GetById(userId);
userImage = listE[0].UserImage;
}
}
}
}
2:HTML和JS
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chat.aspx.cs" Inherits="BIX.Admins.Chat" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<link href="../App_Themes/Admin/css/FBLikeChat.css" rel="stylesheet"/>
<!-- chatjs requirements -->
<script src="../Scripts/jquery-2.1.4.min.js"></script>
<script src="../Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function() {
startChatHub();
});
var nickname = "";
var avatarurl = "";
function startChatHub() {
var chat = $.connection.chatHub;
// Get the user name.
nickname = "<%= userName %>";
avatarurl = "<%= userImage %>";
chat.client.online = function(name) {
// Update list of users
if (name == nickname) {
$("#chat_body").append("<img src=" + avatarurl + " class='"avatar'" /><div id='"userlist'">" + name + "</div>");
$("#msg_head").append("<div id=userchat>" + name + "</div>");
} else {
$("#chat_body").append("<img src=" + avatarurl + " class='"avatar'" /><div id='"userlist'">" + name + "</div>");
$("#users").append("<option value='"" + name + "'">" + name + "</option>");
}
};
chat.client.enters = function(name) {
$("#msg_body").append("<div ><i>" + name + " joins the conversation</i></div>");
$("#users").append("<option value='"" + name + "'">" + name + "</option>");
//$("#chat_body").append("<div id=userlist>" + name + "</div>");
$("#chat_body").append("<img src=" + avatarurl + " class='"avatar'" /><div id='"userlist'">" + name + "</div>");
};
// Create a function that the hub can call to broadcast chat messages.
chat.client.broadcastMessage = function(name, message) {
//Interpret smileys
message = message.replace(":)", "<img src='"/ChatJS/Images/Emoticons/smile-2.png'" class='"smileys'" />");
message = message.replace(":D", "<img src='"/ChatJS/Images/Emoticons/smile-1.png'" />");
message = message.replace(":o", "<img src='"/ChatJS/Images/Emoticons/smile-6.png'" />");
//display the message
//$("#msg_body").append("<div class='"border'"><span style='"color:orange'">" + name + "</span>: " + message + "</div>");
$("#msg_body").append("<img src=" + avatarurl + " class='"avatar'" />", message);
};
chat.client.disconnected = function(name) {
//Calls when someone leaves the page
$("#msg_body").append("<div ><i>" + name + " leaves the conversation</i></div>");
$("#chat_body div").remove(":contains('" + name + "')");
jQuery(this).attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
$("#users option").remove(":contains('" + name + "')");
};
//scroll bar
$(".chat_head").click(function() {
$("#chat_body").slideToggle("slow");
});
$("#msg_head").click(function() {
$(".msg_wrap").slideToggle("slow");
});
$(".close").click(function() {
$(".msg_box").hide();
});
$("#userlist").click(function() {
$(".msg_wrap").show();
$(".msg_box").show();
});
// Start the connection.
$.connection.hub.start().done(function() {
//Calls the notify method of the server
chat.server.notify(nickname, $.connection.hub.id);
$("#messagebox").keypress(function(e) {
if (e.keyCode == 13) {
var msg = "<div id=msg_b>" + $("#messagebox").val() + "</div>";
$("#messagebox").val("");
if ($("#users").val() == "All") {
//Call the Send method on the hub.
chat.server.send(nickname, msg);
$("#msg_body").scrollTop($("#msg_body")[0].scrollHeight);
} else {
chat.server.sendToSpecific(nickname, msg, $("#users").val());
//Clear text box and reset focus for next comment.
$("#messagebox").val("").focus();
$("#msg_body").scrollTop($("#msg_body")[0].scrollHeight);
}
}
});
});
}
</script>
</head>
<body>
<!-- FBchat -->
<div id="chat_box">
<div class="chat_head"> Friends</div>
<div id="chat_body">
</div>
</div>
<div class="msg_box" style="right: 210px">
<div id="msg_head">
<div class="close" aria-hidden="true">x</div>
</div>
<div class="msg_wrap">
<div id="msg_body">
<div class="msg_push"></div>
</div>
<div class="msg_footer">
<div style="float: right">
<select id="users">
<option value="All">All</option>
</select>
</div>
<textarea id="messagebox" class="msg_input" placeholder="Type a message..."></textarea>
</div>
</div>
</div>
</body>
</html>
这是用于说明的图像：聊天窗口UI
聊天窗口UI 2
如下修改您的代码，希望它能工作：
<script>
$(document).ready(function () {
$("#chat_body").slideToggle("slow");
$(".msg_wrap").slideToggle("slow");
});
$(function () {
startChatHub();
});
var nickname = "";
var avatarurl = "";
function startChatHub() {
var chat = $.connection.chatHub;
// Get the user name.
nickname = "<%= userName %>";
avatarurl = "<%= userImage %>";
chat.client.online = function (name) {
// Update list of users
if (name == nickname) {
$("#chat_body").append("<img src=" + avatarurl + " class='"avatar'" /><div id='"userlist'">" + name + "</div>");
$("#msg_head").append("<div id=userchat>" + name + "</div>");
} else {
$("#chat_body").append("<img src='"../Images/user.jpg'" class='"avatar'" /><div id='"userlist'">" + name + "</div>");
$("#users").append("<option value='"" + name + "'">" + name + "</option>");
}
};
chat.client.enters = function (name) {
$("#msg_body").append("<div ><i>" + name + " signs in</i></div>");
$("#users").append("<option value='"" + name + "'">" + name + "</option>");
//$("#chat_body").append("<div id=userlist>" + name + "</div>");
$("#chat_body").append("<img src='"../Images/user.jpg'" class='"avatar'" /><div id='"userlist'">" + name + "</div>");
};
// Create a function that the hub can call to broadcast chat messages.
chat.client.broadcastMessage = function (name, message) {
//Interpret smileys
message = message.replace(":)", "<img src='"../Images/Emoticons/smile-2.png'" class='"smileys'" />");
message = message.replace(":D", "<img src='"../Images/Emoticons/smile-1.png'" />");
message = message.replace(":o", "<img src='"../Images/Emoticons/smile-6.png'" />");
var currentdate = new Date();
var chattime = currentdate.getDate() + "/"
+ (currentdate.getMonth() + 1) + "/"
+ currentdate.getFullYear() + " @ "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
//display the message
$("#msg_body").append("<div class='"border'"><span style='"color:orange'">" + name + "</span>: " + " <span class='msg-time'>" + chattime + "</span>" + "</div>" + message);
//$("#msg_body").append("<img src=" + avatarurl + " class='"avatar'" />", message);
};
chat.client.disconnected = function (name) {
//Calls when someone leaves the page
$("#msg_body").append("<div ><i>" + name + " signs out</i></div>");
$("#chat_body div").remove(":contains('" + name + "')");
$("#users option").remove(":contains('" + name + "')");
};
//scroll bar
$(".chat_head").click(function () {
$("#chat_body").slideToggle("slow");
});
$("#msg_head").click(function () {
$(".msg_wrap").slideToggle("slow");
});
$(".close").click(function () {
$(".msg_box").hide();
});
$("#userlist").click(function () {
$(".msg_wrap").show();
$(".msg_box").show();
});
// Start the connection.
$.connection.hub.start().done(function () {
//Calls the notify method of the server
chat.server.notify(nickname, $.connection.hub.id);
$("#messagebox").keypress(function (e) {
if (e.keyCode == 13) {
var msg = "<div id=msg_b>" + $("#messagebox").val() + "</div>";
$("#messagebox").val("");
if ($("#users").val() == "All") {
//Call the Send method on the hub.
chat.server.send(nickname, msg);
$("#msg_body").scrollTop($("#msg_body")[0].scrollHeight);
} else {
chat.server.sendToSpecific(nickname, msg, $("#users").val());
//Clear text box and reset focus for next comment.
$("#messagebox").val("").focus();
$("#msg_body").scrollTop($("#msg_body")[0].scrollHeight);
}
}
});
});
}
</script>