.Net使用SuperSocket框架实现WebSocket前端
程序员文章站
2022-03-01 13:21:56
本文内容是搭配后端使用的,没看过websocket后端实现的童鞋们咳咳,其实前端实现相对就容易很多了,因为我们有javascript websocket api,它看上来大致是这样的:var ws =...
本文内容是搭配后端使用的,没看过websocket后端实现的童鞋们
咳咳,其实前端实现相对就容易很多了,因为我们有javascript websocket api,它看上来大致是这样的:
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使用supersocket框架实现websocket前端的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
ASP.NET使用AjaxPro实现前端跟后台交互详解
-
在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
-
.Net使用分表分库框架ShardingCore实现多字段分片
-
.Net使用SuperSocket框架实现WebSocket前端
-
使用php的swoole框架,实现高性能长连接websocket
-
ASP.NET使用AjaxPro实现前端跟后台交互详解
-
php使用webSocket实现Echarts长连接自动刷新的解决方案(1):前端获取后端JSON数据
-
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)
-
在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度