asp.net use signalr to send pictures _ practical tips

First, the introduction
In the previous article has introduced how to use SIGNALR to achieve the function of the chat room, in this article, will implement how to use SIGNALR to achieve the function of sending pictures.

Second, the realization of the idea of sending pictures
I still follow the previous way to tell this article, first of all, let us clarify the realization of the idea of the function of sending pictures.

The display of the picture, in addition to directly specify the path of the picture (this implementation is also known as the HTTP URI schema), you can also use the data URI schema to display the picture. This allows you to embed a picture directly in a Web page as a string. The form looks like this:

Copy Code code as follows:

7LJMRAAAAGELEQVQIW2P4DWCMDAXAFBVMAHEQMYGCACEHG8ELXTBPAAAAAELFTKSUQMCC "/>

The code above is in the form of a data URL schema to display the picture. The advantages and disadvantages of the data Uri schema are:

Advantages:
HTTP requests can be reduced because if you use an HTTP URI schema to specify a picture's address, the client needs to send an HTTP request for each picture, which can save bandwidth and HTTP requests by using the data Uri

Disadvantages:

IE8 above version is supported, and the limit size cannot exceed 32KB.
In addition, the content of the Base64 will increase the content of the picture by 33%, but you can enable gzip compression through the service side to reduce the size of the content. Even so, because sending an HTTP request appends a lot of additional information (such as an HTTP header, for example), the general content size is larger than what is added by using the BASE64 encoding.

Because SIGNALR is a text-based transmission, you want to implement the sending of pictures.

Only by sending the picture's BASE64 encoded string to the SIGNALR server, the server then pushes the BASE64 string to the client that needs to receive the picture, and the client then uses the data URI to display the picture on the page, thus completing the transfer of the picture.
Of course you can upload a picture to azure Bob table like Jabbr (an Open-source project that uses SIGNALR for instant chat), and then return the Blob's URI to all clients to display the picture. In fact, this implementation is similar to our implementation here, the client can use the URI of the blob to read the picture to display. In short, the realization of the idea is to convert the contents of the image binaries to the form of text transfer indirectly.

Third, use SIGNALR to send the implementation code of the picture
before you realize this, you need to introduce a file upload plugin--boostrap-fileinput. This plugin is used to provide a preview of the picture. The specific use of plug-ins can refer to the GitHub site or the implementation code of this article.

1, the realization of our hub

 server-side code///<summary>///for clients to invoke Chathub:hub {///& lt;/summary>///<param name= "name" ></param>///<param name= "message" ></param> Pub LIC void Send (string name,string message) {//Call SendMessage method Clients.All.sendMessage for all clients (name, message
    );  //Send picture public void Sendimage (string name,ienumerable<imagedata> images) {foreach (var item Images?? Enumerable.empty<imagedata> ()) {if (String.IsNullOrEmpty) (item.
        Image)) continue; Clients.All.receiveImage (name, item. Image); Call the client Receiveimage method to display the picture}///<summary>///Client connection calls///</summary>///&
      Lt;returns></returns> public override Task onconnected () {trace.writeline ("Client connection succeeded"); Return base.
    Onconnected (); }
  }

2, HomeController implementation code, mainly for each client to generate a random user name, and then save the user name into 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>///generates random user name functions///</summary>///<param name= "Length" > Username length &LT;/PARAM&G
    T <returns></returns> private static string generaterandomname (int length) {var newrandom = n
      EW 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, the next step is to implement the front-end page.

Four, the Operation effect
With the three steps above, the ability to send pictures using SIGNALR is already operational. Let's take a look at how the actual operation works.

SOURCE download: asp.net use SIGNALR implementation to send pictures

Here, the introduction to all the content of this article is over, and the next step is to use the HTML5 Notification API to implement reminders with new messages.