1.はじめに
前回の記事では、SignalRを使ってチャットルーム機能を実装する方法を紹介しました。
2.写真送信機能の実装の考え方
今回も前回と同様にお伝えしていきますが、まずは写真送信機能の実装の考え方を明確にしておきます。
画像のパスを直接指定する（この実装方法は http URI スキーマとも呼ばれます）以外に、Data Uri スキーマを介して画像を表示することもできます。この方法を使用すると、画像を文字列の形式で Web ページに直接埋め込むことができます。形式は次のとおりです:
<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 スキーマの長所と短所は次のとおりです:
利点:
http Uri スキーマを使用して画像アドレスを指定する場合、クライアントは Data Uri This を使用して画像ごとに Http リクエストを発行する必要があるため、HTTP リクエストを減らすことができます。このメソッドは帯域幅と 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 =
{
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
'W', 'X', 'Y', 'Z'
};
// 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 = '@Session["username"]';
$('#username').html(userName);
// 引用自动生成的集线器代理
var chat = $.connection.chatHub;
// 定义服务器端调用的客户端sendMessage来显示新消息
chat.client.sendMessage = function (name, message) {
// 向页面添加消息
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
chat.client.receiveImage = function (name, base64) {
// 向页面添加消息
$('#discussion').append('<image class = "file-preview-image" style="width:auto;height:100px;" src=' + base64
+ '/>');
};
// 设置焦点到输入框
$('#message').focus();
// 开始连接服务器
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// 调用服务器端集线器的Send方法
chat.server.send(userName, $('#message').val());
// 清空输入框信息并获取焦点
$('#message').val('').focus();
});
});
$("#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);
});
$('#sendmessage').click(function() {
var imagesJson = $('.file-preview-image').map(function() {
var $this = $(this);
return {
image: $this.attr('src'),
filename: $this.attr('data-filename')
};
}).toArray();
chat.server.sendImage(userName, imagesJson);
});
});
// 为显示的消息进行Html编码
function htmlEncode(value) {
var encodedValue = $('<p />').text(value).html();
return encodedValue;
}
</script>
</body>
</html>4. 運用効果
上記 3 つの手順を完了すると、SignalR を使用した画像送信機能が運用可能になります。次に、具体的な運用効果を見てみましょう。
ここで、この記事の内容の全ての紹介は終わりです。次に、Html5のNotification APIを使って新着メッセージのリマインダー機能を実装する方法を紹介します。
SignalR を使用して画像を送信する Asp.net に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
C＃.NET：強力なプログラミング言語の紹介Apr 22, 2025 am 12:04 AMC＃と.NETの組み合わせにより、開発者に強力なプログラミング環境を提供します。 1）C＃は、多型と非同期プログラミングをサポートします。2）.NETは、クロスプラットフォーム機能と同時処理メカニズムを提供し、デスクトップ、Web、モバイルアプリケーション開発で広く使用されています。
.NETフレームワーク対C＃：用語のデコードApr 21, 2025 am 12:05 AM.NetFrameworkはソフトウェアフレームワークであり、C＃はプログラミング言語です。 1..netframeworkは、デスクトップ、Web、モバイルアプリケーションの開発をサポートするライブラリとサービスを提供します。 2.C＃は.NetFrameWork用に設計されており、最新のプログラミング機能をサポートしています。 3..NetFrameworkはCLRを介してコード実行を管理し、C＃コードはILにコンパイルされ、CLRによって実行されます。 4. .NetFrameWorkを使用してアプリケーションをすばやく開発し、C＃はLINQなどの高度な関数を提供します。 5.一般的なエラーには、タイプ変換と非同期プログラミングデッドロックが含まれます。 VisualStudioツールは、デバッグに必要です。
C＃.NETの分解：初心者の概要Apr 20, 2025 am 12:11 AMC＃は、Microsoftが開発した最新のオブジェクト指向プログラミング言語であり、.NETはMicrosoftが提供する開発フレームワークです。 C＃は、CのパフォーマンスとJavaのシンプルさを組み合わせており、さまざまなアプリケーションの構築に適しています。 .NETフレームワークは、複数の言語をサポートし、ガベージコレクションメカニズムを提供し、メモリ管理を簡素化します。
C＃と.NETランタイム：それらがどのように連携するかApr 19, 2025 am 12:04 AMC＃と.NETランタイムは密接に連携して、開発者に効率的で強力なプラットフォームの開発機能に力を与えます。 1）C＃は、.NETフレームワークとシームレスに統合するように設計されたタイプセーフおよびオブジェクト指向のプログラミング言語です。 2）.NETランタイムは、C＃コードの実行を管理し、ガベージコレクション、タイプの安全性、その他のサービスを提供し、効率的でクロスプラットフォームの操作を保証します。
C＃.NET開発：始めるための初心者向けガイドApr 18, 2025 am 12:17 AMC＃.NET開発を開始するには、次のことが必要です。1。C＃の基本的な知識と.NETフレームワークのコア概念を理解する。 2。変数、データ型、制御構造、関数、クラスの基本概念をマスターします。 3。LINQや非同期プログラミングなど、C＃の高度な機能を学習します。 4.一般的なエラーのためのデバッグテクニックとパフォーマンス最適化方法に精通してください。これらの手順を使用すると、C＃.NETの世界に徐々に浸透し、効率的なアプリケーションを書き込むことができます。
C＃と.NET：2つの関係を理解しますApr 17, 2025 am 12:07 AMC＃と.NETの関係は切り離せませんが、同じものではありません。 C＃はプログラミング言語であり、.NETは開発プラットフォームです。 C＃は、コードの書き込み、.NETの中間言語（IL）にコンパイルされ、.NET Runtime（CLR）によって実行されるために使用されます。
c＃.netの継続的な関連性：現在の使用法を見るApr 16, 2025 am 12:07 AMC＃.NETは、複数のアプリケーション開発をサポートする強力なツールとライブラリを提供するため、依然として重要です。 1）C＃は.NETフレームワークを組み合わせて、開発を効率的かつ便利にします。 2）C＃のタイプの安全性とゴミ収集メカニズムは、その利点を高めます。 3）.NETは、クロスプラットフォームの実行環境とリッチAPIを提供し、開発の柔軟性を向上させます。
Webからデスクトップまで：C＃.NETの汎用性Apr 15, 2025 am 12:07 AMc＃.netisversatileforbothwebanddesktopdevelopment.1）forweb、useasp.netfordynamicapplications.2）fordesktop、equindowsorwpfforrichinterfaces.3）usexamarinforcross-platformdeveliment、enabling deshacrosswindows、
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
WebStorm Mac版
便利なJavaScript開発ツール
