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; }
}

SignalR聊天应用程序发送图像

4 个答案: