Asp.net verwendet SignalR zum Senden von Bildern

1. Einführung
Im vorherigen Artikel haben wir vorgestellt, wie SignalR zum Implementieren der Chatroom-Funktion verwendet wird. In diesem Artikel werden wir implementieren, wie SignalR zum Implementieren der Funktion zum Senden von Bildern verwendet wird.

2. Die Idee der Implementierung der Funktion zum Senden von Bildern
Ich werde diesen Artikel auf die gleiche Weise wie zuvor erläutern. Lassen Sie uns zunächst die Idee der Implementierung klären Funktion zum Senden von Bildern.

Zusätzlich zur direkten Angabe des Pfads des Bildes (diese Implementierungsmethode wird auch als http-URI-Schema bezeichnet) kann das Bild auch über das Daten-URI-Schema angezeigt werden. Mit dieser Methode können Bilder in Form von Strings direkt in die Webseite eingebettet werden. Das Formular lautet wie folgt:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

Der obige Code verwendet das Daten-URL-Schema, um Bilder anzuzeigen. Die Vor- und Nachteile des Daten-URI-Schemas sind:

Vorteile:
Es kann HTTP-Anfragen reduzieren, denn wenn Sie das HTTP-URI-Schema zur Angabe der Bildadresse verwenden, muss der Client HTTP-Anfragen für jedes Bild stellen . Sie können Bandbreite und HTTP-Anfragen sparen, indem Sie Daten-URI verwenden.

Nachteile:

Wird nur von IE8 und höher unterstützt und die Größenbeschränkung darf 32 KB nicht überschreiten.
Darüber hinaus erhöht Base64-Inhalt die Größe des Bildes um 33 %, aber die GZIP-Komprimierung kann auf dem Server aktiviert werden, um die Größe des Inhalts zu reduzieren. Da beim Senden einer HTTP-Anfrage jedoch viele zusätzliche Informationen (z. B. HTTP-Header usw.) angehängt werden, ist die kumulative Inhaltsgröße immer noch größer als der Inhalt, der durch die Verwendung der Base64-Codierung erhöht wird.

Da SignalR auf Textübertragung basiert, ist es notwendig, Bilder zu senden.

Sie können nur die Base64-codierte Zeichenfolge des Bildes an den SignalR-Server senden. Anschließend sendet der Server die Base64-Zeichenfolge an den Client, der das Bild empfangen muss, und der Client verwendet den Daten-URI dazu Zeigen Sie das Bild auf der Seite an, um die Bildübertragung abzuschließen.
Natürlich können Sie auch Bilder wie Jabbr (ein Open-Source-Projekt, das SignalR zur Implementierung von Instant-Chat verwendet) in Azure Bob Table hochladen und dann den Uri des Blobs an alle Clients zurückgeben, um die Bilder anzuzeigen. Tatsächlich ähnelt diese Implementierung unserer Implementierung hier. Der Client kann das Bild lesen und über den URI des Blobs anzeigen. Kurz gesagt besteht die Implementierungsidee darin, den Inhalt der Bildbinärdatei indirekt zur Übertragung in Text umzuwandeln.

3. Implementierungscode zum Senden von Bildern mit SignalR
Vor der spezifischen Implementierung müssen wir hier ein Datei-Upload-Plug-in einführen – boostrap-fileinput. Dieses Plug-in wird verwendet, um eine Bildvorschaufunktion bereitzustellen. Informationen zur spezifischen Verwendung des Plug-Ins finden Sie auf der Github-Website oder im Implementierungscode dieses Artikels.

1. Implementieren Sie unseren Hub

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. Der Implementierungscode von HomeController generiert hauptsächlich einen zufälligen Benutzernamen für jeden Client und speichert den Benutzernamen dann in der Sitzung.

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. Der nächste Schritt ist die Implementierung der Frontend-Seite.

<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>
  <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 = &#39;@Session["username"]&#39;;
      $(&#39;#username&#39;).html(userName);
      // 引用自动生成的集线器代理
      var chat = $.connection.chatHub;
      // 定义服务器端调用的客户端sendMessage来显示新消息
 
      chat.client.sendMessage = function (name, message) {
        // 向页面添加消息
        $(&#39;#discussion&#39;).append(&#39;<li><strong>&#39; + htmlEncode(name)
          + &#39;</strong>: &#39; + htmlEncode(message) + &#39;</li>&#39;);
      };
 
      chat.client.receiveImage = function (name, base64) {
        // 向页面添加消息
        $(&#39;#discussion&#39;).append(&#39;<image class = "file-preview-image" style="width:auto;height:100px;" src=&#39; + base64
          + &#39;/>&#39;);
      };
 
      // 设置焦点到输入框
      $(&#39;#message&#39;).focus();
      // 开始连接服务器
      $.connection.hub.start().done(function () {
        $(&#39;#sendmessage&#39;).click(function () {
          // 调用服务器端集线器的Send方法
          chat.server.send(userName, $(&#39;#message&#39;).val());
          // 清空输入框信息并获取焦点
          $(&#39;#message&#39;).val(&#39;&#39;).focus();
        });
      });
 
      $("#fileinput").fileinput({
        allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
        maxImageWidth: 700,
        maxImageHeight: 700,
        resizePreference: &#39;height&#39;,
        maxFileCount: 1,
        resizeImage: true
      });
 
      $("#fileinput").on(&#39;fileloaded&#39;, function (event, file, previewId, index, reader) {
        var readers = new FileReader();
        readers.onloadend = function () {
          $(".file-preview-image").attr(&#39;src&#39;, readers.result);
        };
        readers.readAsDataURL(file);
      });
 
      $(&#39;#sendmessage&#39;).click(function() {
        var imagesJson = $(&#39;.file-preview-image&#39;).map(function() {
          var $this = $(this);
          return {
            image: $this.attr(&#39;src&#39;),
            filename: $this.attr(&#39;data-filename&#39;)
          };
        }).toArray();
 
        chat.server.sendImage(userName, imagesJson);
      });
    });
 
  // 为显示的消息进行Html编码
  function htmlEncode(value) {
    var encodedValue = $(&#39;<p />&#39;).text(value).html();
    return encodedValue;
  }
  </script>
   
</body>
</html>

4. Bedienungseffekt
Nach den oben genannten drei Schritten kann die Funktion zum Senden von Bildern mit SignalR bereits bedient werden. Schauen wir uns als nächstes den konkreten Betriebseffekt an.

An diesem Punkt ist die Einführung aller Inhalte dieses Artikels beendet. Als Nächstes stellen wir vor, wie die Html5-Benachrichtigungs-API verwendet wird, um die Erinnerungsfunktion von neu zu implementieren Nachrichten.

Weitere Artikel im Zusammenhang mit Asp.net, das SignalR zum Senden von Bildern verwendet, finden Sie auf der chinesischen PHP-Website!