ASP.NET WebForm 和 Bootstrap 的 SignalR 聊天应用 - 第三部分
5.00/5 (37投票s)
带表情符号/笑脸和文件附件的 SignalR 实时聊天应用
引言
在上一篇文章中，我们学习了如何使用 SignalR 和 Bootstrap 创建一个实时聊天应用程序，到目前为止，我们已经学习了群聊创建、私聊创建、标题栏通知提醒系统、消息计数和清空聊天记录。现在，我们将学习聊天应用程序中最热门的功能，即“表情符号”或“笑脸”，这使得我们的应用程序更具交互性。另一个重要且有用的功能是通过聊天发送附件，在文件附件中，我们可以发送图片/图像、Word、PDF、Excel 和文本文件。此外，我们还可以显示/下载图片/文档文件。
表情符号是一种用于在电子通信中表达想法或情感的小数字图像或图标，表情符号用小小的笑脸让你的短信更加生动。我们将以最简单的方式学习表情符号的实现。市面上有许多表情符号包，但在这里我们将集成“EmojinOne”。在我看来，这是网络上最容易获得的最佳笑脸包。此外，我们还将集成“SlimScroll”Jquery 插件，它提供交互式内容滚动条。
对于那些错过了第一篇文章的人，请参阅文章“ASP.NET WebForm 和 Bootstrap 的 SignalR 聊天应用 - 第一部分”，您也可以下载项目文件。
对于那些错过了上一篇文章的人，请参阅上一篇文章“ASP.NET WebForm 和 Bootstrap 的 SignalR 聊天应用 - 第二部分”，您也可以下载项目文件，因此我们将继续使用上一篇文章的项目文件。
集成表情符号
由于我们将继续使用上一篇文章的项目文件，首先我们将集成表情符号。需要以下引用文件：
您可以下载可在cdnjs.com 上找到的表情符号引用文件。将 CSS 文件添加到“Content”目录，将 JavaScript 文件添加到“Scripts”文件夹。在将这些文件添加到项目后，在“Chat.aspx”设计页面的 header 标签内添加这些文件。
<!--EmojiOneArea -->
<link href="Content/emojionearea.min.css" rel="stylesheet" />
<script src="Scripts/emojionearea.js"></script>
添加完这些文件后，现在我们需要定义表情符号区域，我们可以在其中添加表情符号，因此我们在这里将消息文本框定义为表情符号区域。只需按如下方式编写 Jquery 函数：
$(function () {
$("#txtMessage").emojioneArea();
});
现在运行您的项目，您将看到带有消息文本框的表情符号框，如下所示：
我们需要对私聊框应用相同的功能；我们动态创建私聊框并使用 Jquery 嵌入此代码，因此我们需要动态定义代码，因为每次 ChatBox Div 的 ID 都会发生变化，因此基于动态 ID，我们需要找到 Message Textbox 并应用该函数。
$('#PriChatDiv').append($div);
var msgTextbox = $div.find("#txtPrivateMessage");
$(msgTextbox).emojioneArea();
再次运行项目，您会看到表情符号也已应用到私聊框。现在我们需要在聊天中解析这些表情符号，当我们收到包含表情符号的消息时，它会被解析，这里有几个将表情符号进行转换/解析的方法，我们使用“.unicodeToImage(str)”方法来解析表情符号，它会将笑脸 Unicode 转换为图像。
function ParseEmoji(div) {
var input = $(div).html();
var output = emojione.unicodeToImage(input);
$(div).html(output);
}
这里，我们使用在线表情符号图像资源，如果您想在本地使用这些资源，那么您需要下载 EmojiOne 笑脸包并在“emojionearea.js”文件中更改资源路径。
示例
//var cdn_base = "http://DomainName/Emoji/dist/emojione/";
var cdn_base = "https://cdnjs.cloudflare.com/ajax/libs/emojione/";
// var cdn_base = "https://:49251/Emoji/dist/emojione/";
如果我们本地使用这些资源，通过减少图像的加载时间，将提高您的应用程序性能。添加表情符号后的输出将如下所示：
添加发送图片/文件附件功能
通过聊天发送图片文件，将为我们的应用程序增加一项非凡的功能，我们可以发送图片、Word、文档、文本文件、PDF 文件和 Excel 文件。在这里，我们为发送附件添加了一个单独的按钮，我们将使用 Ajax 工具“AsyncFileUpload”。因此，我们需要将 AjaxToolkit 添加到我们的项目引用中，我们在上一篇文章中已经解释了如何使用 Nuget 包管理器将包添加到项目中。所以使用 Nuget 包管理器添加包：
PM> Install-Package AjaxControlToolkit -Version 17.1.1
现在为附件按钮编写代码，因为我们使用 AsyncFileUpload 来上传文件，但我们不显示它，因为它被包装在按钮内，所以用户只能看到按钮，当它点击附件按钮时，FileUpload 事件将被触发，附件按钮的设计代码：
<span class="upload-btn-wrapper">
<button id="btnFile" class="btn btn-default btn-flat">
<i class="glyphicon glyphicon-paperclip"></i></button>
<ajaxToolkit:AsyncFileUpload OnClientUploadComplete="uploadComplete"
runat="server" ID="AsyncFileUpload1" ThrobberID="imgLoader"
OnUploadedComplete="FileUploadComplete" OnClientUploadStarted="uploadStarted" />
</span>
“AsyncFileUpload”在点击 FileUpload 时会生成三个事件，其中两个是客户端事件，一个是服务器端事件，“OnUploadedComplete”是服务器端事件，我们在其中将文件存储在特定目录中。
protected void FileUploadComplete(object sender, EventArgs e)
{
string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
AsyncFileUpload1.SaveAs(Server.MapPath(this.UploadFolderPath) + filename);
}
首先，它会调用客户端事件“OnClientUploadStarted”，因为我们使用临时的 HTML image 标签来显示和加载图像，在加载图像时，我们暂时显示它以获取图像属性，我们将在稍后显示聊天中的图像时使用这些属性，因此在此函数中，我们正在清除临时图像路径。
function uploadStarted() {
$get("imgDisplay").style.display = "none";
}
有两个函数用于通过检查请求文件的扩展名来验证上传文件，此函数仅验证图像和文档文件，您可以根据需要添加更多扩展名，文件验证代码：
function IsValidateFile(fileF) {
var allowedFiles = [".doc", ".docx", ".pdf", ".txt", ".xlsx", ".xls", ".png", ".jpg", ".gif"];
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
if (!regex.test(fileF.toLowerCase())) {
alert("Please upload files having extensions: " + allowedFiles.join(', ') + " only.");
return false;
}
return true;
}
在这里，我们将图像文件和文档文件分开，因为我们将为两者分配不同的设计，对于图像文件，我们在聊天中显示图像预览，对于文档文件，我们只显示文档图标。
function IsImageFile(fileF) {
var ImageFiles = [".png", ".jpg", ".gif"];
var regex = new RegExp("(" + ImageFiles.join('|') + ")$");
if (!regex.test(fileF.toLowerCase())) {
return false;
}
return true;
}
上传图像/文档文件后，我们在聊天中显示它，并显示文件属性，如文件大小、图像尺寸和文件类型，用户可以查看完整图像，也可以下载图像/文档。
function uploadComplete(sender, args) {
var imgDisplay = $get("imgDisplay");
imgDisplay.src = "images/loading.gif";
imgDisplay.style.cssText = "";
var img = new Image();
img.onload = function () {
imgDisplay.style.cssText = "Display:none;";
imgDisplay.src = img.src;
};
imgDisplay.src = "<%# ResolveUrl(UploadFolderPath) %>" + args.get_fileName();
var chatHub = $.connection.chatHub;
var userName = $('#hdUserName').val();
var date = GetCurrentDateTime(new Date());
var sizeKB = (args.get_length() / 1024).toFixed(2);
var msg1;
if (IsValidateFile(args.get_fileName())) {
if (IsImageFile(args.get_fileName())) {
msg1 =
'<div class="box-body">' +
'<div class="attachment-block clearfix">' +
'<a><img id="imgC" style="width:100px;" class="attachment-img" src="' +
imgDisplay.src + '" alt="Attachment Image"></a>' +
'<div class="attachment-pushed"> ' +
'<h4 class="attachment-heading"><i class="fa fa-image"> ' +
args.get_fileName() + ' </i></h4> <br />' +
'<div id="at" class="attachment-text"> Dimensions : ' +
imgDisplay.height + 'x' + imgDisplay.width + ', Type: ' + args.get_contentType() +
'</div>' +
'</div>' +
'</div>' +
'<a id="btnDownload" href="' + imgDisplay.src + '"
class="btn btn-default btn-xs" download="' + args.get_fileName() + '">
<i class="fa fa fa-download"></i> Download</a>' +
'<button type="button" id="ShowModelImg" value="' + imgDisplay.src + '"
class="btn btn-default btn-xs"><i class="fa fa-camera"></i> View</button>' +
'<span class="pull-right text-muted">File Size : ' + sizeKB + ' Kb</span>' +
'</div>';
}
else {
msg1 =
'<div class="box-body">' +
'<div class="attachment-block clearfix">' +
'<a><img id="imgC" style="width:100px;" class="attachment-img"
src="images/file-icon.png" alt="Attachment Image"></a>' +
'<div class="attachment-pushed"> ' +
'<h4 class="attachment-heading"><i class="fa fa-file-o"> ' +
args.get_fileName() + ' </i></h4> <br />' +
'<div id="at" class="attachment-text"> Type: ' + args.get_contentType() +
'</div>' +
'</div>' +
'</div>' +
'<a id="btnDownload" href="' + imgDisplay.src + '"
class="btn btn-default btn-xs" download="' + args.get_fileName() + '">
<i class="fa fa fa-download"></i> Download</a>' +
'<a href="' + imgDisplay.src + '" target="_blank"
class="btn btn-default btn-xs"><i class="fa fa-camera"></i> View</a>' +
'<span class="pull-right text-muted">File Size : ' + sizeKB + ' Kb</span>' +
'</div>';
}
chatHub.server.sendMessageToAll(userName, msg1, date);
}
imgDisplay.src = '';
}
当我们点击查看按钮时，图像文件将在模态弹出窗口中打开，为此我们使用 Booststrap 模态，我们将图像路径传递到按钮值中，并将此路径应用于模态内的图像，然后显示模态。
$(document).on('click', '#ShowModelImg', function () {
$get("ImgModal").src = this.value;
$('#ShowPictureModal').modal('show');
});
当 ChatBox 中的消息数量增加时，默认的浏览器垂直滚动条将应用于 Chatbox，但在这里我们将添加一些时尚的滚动条，所以我们将 Jquery “SlimScroll”添加到 Chatbox 中。将通过 Nuget 包管理器添加此项：
PM> Install-Package Jquery.slimScroll -Version 1.3.1
在设计页面的 header 标签中添加 SlimScroll JavaScript 文件。
<!--Jquery slimScroll -->
<script type="text/javascript" src="Scripts/jquery.slimscroll.min.js"></script>
// Apply Slim Scroll Bar in Group Chat Box
$('#divChatWindow').slimScroll({
height: height
});
// Apply Slim Scroll Bar in Private Chat Box
var ScrollHeight = $('#' + ctrId).find('#divMessage')[0].scrollHeight;
$('#' + ctrId).find('#divMessage').slimScroll({
height: ScrollHeight
});
我们必须将 SlimScroll 应用于两个聊天框，即私聊框和群聊框，应用后，您可以看到 SlimScroll 的效果如下：
输出
现在运行项目，您将看到最终输出如下所示：
结论
在这里，我们学习了如何在 SignalR 的私聊和群聊中集成表情符号，以及如何使用 Ajax Toolkit 组件“AsyncFileUpload”通过聊天发送附件。因此，我们学习了 AsyncFileUpload 的集成及其概念，如客户端事件和服务器端事件。还学习了获取文件属性和显示上传文件属性、在模态弹出窗口中显示图像文件、下载文件以及 Jquery 插件“SlimScroll”集成滚动条。所以这是聊天应用程序的最后一篇文章。
希望这对您有所帮助，并且您会喜欢这篇文章，如果您认为我们可以在项目中添加更多功能，请提出建议……如果我喜欢，我将写另一篇包含更多新功能文章。请不要忘记下载附带的项目源代码以供参考并查看完整源代码。感谢您的阅读……
请在下面的评论部分提供您的宝贵反馈。