Asp.net使用SignalR實作傳送圖片-C#.Net教程-PHP中文網

Asp.net使用SignalR實作傳送圖片

高洛峰

發布： 2018-05-28 16:22:20

原創

2832 人瀏覽過

一、引言
　　在前一篇已經介紹瞭如何使用SignalR來實現聊天室的功能，在這篇文章中，將實現如何使用SignalR來實現發送圖片的功能。

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

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

登入後複製

　　上面程式碼的方式就是Data Url Schema方式來顯示圖片。關於Data Uri Schema的優缺點有：

優點：
　　可以減少Http請求，因為如果你使用http Uri Schema去指定圖片位址的話，這樣客戶端對每個圖片都需要發出Http請求，透過使用Data Uri的方式可以節省頻寬和Http請求

缺點：

　　IE8以上的版本才支持，且限制大小不可超過32KB。
　　另外Base64的內容會將圖片的內容變大33%，但可以透過服務端啟用GZIP壓縮來減少增大內容。雖然這樣，由於發送Http請求會附加許多額外的資訊（如Http Header等），因此累積下來一般內容大小還是大於使用Base64編碼所增加的內容。

　　因為SignalR是基於文字方式的傳輸，所以要實現圖片的發送。

只能透過傳送圖片的Base64編碼的字串到SignalR伺服器，然後伺服器再將該Base64字串推送到需要接收圖片的客戶端，客戶端再使用Data Uri的方式將圖片顯示在頁面上，從而完成圖片的傳輸。
　　當然你也可以像Jabbr（一個使用SignalR實作即時聊天的開源專案）那樣將圖片上傳到Azure Bob Table中，然後再將Blob 的Uri 傳回所有客戶端來顯示圖片。其實這樣的實作方式和我們這裡實作類似，客戶端可以透過blob的Uri來讀取到圖片來顯示。總之實現想法就是將圖片二進位的內容間接轉換成文字的形式傳輸。

三、使用SignalR傳送圖片的實作程式碼
　　在具體實作之前，這裡需要介紹一個檔案上傳外掛程式－boostrap-fileinput。該插件用來提供圖片的預覽功能。關於外掛程式的具體使用可以參考github網站或本文章的實作程式碼。

1、實作我們的集線器

public class ChatHub : Hub
  {
    /// 
    /// 供客户端调用的服务器端代码
    /// 
    /// 
    /// 
    public void Send(string name,string message)
    {
      // 调用所有客户端的sendMessage方法
      Clients.All.sendMessage(name, message);
    }
 
    // 发送图片
    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); // 调用客户端receiveImage方法将图片进行显示
      }
    }
 
    /// 
    /// 客户端连接的时候调用
    /// 
    /// 
    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();
    }
 
    /// 
    /// 产生随机用户名函数
    /// 
    /// 用户名长度
    /// 
    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、接下來就是實作前端頁面了。

使用SignalR实现发送图片

用户名: