Asp.net使用SignalR實現(xiàn)發(fā)送圖片的案例-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了Asp.net使用SignalR實現(xiàn)發(fā)送圖片的案例，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“Asp.net使用SignalR實現(xiàn)發(fā)送圖片的案例”這篇文章吧。

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，成都微信小程序，軟件按需網(wǎng)站設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

ASP.NET 是什么

ASP.NET 是開源，跨平臺，高性能，輕量級的 Web 應(yīng)用構(gòu)建框架，常用于通過 HTML、CSS、JavaScript 以及服務(wù)器腳本來構(gòu)建網(wǎng)頁和網(wǎng)站。

一、引言
在這篇文章中，將實現(xiàn)如何使用SignalR來實現(xiàn)發(fā)送圖片的功能。

二、實現(xiàn)發(fā)送圖片的思路
我還是按照之前的方式來講述這篇文章，首先，讓我們來理清下實現(xiàn)發(fā)送圖片功能的思路。

圖片的顯示，除了直接指定圖片的路徑外（這種實現(xiàn)方式也稱為：http URI schema)，還可以通過Data Uri Schema的方式來顯示圖片。這種方式允許在網(wǎng)頁里以字符串形式直接內(nèi)嵌圖片。形式如下所示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 
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的方式將圖片顯示在頁面上，從而完成圖片的傳輸。
當然你也可以像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>
  <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);
      // 引用自動生成的集線器代理
      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 = $('<p />').text(value).html();
    return encodedValue;
  }
  </script>
   
</body>
</html>

四、運行效果
經(jīng)過上面的三步，使用SignalR發(fā)送圖片的功能就已經(jīng)可以運作了。接下來讓我們一起看看具體的運行效果到底如何。

Asp.net使用SignalR實現(xiàn)發(fā)送圖片的案例

以上就是關(guān)于“Asp.net使用SignalR實現(xiàn)發(fā)送圖片的案例”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：Asp.net使用SignalR實現(xiàn)發(fā)送圖片的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://www.jbt999.com/article44/djpohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、Google、網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計公司、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容