[英]SignalR chat application sending images
I have build the SingnalR chat application MVC5 signalR 2.0 , from the tutorial :- http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20-and-mvc-5 And it is all working brilliantly, though is there a way to send images/ attachments? 我从教程中构建了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虽然有办法发送图像/附件,但它的工作都很出色吗? and with the images actually displaying on the screen?
和实际显示在屏幕上的图像?
我建议你 - 通过WebApi(无SignalR)发送图像和消息,然后通过SignalR通知聊天中的所有参与者。
The way that Jabbr (the IRC-like web based chat system based on SignalR) does it is it uploads files to an Azure blob container from the client (via a server side upload handler) and then sends the direct blob URI back down to all clients, who access the file directly. Jabbr(基于SignalR的基于IRC的基于Web的聊天系统)执行此操作的方式是从客户端(通过服务器端上载处理程序)将文件上载到Azure blob容器,然后将直接blob URI发送回所有客户端,直接访问该文件。
Take a look at the code here: https://github.com/JabbR/JabbR 看看这里的代码: https : //github.com/JabbR/JabbR
No. SignalR is a text base signaling. 不.SignalR是文本基础信令。 All you can do -- is send urls, json.. Or you may consider to transfer base64 string representation of an image, but I bet it is not very frendly usage case.
所有你能做的 - 是发送网址,json ..或者你可以考虑转移图像的base64字符串表示,但我敢打赌它不是非常友好的用例。
This file uploading using file input bootstrap plugin (krajee) You can also upload file without using this plugin. 使用文件输入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 class code 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; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.