這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何在Asp.net中使用SignalR發(fā)送圖片，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體。

代碼如下:

上面代碼的方式就是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)思路就是將圖片二進(jì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
  {
    /// 

    /// 供客戶端調(diào)用的服務(wù)器端代碼
    /// 
    /// 
    /// 
    public void Send(string name,string message)
    {
      // 調(diào)用所有客戶端的sendMessage方法
      Clients.All.sendMessage(name, message);
    }

    // 發(fā)送圖片
    public void SendImage(string name,IEnumerable images)
    {
      foreach (var item in images ?? Enumerable.Empty())
      {
        if(String.IsNullOrEmpty(item.Image)) continue;
        Clients.All.receiveImage(name, item.Image); // 調(diào)用客戶端receiveImage方法將圖片進(jìn)行顯示
      }
    }

    /// 

    /// 客戶端連接的時候調(diào)用
    /// 
    /// 
    public override Task OnConnected()
    {
      Trace.WriteLine("客戶端連接成功");
      return base.OnConnected();
    }
  }

2、HomeController的實現(xiàn)代碼，主要為每個客戶端生成隨機(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();
    }

    /// 

    /// 產(chǎn)生隨機(jī)用戶名函數(shù)
    /// 
    /// 用戶名長度
    /// 
    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)前端頁面了。

  
  
  
  


  
    
用戶名: