.Net——基于SuperSocket实现的WebSocket(前端)
本文内容是搭配后端使用的,没看过WebSocket后端实现的童鞋们戳这里
咳咳,其实前端实现相对就容易很多了,因为我们有JavaScript WebSocket Api,它看上来大致是这样的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | var ws = '' ; //WebSocket对象 var userName = '测试同学' + parseInt(Math.random(1) * 888); //用户名 //初始化连接 function connect() { var address = "ws://127.0.0.1:10086" ;//服务端地址 ws = new WebSocket(address); //实例化WebSocket对象 //开始连接时 ws.onopen = function (e) { ws.send( '[login]{"userid":"' + userName + '"}' ); }; //收到信息时 ws.onmessage = function (e) { var Json = eval( '(' + e.data + ')' ); switch (Json.type) { case '1' : //新用户连接时 break ; case '2' : var Html = '' ; Html += '<p>' ; Html += Json.user + ':' + Json.msg; Html += '</p>' ; $( '#msgBox' ).append(Html); break ; } }; //发生错误时 ws.onerror = function (e) { }; //连接关闭时 ws.onclose = function (e) { $( '#msgBox' ).append( '<p>与聊天室的连接已断开。</p>' ); }; } //公聊发送 function send() { var SendText = $( '#send' ).val(); ws.send( '[send]{"msg":"' + SendText + '","user":"' + userName + '"}' ); } |
这些东西是固定的,记就行了~简单解释下:
关键之一:ws.onmessage,它可以在收到服务端信息时做出响应——然后你就可以为所欲为了。
该方法返回的信息存储在e.data内,内容取决于你的服务端如何编写(这里视作返回Json)。
关键之二:ws.send(),它可以发送信息到你编写的服务端(至于内容,依然取决于你后端如何实现)。
关键之三:ws.onopen(),通过它可以打开与服务端的沟通(要设置好WebSocket对象)。
下面是实现的效果(很丑勿吐槽):
记得要找支持H5的浏览器哦~
分类:
.NET Core/5/6
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构