Asp.net은 SignalR을 사용하여 사진을 보냅니다.-C#.Net 튜토리얼-php.cn

집

백엔드 개발

C#.Net 튜토리얼

Asp.net은 SignalR을 사용하여 사진을 보냅니다.

高洛峰

May 28, 2018 pm 04:22 PM

1. 소개
이전 글에서는 SignalR을 사용하여 채팅방 기능을 구현하는 방법을 소개했습니다. 이번 글에서는 SignalR을 사용하여 사진 전송 기능을 구현하는 방법을 구현해 보겠습니다.

2. 사진 전송 기능 구현 아이디어
이번 글에서도 이전과 마찬가지로 구현 아이디어를 명확히 하겠습니다. 사진을 보내는 기능.

이미지의 경로를 직접 지정하는 것(이 구현 방법은 http URI 스키마라고도 함) 외에도 Data Uri Schema를 통해 이미지를 표시할 수도 있습니다. 이 방법을 사용하면 이미지를 문자열 형식으로 웹 페이지에 직접 삽입할 수 있습니다. 형식은 다음과 같습니다.

<img  src="/static/imghwm/default1.png"  data-src="~/Scripts/jquery-2.2.2.min.js"  class="lazy"   / alt="Asp.net은 SignalR을 사용하여 사진을 보냅니다." >

위 코드는 Data Url Schema를 사용하여 이미지를 표시합니다. Data Uri Schema의 장점과 단점은 다음과 같습니다.

장점:
http Uri Schema를 사용하여 이미지 주소를 지정하면 클라이언트가 각 이미지에 대해 Http 요청을 실행해야 하기 때문에 Http 요청을 줄일 수 있습니다. . , 데이터 Uri를 사용하여 대역폭 및 HTTP 요청을 절약할 수 있습니다

단점:

IE8 이상에서만 지원되며 크기 제한은 32KB를 초과할 수 없습니다.
또한 Base64 콘텐츠는 이미지 크기를 33% 늘리지만 서버에서 GZIP 압축을 활성화하여 콘텐츠 크기를 줄일 수 있습니다. 그럼에도 불구하고 Http 요청을 보내면 많은 추가 정보(예: Http 헤더 등)가 첨부되므로 누적 콘텐츠 크기는 Base64 인코딩을 사용하여 증가한 콘텐츠보다 여전히 큽니다.

SignalR은 문자 전송을 기반으로 하기 때문에 사진 전송이 필수입니다.

이미지의 Base64 인코딩 문자열만 SignalR 서버로 보낼 수 있으며, 그러면 서버는 이미지를 수신해야 하는 클라이언트에 Base64 문자열을 푸시하고 클라이언트는 Data Uri를 사용하여 이미지 전송을 완료하려면 페이지에 이미지를 표시하세요.
물론 Jabbr(SignalR을 사용하여 인스턴트 채팅을 구현하는 오픈 소스 프로젝트)과 같은 Azure Bob Table에 사진을 업로드한 다음 Blob의 Uri를 모든 클라이언트에 반환하여 사진을 표시할 수도 있습니다. 실제로 이 구현은 여기서 구현한 것과 유사합니다. 클라이언트는 이미지를 읽고 blob의 Uri를 통해 표시할 수 있습니다. 즉, 구현 아이디어는 전송을 위해 이미지 바이너리 파일의 내용을 텍스트로 간접적으로 변환하는 것입니다.

3. 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의 구현 코드는 주로 각 클라이언트에 대해 임의의 사용자 이름을 생성한 다음 해당 사용자 이름을 세션에 저장합니다.

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" ></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>

4. 작동 효과
위의 세 단계를 마치면 SignalR을 사용하여 사진을 보내는 기능이 이미 작동될 수 있습니다. 다음으로 구체적인 운용효과를 살펴보겠습니다.

Asp.net은 SignalR을 사용하여 사진을 보냅니다.

이 시점에서 이 글의 모든 내용에 대한 소개가 끝났습니다. 다음으로, Html5 알림 API를 사용하여 new의 알림 기능을 구현하는 방법을 소개하겠습니다. 메시지.

SignalR을 사용하여 사진을 보내는 Asp.net과 관련된 더 많은 기사를 보려면 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로 구성되어 메모리와 스레드를 관리하고 FCL은 사전 제작 된 기능을 제공합니다. 2) 사용의 예로는 파일 읽기 및 LINQ 쿼리가 포함됩니다. 3) 일반적인 오류에는 처리되지 않은 예외와 메모리 누출이 포함되며 디버깅 도구를 사용하여 해결해야합니다. 4) 비동기 프로그래밍 및 캐싱을 통해 성능 최적화를 달성 할 수 있으며 코드 가독성 및 유지 관리 가능성을 유지하는 것이 중요합니다.

C# .net의 수명 : 지속적인 인기에 대한 이유May 10, 2025 am 12:12 AM

C#.NET이 지속적으로 매력적으로 유지되는 이유는 우수한 성능, 풍부한 생태계, 강력한 지역 사회 지원 및 크로스 플랫폼 개발 기능을 포함합니다. 1) 탁월한 성능과 엔터프라이즈 수준의 응용 프로그램 및 게임 개발에 적합합니다. 2) .NET 프레임 워크는 다양한 개발 분야를 지원하기위한 광범위한 클래스 라이브러리 및 도구를 제공합니다. 3) 활발한 개발자 커뮤니티와 풍부한 학습 리소스가 있습니다. 4) .netCore는 크로스 플랫폼 개발을 실현하고 응용 프로그램 시나리오를 확장합니다.

C# .NET 디자인 패턴 마스터 링 : 싱글 톤에서 종속성 주입까지May 09, 2025 am 12:15 AM

C#.NET의 설계 패턴에는 싱글 톤 패턴 및 종속성 주입이 포함됩니다. 1. Singleton Mode는 클래스의 인스턴스가 하나 뿐이며 글로벌 액세스 포인트가 필요한 시나리오에 적합하지만 스레드 안전 및 남용 문제에주의를 기울여야합니다. 2. 종속성 주입은 종속성을 주입하여 코드 유연성과 테스트 가능성을 향상시킵니다. 그것은 종종 생성자 주입에 사용되지만 복잡성을 증가시키기 위해 과도한 사용을 피해야합니다.

현대 세계의 C# .net : 응용 및 산업May 08, 2025 am 12:08 AM

C#.net은 현대 세계에서 게임 개발, 금융 서비스, 사물 인터넷 및 클라우드 컴퓨팅 분야에서 널리 사용됩니다. 1) 게임 개발에서 C#을 사용하여 Unity 엔진을 통해 프로그래밍하십시오. 2) 금융 서비스 분야에서 C#.NET은 고성능 거래 시스템 및 데이터 분석 도구를 개발하는 데 사용됩니다. 3) IoT 및 클라우드 컴퓨팅 측면에서 C#.NET은 Azure 서비스를 통해 지원을 제공하여 장치 제어 로직 및 데이터 처리를 개발합니다.

C# .NET 프레임 워크 대 .NET Core/5/6 : 차이점은 무엇입니까?May 07, 2025 am 12:06 AM

.NETFRAMEWORKISWINDOWS 중심, while.netCore/5/6 SupportScross-PlatformDevelopment.1) .NETFramework, 2002 년 이후, isidealforwindowsapplicationsButlimitedIncross-platformcapabilities.2) .netcore, 2016, anditsevolutions (.net5/6).

C# .NET 개발자 커뮤니티 : 리소스 및 지원May 06, 2025 am 12:11 AM

C#.NET 개발자 커뮤니티는 다음을 포함하여 풍부한 리소스와 지원을 제공합니다. 1. Microsoft의 공식 문서, 2. StackoverFlow 및 Reddit과 같은 커뮤니티 포럼, 3. GitHub의 오픈 소스 프로젝트. 이러한 리소스는 개발자가 기본 학습에서 고급 응용 프로그램에 이르기까지 프로그래밍 기술을 향상시키는 데 도움이됩니다.

C# .NET 장점 : 기능, 이점 및 사용 사례May 05, 2025 am 12:01 AM

C#.net의 장점은 다음과 같습니다. 1) 비동기 프로그래밍과 같은 언어 기능은 개발을 단순화합니다. 2) JIT 컴파일 및 쓰레기 수집 메커니즘을 통한 효율성 향상, 성능 및 신뢰성; 3) 크로스 플랫폼 지원, .netcore는 응용 프로그램 시나리오를 확장합니다. 4) 웹에서 데스크탑 및 게임 개발에 이르기까지 뛰어난 성능을 가진 광범위한 실제 응용 프로그램.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.