Web应用程序通常有一些耗时的操作，但有些操作耗时不是很长，一分钟之内能完成。如果采用后台任务队列去异步处理，这样的用户不能实时看到后台处理的情况。倘若用户触发操作后，Web页面能够实时看到后台处理的进度，并且返回实时的状态，用户等待起来是不是感觉非常棒。下面是一个HTML5+ASP.NET MVC实现的示例。
1.前端页面和脚本
页面包含一个文本框和一个【提交】按钮，文本框输入后台要返回的消息数。
<h2>WebSocket</h2>
<div class="form-inline">
<div class="form-group">
<label for="count">消息数</label>
<input type="text" class="form-control" id="count" placeholder="服务端返回的消息数">
</div>
<button class="btn btn-primary" onclick="wsTest()">提交</button>
</div>
<blockquote>
<ol id="msg"></ol>
</blockquote>
WebSocket的api很简单，如下示例封装了一个简单的操作。
var WsUtil = {
msg: document.getElementById('msg'),
ws: null,
connect: function (url, callback) {
var _this = this;
_this.msg.innerHTML = '';
_this.appendMsg('正在连接......', '#00f');
_this.ws = new WebSocket(url);
_this.ws.onopen = function () {
_this.appendMsg('客户端已连接', '#00f');
if (callback) {
callback(_this.ws);
}
}
_this.ws.onmessage = function (evt) {
_this.appendMsg(evt.data);
}
_this.ws.onclose = function () {
_this.appendMsg('客户端已断开连接', '#00f');
}
_this.ws.onerror = function (evt) {
_this.appendMsg(evt.data, '#f00');
}
},
close: function () {
if (this.ws) {
this.ws.close();
this.ws = null;
}
},
appendMsg: function (message, color) {
var li = document.createElement('li');
li.style.color = color || '#000';
li.innerHTML = message;
msg.appendChild(li);
}
}
function wsTest() {
var count = document.getElementById('count').value;
var url = 'ws://localhost:90/html5/wstask?count=' + count;
WsUtil.connect(url, function (ws) {
ws.send('test');
});
}
2.ASP.NET MVC后端实现WebSocket请求
ASP.NET MVC控制器
public class Html5Controller : Controller
{
public void WsTask()
{
HttpContext.AcceptWebSocketRequest(ctx =>
{
int.TryParse(ctx.QueryString["count"], out int count);
return WebSocketManager.RunTask(ctx, wsm =>
{
for (int i = 0; i < count; i++)
{
var message = string.Format("{0:yyyyMMdd HH:mm:ss} 消息{1}", DateTime.Now, i + 1);
wsm.SendMessageAsync(message);
Thread.Sleep(1000);
}
});
});
}
}
这里封装了一个WebSocket管理者类。
public class WebSocketManager
{
private WebSocket socket;
public WebSocketManager()
{
}
public WebSocketManager(WebSocket socket)
{
this.socket = socket;
}
public static async Task RunTask(AspNetWebSocketContext context, Action<WebSocketManager> action)
{
var socket = context.WebSocket;
if (socket.State == WebSocketState.Open)
{
var wsm = new WebSocketManager(socket);
try
{
action(wsm);
}
catch (Exception ex)
{
await wsm.SendMessageAsync(ex.Message);
}
}
}
public Task SendMessageAsync(string message)
{
var content = new ArraySegment<byte>(Encoding.UTF8.GetBytes(message));
return socket.SendAsync(content, WebSocketMessageType.Text, true, CancellationToken.None);
}
}