I also consulted the articles:
- SignalR - Sending a message to a specific user using (IUserIdProvider) *NEW 2.0.0*
- signalR - send message to specific user
- Send message to specific user in signalr
I'm using signalR to chat with specific users in Asp.net WebForms. My wishes are as follows:
- I have a list of users in the database. I display it using Repeater.
- When I click on that User it opens the message dialog
divChatWindow - In the message dialog (
divChatWindow) I have 1 input + 1 button to send the message content.
When the button sends the message click
$('#btsendmessenger').click(function().... I call the event:
chatHub.server.sendPrivateMessage(toUserID, msg, datetext, userAvatar);
However, how do I know the value of toUserID ---> //The person who received the message
Here are the codes that I am using:
I have the following data pages: Chat.aspx
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ClientIDMode="Static">
<ContentTemplate>
//User chat list displayed from database
<ul id="_listus">
<asp:Repeater ID="rptListChat" runat="server" ClientIDMode="Static">
<ItemTemplate>
<li data-value='<%# Eval("Code") %>' data-user='<%# Eval("fromUserIDGet") %>'>
<div>
<div>
<img src='<%# Eval("fromUserAvatar") %>' class="p5 radius30">
</div>
<div>
<div>
<div class="font-600 text-15"><%# Eval("fromUser") %></div>
<span class="font-500 text-13"><%# Eval("lastMessenge") %> <span class="text-10"><%# Eval("lastDayMessenge") %></span></span>
</div>
</div>
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Button ID="btngetDetail" runat="server" OnClick="btngetDetail_Click" ClientIDMode="Static" CssClass="none" />
//Div showing chat dialog
<asp:Panel ID="pnDetailchat" runat="server" Visible="false">
<div id="divChatWindow"></div>
//Input to enter message content and send button
<div>
<div>
<asp:TextBox ID="_txtmessenger" AutoCompleteType="None" runat="server" ClientIDMode="Static" CssClass="form_cmt__" />
</div>
<div id="btsendmessenger"><i class="las la-paper-plane"></i></div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<input id="hdId" type="hidden" />
<input id="hdUserName" type="hidden" />
<input id="hdUserAvatar" runat="server" ClientIDMode="Static" type="hidden" />
Javascript handling signalR
<script src="scripts/jquery.signalR-2.4.3.min.js"></script>
<script src="signalr/hubs"></script>
<script>
$("#_listus").on('click', 'li', function (e) {
$('#btngetDetail').click();
});
</script>
<script>
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
if (document.getElementById("pnDetailchat")) {
/*chat*/
$(function () {
// Declare a proxy to reference the hub.
var chatHub = $.connection.chatHub;
registerClientMethods(chatHub);
// Start Hub
$.connection.hub.start().done(function () {
registerEvents(chatHub)
});
});
function registerEvents(chatHub) {
var name = '<%= this.UserID %>';
if (name.length > 0) {
chatHub.server.connect(name);
}
$('#btsendmessenger').click(function () {
var msg = $("#_txtmessenger").val();
if (msg.length > 0 && msg.trim().replace(/'/g, '')) {
var userName = $('#hdUserName').val();
var userAvatar = $('#hdUserAvatar').val();
var date = new Date();
var datetext = date.getHours() + ":" + date.getMinutes();
$("#_txtmessenger").val('');
document.getElementById('_txtmessenger').focus();
AddMessage(userName, msg, datetext, userAvatar);
var toUserID = ...**//How to get ConnectionId of specific user for chat**
chatHub.server.sendPrivateMessage(toUserID, msg, datetext, userAvatar);
}
else {
document.getElementById('_txtmessenger').focus();
document.getElementById("_txtmessenger").value = "";
}
});
$("#_txtmessenger").keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
$('#btsendmessenger').click();
}
});
document.getElementById('_txtmessenger').focus();
}
function registerClientMethods(chatHub) {
// Calls when user successfully logged in
chatHub.client.onConnected = function (id, userName, allUsers, messages, times) {
$('#hdId').val(id);
$('#hdUserName').val(userName);
// Add Existing Messages
for (i = 0; i < messages.length; i++) {
AddMessage(messages[i].UserName, messages[i].Message, messages[i].Time, messages[i].UserImage);
}
}
chatHub.client.messageReceived = function (userName, message, time, userimg) {
AddMessage(userName, message, time, userimg);
}
}
function AddMessage(userName, message, time, userimg) {
var CurrUser = $('#hdUserName').val();
var Side = '_cusms left';
if (CurrUser == userName) {
Side = '_myms right';
}
var divChat =
'<div class="direct-chat-msg mb-20 ' + Side + '">' +
'<div class="flex gap10 item_chat_">' +
'<div class="w50">' +
'<img src="' + userimg + '" class="radius30 overflow-hidden">' +
'</div>' +
'<div class="flex-col w50per">' +
'<div class="info_us flex">' +
'<div class="font-600 text-14">' + userName + '</div>' +
'<div class="font-300 text-12">' + time + '</div>' +
'</div>' +
'<div class="_messenger">' + message + '</div>' +
'</div>' +
'</div >' +
'</div>';
$('#divChatWindow').append(divChat);
var height = $('#divChatWindow')[0].scrollHeight;
$('#divChatWindow').scrollTop(height);
}
}
}
});
};
</script>
Chat.aspx.cs
public string UserID = "";
protected void Page_Load(object sender, EventArgs e)
{
LoadInfoUser();
LoadListChatUs();
}
protected void LoadInfoUser()
{
string getuserid = "Select ....";
DataTable dtgetuserid = XLDL.ReadDb(getuserid);
...
{
UserID = dtgetuserid.Rows[0]["UserID"].ToString();
}
}
protected void LoadListChatUs()
{
string getlistchat = "Select ....";
DataTable getlistchat = XLDL.ReadDb(getlistchat);
...
{
rptListChat.DataSource = getlistchat;
rptListChat.DataBind();
}
}
protected void btngetDetail_Click(object sender, EventArgs e)
{
pnDetailchat.Visible = true;
}
ChatHub.cs
public void Connect(string userID)
{
userid = userID;
var id = Context.ConnectionId;
if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
{
string logintime = DateTime.Now.ToString();
ConnectedUsers.Add(new Users
{
ConnectionId = id,
UserName = userName,
UserImage = imgavatar
});
// send to caller
Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);
// send to all except caller client
Clients.AllExcept(id).onNewUserConnected(id, userName, imgavatar, logintime);
}
}
public void SendPrivateMessage(string toUserId, string message, string time, string userAvatar)
{
string fromUserId = Context.ConnectionId;
var toUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == toUserId);
var fromUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == fromUserId);
if (toUser != null && fromUser != null)
{
// send to
Clients.Client(toUserId).sendPrivateMessage(fromUserId, fromUser.UserName, message, time, userAvatar);
// send to caller user
Clients.Caller.sendPrivateMessage(toUserId, fromUser.UserName, message, time, userAvatar);
}
}
Assume an online user in the user list can receive a real-time message when the event $('#btsendmessenger').click(function()....to a specific user. I'm pretty vague about the value of var toUserID = ?
Looking forward to everyone's help. Thank you!
