這篇文章主要為大家展示了Asp.net使用SignalR實(shí)現(xiàn)發(fā)送圖片的案例,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“Asp.net使用SignalR實(shí)現(xiàn)發(fā)送圖片的案例”這篇文章吧。
員工經(jīng)過(guò)長(zhǎng)期磨合與沉淀,具備了協(xié)作精神,得以通過(guò)團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)公司堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念,因?yàn)椤皩W⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā),成都微信小程序,軟件按需網(wǎng)站設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。ASP.NET 是開源,跨平臺(tái),高性能,輕量級(jí)的 Web 應(yīng)用構(gòu)建框架,常用于通過(guò) HTML、CSS、JavaScript 以及服務(wù)器腳本來(lái)構(gòu)建網(wǎng)頁(yè)和網(wǎng)站。
一、引言
在這篇文章中,將實(shí)現(xiàn)如何使用SignalR來(lái)實(shí)現(xiàn)發(fā)送圖片的功能。
二、實(shí)現(xiàn)發(fā)送圖片的思路
我還是按照之前的方式來(lái)講述這篇文章,首先,讓我們來(lái)理清下實(shí)現(xiàn)發(fā)送圖片功能的思路。
圖片的顯示,除了直接指定圖片的路徑外(這種實(shí)現(xiàn)方式也稱為:http URI schema),還可以通過(guò)Data Uri Schema的方式來(lái)顯示圖片。這種方式允許在網(wǎng)頁(yè)里以字符串形式直接內(nèi)嵌圖片。形式如下所示:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
上面代碼的方式就是Data Url Schema方式來(lái)顯示圖片。關(guān)于Data Uri Schema的優(yōu)缺點(diǎn)有:
優(yōu)點(diǎn):
可以減少Http請(qǐng)求,因?yàn)槿绻闶褂胔ttp Uri Schema去指定圖片地址的話,這樣客戶端對(duì)每個(gè)圖片都需要發(fā)出Http請(qǐng)求,通過(guò)使用Data Uri的方式可以節(jié)省帶寬和Http請(qǐng)求
缺點(diǎn):
IE8以上的版本才支持,且限制大小不可超過(guò)32KB。
另外Base64的內(nèi)容會(huì)將圖片的內(nèi)容變大33%,但可以通過(guò)服務(wù)端啟用GZIP壓縮來(lái)減少增大內(nèi)容。盡管這樣,由于發(fā)送Http請(qǐng)求會(huì)附加很多額外的信息(如Http Header等),這樣累計(jì)下來(lái)一般內(nèi)容大小還是大于使用Base64編碼所增加的內(nèi)容。
因?yàn)镾ignalR是基于文本方式的傳輸,所以要實(shí)現(xiàn)圖片的發(fā)送。
只能通過(guò)發(fā)送圖片的Base64編碼的字符串到SignalR服務(wù)器,然后服務(wù)器再將該Base64字符串推送到需要接收?qǐng)D片的客戶端,客戶端再使用Data Uri的方式將圖片顯示在頁(yè)面上,從而完成圖片的傳輸。
當(dāng)然你也可以像Jabbr(一個(gè)使用SignalR實(shí)現(xiàn)即時(shí)聊天的開源項(xiàng)目)那樣將圖片上傳到Azure Bob Table中,然后再將Blob 的Uri 返回所有客戶端來(lái)顯示圖片。其實(shí)這樣的實(shí)現(xiàn)方式和我們這里實(shí)現(xiàn)類似,客戶端可以通過(guò)blob的Uri來(lái)讀取到圖片來(lái)顯示。總之實(shí)現(xiàn)思路就是將圖片二進(jìn)制文件的內(nèi)容間接轉(zhuǎn)換成文本的形式傳輸。
三、使用SignalR發(fā)送圖片的實(shí)現(xiàn)代碼
在具體實(shí)現(xiàn)之前,這里需要介紹一個(gè)文件上傳插件——boostrap-fileinput。該插件用來(lái)提供圖片的預(yù)覽功能。關(guān)于插件的具體使用可以參考github站點(diǎn)或本文章的實(shí)現(xiàn)代碼。
1、實(shí)現(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方法將圖片進(jìn)行顯示 } } /// <summary> /// 客戶端連接的時(shí)候調(diào)用 /// </summary> /// <returns></returns> public override Task OnConnected() { Trace.WriteLine("客戶端連接成功"); return base.OnConnected(); } }
2、HomeController的實(shí)現(xiàn)代碼,主要為每個(gè)客戶端生成隨機(jī)的用戶名,再將用戶名存入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)生隨機(jī)用戶名函數(shù) /// </summary> /// <param name="length">用戶名長(zhǎng)度</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、接下來(lái)就是實(shí)現(xiàn)前端頁(yè)面了。
<html> <head> <meta name="viewport" content="width=device-width" /> <title>使用SignalR實(shí)現(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> <p class="container"> <p>用戶名:<p id="username"></p></p> <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> </p> <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); // 引用自動(dòng)生成的集線器代理 var chat = $.connection.chatHub; // 定義服務(wù)器端調(diào)用的客戶端sendMessage來(lái)顯示新消息 chat.client.sendMessage = function (name, message) { // 向頁(yè)面添加消息 $('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); }; chat.client.receiveImage = function (name, base64) { // 向頁(yè)面添加消息 $('#discussion').append('<image class = "file-preview-image" style="width:auto;height:100px;" src=' + base64 + '/>'); }; // 設(shè)置焦點(diǎn)到輸入框 $('#message').focus(); // 開始連接服務(wù)器 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 調(diào)用服務(wù)器端集線器的Send方法 chat.server.send(userName, $('#message').val()); // 清空輸入框信息并獲取焦點(diǎn) $('#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); }); }); // 為顯示的消息進(jìn)行Html編碼 function htmlEncode(value) { var encodedValue = $('<p />').text(value).html(); return encodedValue; } </script> </body> </html>
四、運(yùn)行效果
經(jīng)過(guò)上面的三步,使用SignalR發(fā)送圖片的功能就已經(jīng)可以運(yùn)作了。接下來(lái)讓我們一起看看具體的運(yùn)行效果到底如何。
以上就是關(guān)于“Asp.net使用SignalR實(shí)現(xiàn)發(fā)送圖片的案例”的內(nèi)容,如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò),勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí),若想了解更多相關(guān)知識(shí)內(nèi)容,請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:Asp.net使用SignalR實(shí)現(xiàn)發(fā)送圖片的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源:http://www.muchs.cn/article44/djpohe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營(yíng)銷型網(wǎng)站建設(shè)、Google、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容