Asp.net使用SignalR實現(xiàn)發(fā)送圖片
一、引言
在前一篇已經(jīng)介紹了如何使用SignalR來實現(xiàn)聊天室的功能，在這篇文章中，將實現(xiàn)如何使用SignalR來實現(xiàn)發(fā)送圖片的功能。
二、實現(xiàn)發(fā)送圖片的思路
我還是按照之前的方式來講述這篇文章，首先，讓我們來理清下實現(xiàn)發(fā)送圖片功能的思路。
圖片的顯示，除了直接指定圖片的路徑外（這種實現(xiàn)方式也稱為：http URI schema)，還可以通過Data Uri Schema的方式來顯示圖片。這種方式允許在網(wǎng)頁里以字符串形式直接內(nèi)嵌圖片。形式如下所示：
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
上面代碼的方式就是Data Url Schema方式來顯示圖片。關(guān)于Data Uri Schema的優(yōu)缺點有：
優(yōu)點：
可以減少Http請求，因為如果你使用http Uri Schema去指定圖片地址的話，這樣客戶端對每個圖片都需要發(fā)出Http請求，通過使用Data Uri的方式可以節(jié)省帶寬和Http請求
缺點：
IE8以上的版本才支持，且限制大小不可超過32KB。
另外Base64的內(nèi)容會將圖片的內(nèi)容變大33%，但可以通過服務(wù)端啟用GZIP壓縮來減少增大內(nèi)容。盡管這樣，由于發(fā)送Http請求會附加很多額外的信息（如Http Header等），這樣累計下來一般內(nèi)容大小還是大于使用Base64編碼所增加的內(nèi)容。
因為SignalR是基于文本方式的傳輸，所以要實現(xiàn)圖片的發(fā)送。
只能通過發(fā)送圖片的Base64編碼的字符串到SignalR服務(wù)器，然后服務(wù)器再將該Base64字符串推送到需要接收圖片的客戶端，客戶端再使用Data Uri的方式將圖片顯示在頁面上，從而完成圖片的傳輸。
當(dāng)然你也可以像Jabbr（一個使用SignalR實現(xiàn)即時聊天的開源項目）那樣將圖片上傳到Azure Bob Table中，然后再將Blob 的Uri 返回所有客戶端來顯示圖片。其實這樣的實現(xiàn)方式和我們這里實現(xiàn)類似，客戶端可以通過blob的Uri來讀取到圖片來顯示?？傊畬崿F(xiàn)思路就是將圖片二進制文件的內(nèi)容間接轉(zhuǎn)換成文本的形式傳輸。
三、使用SignalR發(fā)送圖片的實現(xiàn)代碼
在具體實現(xiàn)之前，這里需要介紹一個文件上傳插件——boostrap-fileinput。該插件用來提供圖片的預(yù)覽功能。關(guān)于插件的具體使用可以參考github站點或本文章的實現(xiàn)代碼。
1、實現(xiàn)我們的集線器
public class ChatHub : Hub
{
/// <summary>
/// 供客戶端調(diào)用的服務(wù)器端代碼
/// </summary>
/// <param name="name"></param>
/// <param name="message"></param>
public void Send(string name,string message)
{
// 調(diào)用所有客戶端的sendMessage方法
Clients.All.sendMessage(name, message);
}
// 發(fā)送圖片
public void SendImage(string name,IEnumerable<ImageData> images)
{
foreach (var item in images ?? Enumerable.Empty<ImageData>())
{
if(String.IsNullOrEmpty(item.Image)) continue;
Clients.All.receiveImage(name, item.Image); // 調(diào)用客戶端receiveImage方法將圖片進行顯示
}
}
/// <summary>
/// 客戶端連接的時候調(diào)用
/// </summary>
/// <returns></returns>
public override Task OnConnected()
{
Trace.WriteLine("客戶端連接成功");
return base.OnConnected();
}
}
2、HomeController的實現(xiàn)代碼，主要為每個客戶端生成隨機的用戶名，再將用戶名存入Session中。
public class HomeController : Controller
{
private static readonly char[] Constant =
{
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
'W', 'X', 'Y', 'Z'
};
// GET: Home
public ActionResult Index()
{
Session["username"] = GenerateRandomName(4);
return View();
}
/// <summary>
/// 產(chǎn)生隨機用戶名函數(shù)
/// </summary>
/// <param name="length">用戶名長度</param>
/// <returns></returns>
private static string GenerateRandomName(int length)
{
var newRandom = new System.Text.StringBuilder(62);
var rd = new Random(DateTime.Now.Millisecond);
for (var i = 0; i < length; i++)
{
newRandom.Append(Constant[rd.Next(62)]);
}
return newRandom.ToString();
}
}
3、接下來就是實現(xiàn)前端頁面了。
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>使用SignalR實現(xiàn)發(fā)送圖片</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<link href="/Content/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div>用戶名:<p id="username"></p></div>
<input type="text" id="message" />
<br/>
<br />
<input id="fileinput" type="file">
<br />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<script type="text/javascript" src="~/Scripts/jquery-2.2.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="/Scripts/fileinput.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script>
$(function () {
var userName = '@Session["username"]';
$('#username').html(userName);
// 引用自動生成的集線器代理
var chat = $.connection.chatHub;
// 定義服務(wù)器端調(diào)用的客戶端sendMessage來顯示新消息
chat.client.sendMessage = function (name, message) {
// 向頁面添加消息
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
chat.client.receiveImage = function (name, base64) {
// 向頁面添加消息
$('#discussion').append('<image class = "file-preview-image" style="width:auto;height:100px;" src=' + base64
+ '/>');
};
// 設(shè)置焦點到輸入框
$('#message').focus();
// 開始連接服務(wù)器
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// 調(diào)用服務(wù)器端集線器的Send方法
chat.server.send(userName, $('#message').val());
// 清空輸入框信息并獲取焦點
$('#message').val('').focus();
});
});
$("#fileinput").fileinput({
allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
maxImageWidth: 700,
maxImageHeight: 700,
resizePreference: 'height',
maxFileCount: 1,
resizeImage: true
});
$("#fileinput").on('fileloaded', function (event, file, previewId, index, reader) {
var readers = new FileReader();
readers.onloadend = function () {
$(".file-preview-image").attr('src', readers.result);
};
readers.readAsDataURL(file);
});
$('#sendmessage').click(function() {
var imagesJson = $('.file-preview-image').map(function() {
var $this = $(this);
return {
image: $this.attr('src'),
filename: $this.attr('data-filename')
};
}).toArray();
chat.server.sendImage(userName, imagesJson);
});
});
// 為顯示的消息進行Html編碼
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
</body>
</html>
四、運行效果
經(jīng)過上面的三步，使用SignalR發(fā)送圖片的功能就已經(jīng)可以運作了。接下來讓我們一起看看具體的運行效果到底如何。
源碼下載：Asp.net使用SignalR實現(xiàn)發(fā)送圖片
到這里，本文的所有內(nèi)容的介紹就結(jié)束了，接下來的將介紹如何使用Html5 Notification API 來實現(xiàn)有新消息的提醒功能。
相關(guān)文章
這篇文章主要為大家詳細介紹了使用.net的Cache框架快速實現(xiàn)Cache操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章介紹了ABP框架中的事件總線功能，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
.NET6環(huán)境下實現(xiàn)MQTT通信及詳細代碼演示
本文詳細講解了.NET6環(huán)境下實現(xiàn)MQTT通信的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
從請求管道深入剖析HttpModule的實現(xiàn)機制圖文介紹
想要了解底層的原理必須對請求處理過程和頁面的生命周期有點了解才方便您入門學(xué)習(xí)一下內(nèi)容，本文將詳細介紹2012-11-11
asp.net 從客戶端中檢測到有潛在危險的 Request.Form 值錯誤解
asp.net程序運行時出現(xiàn)以下錯誤: “/news”應(yīng)用程序中的服務(wù)器錯誤。2009-05-05
假如我們想要從一個整型數(shù)組中取出其中是奇數(shù)的選項，其實現(xiàn)方式有很多，接下來通過三種方法的對比理解Lambda表達式的用途，需要了解的朋友可以參考下2012-12-12
Quartz是一個強大、開源、輕量級的任務(wù)調(diào)度框架,支持cron-like表達式其他一些優(yōu)秀的特性。這篇文章主要介紹了Quartz在.NET中的使用,需要的朋友可以參考下2021-12-12
asp.net core 集成swagger ui的原理解析
本文主要講解了如何對API進行分組，這里僅僅是舉了一個按照API功能進行分組的例子，其實在實際開發(fā)中，要按照何種方式分組，可以按照需求靈活定義，比如按照API版本進行分組2021-10-10
在實際項目開發(fā)過程中經(jīng)常需要在兩個頁面之間傳遞一些參數(shù)，本文在此總結(jié)出以下幾個傳遞參數(shù)的方法2009-09-09
nunit使用指南之—NUnit Quick Start...2007-03-03