ASP. NET uses SIGNALR for sending pictures

First, Introduction
In the previous article, we introduced how to use SIGNALR to implement the function of a chat room, in this article, we will implement how to use SIGNALR to implement 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 implementation of the idea of sending a picture function.

The display of the picture, in addition to directly specifying the path of the picture (this implementation is also known as: http URI schema), you can also use the data URI schema to display the picture. This allows images to be embedded directly in a Web page in a string form. The form is as follows:

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

Advantages:
You can reduce the HTTP request, because if you use the HTTP URI schema to specify the image address, so that the client needs to make an HTTP request for each picture, you can save bandwidth and HTTP requests by using the data Uri

Disadvantages:

The version above IE8 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 it can be reduced by enabling gzip compression on the server side. In spite of this, there is a lot of extra information (such as HTTP headers) attached to the HTTP request, which accumulates the general content size or is larger than what is added using BASE64 encoding.

Because SIGNALR is a text-based transmission, it is possible to send a picture.

Only by sending the BASE64 encoded string of the picture to the SIGNALR server, the server then pushes the BASE64 string to the client that needs to receive the picture, and the client uses the data URI to display the picture on the page to complete the transfer of the picture.
Of course you can also upload a picture to azure Bob table like Jabbr (an open source project that uses SIGNALR for instant chatting), 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 be read through the Blob URI to the image to display. In short, the realization of the idea is to transfer the contents of the picture binary files indirectly into the form of text transmission.

Third, the implementation code to send pictures using SIGNALR
Before the implementation, we need to introduce a file upload plugin--boostrap-fileinput. The plugin is used to provide a preview of the image. You can refer to the GitHub site or the implementation code for this article for specific use of the plugin.

1. Realize our Hub

public class Chathub:hub {//<summary>///    Server-side code for client invocation/    //</summary>//    < param name= "name" ></param>    ///<param name= "message" ></param> public    void Send (string Name,string message)    {      //Call SendMessage method      Clients.All.sendMessage (name, message) for all clients;    }     Send picture 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); Call the client Receiveimage method to display the picture}}///<summary>///    </summary> when client connects    ///<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 the user name into the 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>//Generate a random user name function///</summary>//<param name= "Length" > Username length </param> <returns></returns> private static string generaterandomname (int length) {var newrandom = NE      W 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 working. Let's take a look at how the actual performance works.


Here, the introduction to everything in this article is over, and the next step is to use the HTML5 Notification API to implement reminders for new messages.