Asp.net使用SignalR实现发送图片

下面是"Asp.net使用SignalR实现发送图片"的详细攻略。

什么是SignalR

SignalR是用于实时Web应用程序的开源库。它允许服务器端代码向客户端代码推送直接发送指令和数据。SignalR在运行时自动管理连接，处理连接中断，并重新连接。

SignalR的使用

1.通过NuGet安装SignalR

安装之前，请确保你的Visual Studio版本等都是最新及可用的：

Install-Package Microsoft.AspNet.SignalR

2.创建SignalR Hub类

Hub是SignalR的API的核心，是SignalR服务端应用程序的核心部分。通过Hub，服务端可以向客户端发送数据。

using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;

namespace SignalRPhotoSharingApp
{
    public class PhotoSharingHub : Hub
    {
        public void Send(string message)
        {
            // 调用所有客户端的addMessage方法
            Clients.All.addMessage(message);
        }
    }
}

3.配置SignalR

在你的启动文件中，添加SignalR的配置。

using Microsoft.AspNet.SignalR;
using Owin;

namespace SignalRPhotoSharingApp
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 启用SignalR服务
            app.MapSignalR();
        }
    }
}

4.客户端JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SignalR Photo Sharing App</title>
    <script src="../Scripts/jquery-2.1.4.min.js"></script>
    <script src="../Scripts/jquery.signalR-2.2.0.js"></script>
    <script>
        $(function () {
            var chat = $.connection.photoSharingHub;

            // 客户端接收服务端的消息
            chat.client.addMessage = function (message) {
                var img = document.createElement("img");
                img.src = message;
                $("body").append(img);
            };

            // 启动连接
            $.connection.hub.start()
                .done(function () {
                    $('#sendImage').click(function () {
                        var file = $('[type="file"]')[0].files[0];
                        if (file) {
                            var reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onloadend = function () {
                                chat.server.send(reader.result);
                            }
                        }
                    });
                });
        });
    </script>
</head>
<body>
    <input type="file" />
    <button id="sendImage">Send Image</button>
</body>
</html>

这个JavaScript文件中，客户端接收服务端的消息，接收到文件流，将图片转化为base64字符串，然后将字符串通过SignalR的Hub发送给服务端。服务端将字符串重新转换为图片，并将图片发送到所有客户端。

以上就是"Asp.net使用SignalR实现发送图片"的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Asp.net使用SignalR实现发送图片 - Python技术站

Asp.net使用SignalR实现发送图片

什么是SignalR

SignalR的使用

相关文章