SignalR聊天應用程序發送圖像

Question

我從教程中構建了SingnalR聊天應用程序MVC5 signalR 2.0： - http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started- with-signalr-20-and-mvc-5雖然有辦法發送圖像/附件，但它的工作都很出色嗎？ 和實際顯示在屏幕上的圖像？

Answer 1

我建議你 - 通過WebApi（無SignalR）發送圖像和消息，然后通過SignalR通知聊天中的所有參與者。

Answer 2

Jabbr（基於SignalR的基於IRC的基於Web的聊天系統）執行此操作的方式是從客戶端（通過服務器端上載處理程序）將文件上載到Azure blob容器，然后將直接blob URI發送回所有客戶端，直接訪問該文件。

看看這里的代碼： https ： //github.com/JabbR/JabbR

Answer 3

不.SignalR是文本基礎信令。 所有你能做的 - 是發送網址，json ..或者你可以考慮轉移圖像的base64字符串表示，但我敢打賭它不是非常友好的用例。

Answer 4

使用文件輸入bootstrap插件（krajee）上傳此文件您也可以在不使用此插件的情況下上傳文件。

   @section Page{

<script src="~/Scripts/bootstrap-switch.min.js"></script>
<script src="~/Scripts/Uploader/fileinput.js"></script>
<link href="~/Scripts/Uploader/fileinput.css" rel="stylesheet" />
<script>
    var itemHub = $.connection.ItemHub;
$(document).ready(function() {
    $.connection.hub.start().done(function() {

       //do any thing

    });
     $("#fileinput").fileinput({
         allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
         maxImageWidth: 700,
         maxImageHeight: 700,
         resizePreference: 'height',
         maxFileCount: 1,
         resizeImage: true
     });


     $("#fileinput").on('fileloaded', function (event, file, previewId, index, reader) {


         var readers = new FileReader();
         readers.onloadend = function () {
             $(".file-preview-image").attr('src', readers.result);
         }
         readers.readAsDataURL(file);
     });




    $('#btnSave').click(function() {
        var imagesJson = $('.file-preview-image').map(function () {
            var $this = $(this);
            return {
                image: $this.attr('src'),
                filename: $this.attr('data-filename')
            };
        }).toArray();

        itemHub.server.getByteArray(imagesJson);
    });
});

</script>
}

Hub類代碼

[HubName("ItemHub")]
public class ItemHub : Hub
{
      public void GetByteArray(IEnumerable<ImageData> images)
      {
         foreach (var item in images ?? Enumerable.Empty<ImageData>())
         {
            var tokens = item.Image.Split(',');
            if (tokens.Length > 1)
            {
               byte[] buffer = Convert.FromBase64String(tokens[1]);

            }
          }
      }
}

public class ImageData
{
    public string Description { get; set; }
    public string Filename { get; set; }
    public string Image { get; set; }
}