.Net使用SuperSocket框架实现WebSocket前端
本文内容是搭配后端使用的,没看过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 MVC中jQuery与angularjs混合应用传参并绑定数据
这篇文章主要介绍了ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据,需要的朋友可以参考下2017-06-06
asp.net 利用IIS的404错误将文件重写成目录的简单方法
为什么要把文件重写成目录,主要原因是讨好搜索引擎,至于为什么写成目录搜索引擎就比较容易搜录不在本文讨论范围之内。2009-09-09
.Net WebApi中实现自动依赖注入的三种方法(最新推荐)
依赖关系注入 (DI) ,是一种软件设计模式,这是一种在类及其依赖项之间实现控制反转 (IoC) 的技术, .NET 中的依赖关系注入是框架的内置部分,与配置、日志记录和选项模式一样,这篇文章主要介绍了.Net WebApi中实现自动依赖注入的三种方法,需要的朋友可以参考下2024-03-03


最新评论