Asp.net使用SignalR实现发送图片-C#.Net教程-PHP中文网

首页

后端开发

C#.Net教程

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

高洛峰

May 28, 2018 pm 04:22 PM

一、引言
　　在前一篇已经介绍了如何使用SignalR来实现聊天室的功能，在这篇文章中，将实现如何使用SignalR来实现发送图片的功能。

二、实现发送图片的思路
　　我还是按照之前的方式来讲述这篇文章，首先，让我们来理清下实现发送图片功能的思路。

　　图片的显示，除了直接指定图片的路径外（这种实现方式也称为：http URI schema)，还可以通过Data Uri Schema的方式来显示图片。这种方式允许在网页里以字符串形式直接内嵌图片。形式如下所示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA 
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

　　上面代码的方式就是Data Url Schema方式来显示图片。关于Data Uri Schema的优缺点有：

优点：
　　可以减少Http请求，因为如果你使用http Uri Schema去指定图片地址的话，这样客户端对每个图片都需要发出Http请求，通过使用Data Uri的方式可以节省带宽和Http请求

缺点：

　　IE8以上的版本才支持，且限制大小不可超过32KB。
　　另外Base64的内容会将图片的内容变大33%，但可以通过服务端启用GZIP压缩来减少增大内容。尽管这样，由于发送Http请求会附加很多额外的信息（如Http Header等），这样累计下来一般内容大小还是大于使用Base64编码所增加的内容。

　　因为SignalR是基于文本方式的传输，所以要实现图片的发送。

只能通过发送图片的Base64编码的字符串到SignalR服务器，然后服务器再将该Base64字符串推送到需要接收图片的客户端，客户端再使用Data Uri的方式将图片显示在页面上，从而完成图片的传输。
　　当然你也可以像Jabbr（一个使用SignalR实现即时聊天的开源项目）那样将图片上传到Azure Bob Table中，然后再将Blob 的Uri 返回所有客户端来显示图片。其实这样的实现方式和我们这里实现类似，客户端可以通过blob的Uri来读取到图片来显示。总之实现思路就是将图片二进制文件的内容间接转换成文本的形式传输。

三、使用SignalR发送图片的实现代码
　　在具体实现之前，这里需要介绍一个文件上传插件——boostrap-fileinput。该插件用来提供图片的预览功能。关于插件的具体使用可以参考github站点或本文章的实现代码。

1、实现我们的集线器

public class ChatHub : Hub
  {
    /// <summary>
    /// 供客户端调用的服务器端代码
    /// </summary>
    /// <param name="name"></param>
    /// <param name="message"></param>
    public void Send(string name,string message)
    {
      // 调用所有客户端的sendMessage方法
      Clients.All.sendMessage(name, message);
    }
 
    // 发送图片
    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); // 调用客户端receiveImage方法将图片进行显示
      }
    }
 
    /// <summary>
    /// 客户端连接的时候调用
    /// </summary>
    /// <returns></returns>
    public override Task OnConnected()
    {
      Trace.WriteLine("客户端连接成功");
      return base.OnConnected();
    }
  }

2、HomeController的实现代码，主要为每个客户端生成随机的用户名，再将用户名存入Session中。

public class HomeController : Controller
  {
    private static readonly char[] Constant =
    {
      &#39;0&#39;, &#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;, &#39;7&#39;, &#39;8&#39;, &#39;9&#39;,
      &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;, &#39;f&#39;, &#39;g&#39;, &#39;h&#39;, &#39;i&#39;, &#39;j&#39;, &#39;k&#39;, &#39;l&#39;, &#39;m&#39;, &#39;n&#39;, &#39;o&#39;, &#39;p&#39;, &#39;q&#39;, &#39;r&#39;, &#39;s&#39;, &#39;t&#39;, &#39;u&#39;, &#39;v&#39;,
      &#39;w&#39;, &#39;x&#39;, &#39;y&#39;, &#39;z&#39;,
      &#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;, &#39;O&#39;, &#39;P&#39;, &#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;,
      &#39;W&#39;, &#39;X&#39;, &#39;Y&#39;, &#39;Z&#39;
    };
 
    // GET: Home
    public ActionResult Index()
    {
      Session["username"] = GenerateRandomName(4);
      return View();
    }
 
    /// <summary>
    /// 产生随机用户名函数
    /// </summary>
    /// <param name="length">用户名长度</param>
    /// <returns></returns>
    private static string GenerateRandomName(int length)
    {
      var newRandom = new 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、接下来就是实现前端页面了。

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>使用SignalR实现发送图片</title>
  <link href="/Content/bootstrap.min.css" rel="stylesheet">
  <link href="/Content/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
  <p class="container">
    <p>用户名:<p id="username"></p></p>
    <input type="text" id="message" />
    <br/>
    <br />
    <input id="fileinput" type="file">
    <br />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
  </p>
  <script type="text/javascript" src="~/Scripts/jquery-2.2.2.min.js"></script>
  <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
  <script src="~/signalr/hubs"></script>
  <script src="/Scripts/fileinput.js" type="text/javascript"></script>
  <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
  <script>
    $(function () {
      var userName = &#39;@Session["username"]&#39;;
      $(&#39;#username&#39;).html(userName);
      // 引用自动生成的集线器代理
      var chat = $.connection.chatHub;
      // 定义服务器端调用的客户端sendMessage来显示新消息
 
      chat.client.sendMessage = function (name, message) {
        // 向页面添加消息
        $(&#39;#discussion&#39;).append(&#39;<li><strong>&#39; + htmlEncode(name)
          + &#39;</strong>: &#39; + htmlEncode(message) + &#39;</li>&#39;);
      };
 
      chat.client.receiveImage = function (name, base64) {
        // 向页面添加消息
        $(&#39;#discussion&#39;).append(&#39;<image class = "file-preview-image" style="width:auto;height:100px;" src=&#39; + base64
          + &#39;/>&#39;);
      };
 
      // 设置焦点到输入框
      $(&#39;#message&#39;).focus();
      // 开始连接服务器
      $.connection.hub.start().done(function () {
        $(&#39;#sendmessage&#39;).click(function () {
          // 调用服务器端集线器的Send方法
          chat.server.send(userName, $(&#39;#message&#39;).val());
          // 清空输入框信息并获取焦点
          $(&#39;#message&#39;).val(&#39;&#39;).focus();
        });
      });
 
      $("#fileinput").fileinput({
        allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
        maxImageWidth: 700,
        maxImageHeight: 700,
        resizePreference: &#39;height&#39;,
        maxFileCount: 1,
        resizeImage: true
      });
 
      $("#fileinput").on(&#39;fileloaded&#39;, function (event, file, previewId, index, reader) {
        var readers = new FileReader();
        readers.onloadend = function () {
          $(".file-preview-image").attr(&#39;src&#39;, readers.result);
        };
        readers.readAsDataURL(file);
      });
 
      $(&#39;#sendmessage&#39;).click(function() {
        var imagesJson = $(&#39;.file-preview-image&#39;).map(function() {
          var $this = $(this);
          return {
            image: $this.attr(&#39;src&#39;),
            filename: $this.attr(&#39;data-filename&#39;)
          };
        }).toArray();
 
        chat.server.sendImage(userName, imagesJson);
      });
    });
 
  // 为显示的消息进行Html编码
  function htmlEncode(value) {
    var encodedValue = $(&#39;<p />&#39;).text(value).html();
    return encodedValue;
  }
  </script>
   
</body>
</html>

四、运行效果
　　经过上面的三步，使用SignalR发送图片的功能就已经可以运作了。接下来让我们一起看看具体的运行效果到底如何。

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

到这里，本文的所有内容的介绍就结束了，接下来的将介绍如何使用Html5 Notification API 来实现有新消息的提醒功能。

更多Asp.net使用SignalR实现发送图片相关文章请关注PHP中文网！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

使用C＃.NET开发：实用指南和示例May 12, 2025 am 12:16 AM

C#和.NET提供了强大的功能和高效的开发环境。1）C#是一种现代、面向对象的编程语言，结合了C 的强大和Java的简洁性。2）.NET框架是一个用于构建和运行应用程序的平台，支持多种编程语言。3）C#中的类和对象是面向对象编程的核心，类定义数据和行为，对象是类的实例。4）.NET的垃圾回收机制自动管理内存，简化开发者的工作。5）C#和.NET提供了强大的文件操作功能，支持同步和异步编程。6）常见错误可以通过调试器、日志记录和异常处理来解决。7）性能优化和最佳实践包括使用StringBuild

C＃.NET：了解Microsoft .NET框架May 11, 2025 am 12:17 AM

.NETFramework是一个跨语言、跨平台的开发平台，提供一致的编程模型和强大的运行时环境。1)它由CLR和FCL组成，CLR管理内存和线程，FCL提供预构建功能。2)使用示例包括读取文件和LINQ查询。3)常见错误涉及未处理异常和内存泄漏，需使用调试工具解决。4)性能优化可通过异步编程和缓存实现，保持代码可读性和可维护性是关键。