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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7445

CakePHP 教程

1374

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

char数组在C语言中如何使用 Apr 03, 2025 pm 03:24 PM

char 数组在 C 语言中存储字符序列，声明为 char array_name[size]。访问元素通过下标运算符，元素以空终止符 '\0' 结尾，用于表示字符串终点。C 语言提供多种字符串操作函数，如 strlen()、strcpy()、strcat() 和 strcmp()。

C语言各种符号的使用方法 Apr 03, 2025 pm 04:48 PM

C 语言中符号的使用方法涵盖算术、赋值、条件、逻辑、位运算符等。算术运算符用于基本数学运算，赋值运算符用于赋值和加减乘除赋值，条件运算符用于根据条件执行不同操作，逻辑运算符用于逻辑操作，位运算符用于位级操作，特殊常量用于表示空指针、文件结束标记和非数字值。

char在C语言中如何处理特殊字符 Apr 03, 2025 pm 03:18 PM

C语言中通过转义序列处理特殊字符，如：\n表示换行符。\t表示制表符。使用转义序列或字符常量表示特殊字符，如char c = '\n'。注意，反斜杠需要转义两次。不同平台和编译器可能有不同的转义序列，请查阅文档。

char在C语言字符串中的作用是什么 Apr 03, 2025 pm 03:15 PM

在 C 语言中，char 类型在字符串中用于：1. 存储单个字符；2. 使用数组表示字符串并以 null 终止符结束；3. 通过字符串操作函数进行操作；4. 从键盘读取或输出字符串。

c#多线程和异步的区别 Apr 03, 2025 pm 02:57 PM

多线程和异步的区别在于，多线程同时执行多个线程，而异步在不阻塞当前线程的情况下执行操作。多线程用于计算密集型任务，而异步用于用户交互操作。多线程的优势是提高计算性能，异步的优势是不阻塞 UI 线程。选择多线程还是异步取决于任务性质：计算密集型任务使用多线程，与外部资源交互且需要保持 UI 响应的任务使用异步。

char在C语言中如何进行类型转换 Apr 03, 2025 pm 03:21 PM

在 C 语言中，char 类型转换可以通过：强制类型转换：使用强制类型转换符将一种类型的数据直接转换为另一种类型。自动类型转换：当一种类型的数据可以容纳另一种类型的值时，编译器自动进行转换。

C语言 sum 的作用是什么？ Apr 03, 2025 pm 02:21 PM

C语言中没有内置求和函数，需自行编写。可通过遍历数组并累加元素实现求和：循环版本：使用for循环和数组长度计算求和。指针版本：使用指针指向数组元素，通过自增指针遍历高效求和。动态分配数组版本：动态分配数组并自行管理内存，确保释放已分配内存以防止内存泄漏。

char与wchar_t在C语言中的区别 Apr 03, 2025 pm 03:09 PM

在 C 语言中，char 和 wchar_t 的主要区别在于字符编码：char 使用 ASCII 或扩展 ASCII，wchar_t 使用 Unicode；char 占用 1-2 个字节，wchar_t 占用 2-4 个字节；char 适用于英语文本，wchar_t 适用于多语言文本；char 广泛支持，wchar_t 依赖于编译器和操作系统是否支持 Unicode；char 的字符范围受限，wchar_t 的字符范围更大，并使用专门的函数进行算术运算。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题