一、引言
在前一篇博文已經介紹了如何使用SignalR來實現聊天室的功能，在這篇文章中，將實現如何使用SignalR來實現發送圖片的功能。
二、實現發送圖片的思路
我還是按照之前的方式來講述這篇文章，首先，讓我們來理清下實現發送圖片功能的思路。
圖片的顯示，除了直接指定圖片的路徑外（這種實現方式也稱為：http URI schema)，還可以通過Data Uri Schema的方式來顯示圖片。這種方式允許在網頁里以字符串形式直接內嵌圖片。形式如下所示：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
上面代碼的方式就是Data Url Schema方式來顯示圖片。關於Data Uri Schema的優缺點有：
- 優點：
可以減少Http請求，因為如果你使用http Uri Schema去指定圖片地址的話，這樣客戶端對每個圖片都需要發出Http請求，通過使用Data Uri的方式可以節省帶寬和Http請求
缺點：
- IE8以上的版本才支持，且限制大小不可超過32KB。
- 另外Base64的內容會將圖片的內容變大33%，但可以通過服務端啟用GZIP壓縮來減少增大內容。盡管這樣，由於發送Http請求會附加很多額外的信息（如Http Header等），這樣累計下來一般內容大小還是大於使用Base64編碼所增加的內容。
關於更多Data Uri的介紹可以參考百度百科：Data URI
因為SignalR是基於文本方式的傳輸，所以要實現圖片的發送。
- 只能通過發送圖片的Base64編碼的字符串到SignalR服務器，
- 然后服務器再將該Base64字符串推送到需要接收圖片的客戶端，
- 客戶端再使用Data Uri的方式將圖片顯示在頁面上，從而完成圖片的傳輸。
當然你也可以像Jabbr（一個使用SignalR實現即時聊天的開源項目）那樣將圖片上傳到Azure Bob Table中，然后再將Blob 的Uri 返回所有客戶端來顯示圖片。其實這樣的實現方式和我們這里實現類似，客戶端可以通過blob的Uri來讀取到圖片來顯示。總之實現思路就是將圖片二進制文件的內容間接轉換成文本的形式傳輸。
三、使用SignalR發送圖片的實現代碼
在具體實現之前，這里需要介紹一個文件上傳插件——boostrap-fileinput。該插件用來提供圖片的預覽功能。關於插件的具體使用可以參考github站點或本文章的實現代碼。
- 第一步還是實現我們的集線器
public class ChatHub : Hub { /// <summary> /// 供客戶端調用的服務器端代碼 /// </summary> /// <param name="name"></param> /// <param name="message"></param> public void Send(string name,string message) { // 調用所有客戶端的sendMessage方法 Clients.All.sendMessage(name, message); } // 發送圖片 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); // 調用客戶端receiveImage方法將圖片進行顯示 } } /// <summary> /// 客戶端連接的時候調用 /// </summary> /// <returns></returns> public override Task OnConnected() { Trace.WriteLine("客戶端連接成功"); return base.OnConnected(); } }
2. HomeController的實現代碼，主要為每個客戶端生成隨機的用戶名，再將用戶名存入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> /// 產生隨機用戶名函數 /// </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. 接下來就是實現前端頁面了。
<html> <head> <meta name="viewport" content="width=device-width" /> <title>使用SignalR實現發送圖片</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; // 定義服務器端調用的客戶端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 + '/>'); }; // 設置焦點到輸入框 $('#message').focus(); // 開始連接服務器 $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // 調用服務器端集線器的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>
四、運行效果
經過上面的三步，使用SignalR發送圖片的功能就已經可以運作了。接下來讓我們一起看看具體的運行效果到底如何。
五、總結
到這里，本文的所有內容的介紹就結束了，接下來的將介紹如何使用Html5 Notification API 來實現有新消息的提醒功能。
本文所有源碼下載地址：SignalRSendFile