HTML5示例之WebSocket
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); } }
3.运行效果
Known 是基于 Blazor 轻量级、跨平台、低代码、易扩展的插件开发框架。
源码:https://gitee.com/known/Known
源码:https://github.com/known/Known
如果对您有帮助,点击⭐Star⭐关注 ,感谢支持开源!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2009-01-19 VS2005 模板的制作方法