背景
で実現ネイティブJSファイルのアップロードとプログレスバーを表示する一品で、我々はExcelが機能をアップロードし、サーバのリアルタイムの進行状況を表示達成し(正在处理第N行...)
、ユーザーがShadengは何を知っていない必要がないように、これは大幅にユーザーの向上します経験
この機能を実現する方法は2つあります。
- 遠位
js
サービス要求タイマー/ロングポーリングの進行の終わりに websocket
双向通信
二つのオプションの選択:
伝統的なロングポーリングは圧力が比較的大きいので、リアルタイムのニュースを定期的に送信される要求サーバへのメッセージが、サーバーを達成することができますが、websocket
に基づいて、http
1ウェイハンドシェイク機能、戻っていないhttp
アップ
では.net
真ん中、SignalR
あるサーバとクライアントの双方向通信のためのフレームワークを実装するためwebsocket
の良い一つのパッケージには、私はそれを選びました。
もちろん、他の言語は確かにサポートされているwebsocket
限定された、通信がない.net
ように、nodejs
socket.io
SignalR
SignalR
それは.net
、チャットのサーバとクライアントの双方向通信、ウェブに面する側のフレームワークSignalR
で、より簡単にwebsocket
通信パッケージ
SignalR
通常は接続制限は、サーバーの構成に応じて、クライアントのブラウザが限定されていない、クロム5つwebsocket
の接続
あなたは何を行うことができます
- 駅ライブチャット、メッセージ通知
- ウェブページ表示リアルタイムデータ
- 適応型通信プロトコル、ブラウザやサーバーサポートしている場合は
websocket
、使用websocket
ロングポーリングを使用した通信プロトコルを、それ以外の場合はダウングレードし、服务器一般需要手动开启
.net core
クロスプラットフォーム、バージョン2.2が正式に組み込まれていますSignalR
.net core
サーバーの構成
startup
中ConfigureServices
-ハウス方法加えSignalR
サービスservices.AddSignalR();
、Configure
特定の構成でHub
(ルータ、トランジット):
app.UseSignalR(routes =>
{
routes.MapHub<TestHub>("/testHub"); //可以多个map
});
app.UseMvc(); //注意UseSignalR需要在UseMvc()之前
复制代码
このようなSignalR
サーバ側の開発、ウェブやJava、.NETクライアントを接続することができますを完了しました
ハブメッセージ処理センター
public class TestHub : Hub
{
public TestHub()
{
}
public async Task SendMessage(string message, string name)
{
#region Client
//this.Context.ConnectionId //每个连接一个connectionId 表示唯一客户端
//this.Clients.Client().SendAsync(); //指定发送消息
//this.Clients.Clients()
#endregion //给多个client发消息
#region Group
//this.Clients.Group(); //给某个组发消息
//this.Clients.Groups() //给多个组发消息
//this.Groups.AddToGroupAsync() //将指定连接加入组
//this.Groups.RemoveFromGroupAsync() //将指定连接移除组
#endregion
await Clients.All.SendAsync("onMsg", DateTime.Now, message);
}
//上下线消息 连接、断开事件
//客户端连接上
public override Task OnConnectedAsync()
{
return base.OnConnectedAsync();
}
//客户端断开
public override Task OnDisconnectedAsync(Exception exception)
{
string connectionId = this.Context.ConnectionId;
return base.OnDisconnectedAsync(exception);
}
}
复制代码
あなたは上記を参照することができSignalR
、多くの一般的に使用されるメソッドをカプセル化し(发送指定消息、群发...)
、我々が使用することは非常にシンプルを達成することができ、
導入のウェブ端SignalR
のjs
ライブラリーに対応する方法は、サーバが対応する呼び出しを
var connection = new signalR.HubConnectionBuilder().withUrl("/testHub").build();
connection.on("onMsg", function (data, message) {
console.log(data);
var li = document.createElement('li');
li.textContent = `${data}:${message}`;
document.getElementById("content").appendChild(li);
});
connection.start().then(function () {
}).catch(function (err) {
})
function sendMsg() {
var msg = document.getElementById('txt').value;
connection.invoke("SendMessage", msg, "xiaoqiu");
//connection.stop();
}
复制代码
2件のブラウザアクセスを開き、基本的な効果が示されています:
ここで、我々はもちろん、チャットルームを行うことができ、場所を最適化するために必要以上になります
コントローラのコールSignalRサービス
コンストラクタ・インジェクションではIHubContext<>
、直接、非常に便利に使用することができます。
private readonly IHubContext<TestHub> _hubContext;
public HomeController(IHubContext<TestHub> hubContext)
{
_hubContext = hubContext;
}
public async Task<IActionResult> Notify()
{
//拿不到当前Hub的clientId 线程是唯一的
await _hubContext.Clients.All.SendAsync("onMsg", "from controller msg");
return Ok();
}
复制代码
そして、クライアントは一般的に直接ハブを伝えていない、コントローラ・ハブは、コール転送を行うことができ、マルチアプリケーションへのアクセスを行う、カスタマイズ、アクセス権など
前の記事、私たちは、Excel、おおよそ次のコードの進行状況を表示してみてください:
[HttpPost]
public async Task<JsonResult> Import()
{
var connectionId = Request.Form["connectionId"].ToString(); //拿到当前连接的Id
var importer = new ExcelImporter();
//自定义的委托,处理业务的参数
importer.OnImportingEvent += (sender, arg) =>
{
var response = new
{
isSuccess = arg.IsSuccess, //当前数据行是否处理(导入转换)成功
total = arg.TotalRow, //当前导入的数据总行数
rowNumber = arg.RowNumber, //当前处理的行数
msg = arg.Msg, //处理消息
time = arg.Time, //处理时间
isComplete = false //是否全部处理(转换)完毕
};
//推送消息,通知到客户端
_globalHub.InvokeByIDAsync(connectionId, "importMessage", response);
};
}
//前端的connection处理,监听对应的方法
connection.on('importMessage',function(notice){
//根据返回的参数进行相应的逻辑处理展示...
})
复制代码
ここでは、SignalR
基本的な使い方が終了したプレゼンテーション、追加してください!