1、效果图

2、后台代码:

 public void Demo() {
//return "Hello World";
HttpContextBase content = this.HttpContext;
content.AcceptWebSocketRequest(ProcessChat);
//return "I am a beautiful girl";
} private async Task ProcessChat(AspNetWebSocketContext context)
{
//HttpContextBase content = this.HttpContext;
WebSocket socket = context.WebSocket;
while (true)
{
if (socket.State == WebSocketState.Open)
{
ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[]);
WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, CancellationToken.None);
string userMsg = Encoding.UTF8.GetString(buffer.Array, , result.Count);
userMsg = "你发送了:" + userMsg + "于" + DateTime.Now.ToLongTimeString();
buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMsg));
await socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
}
else
{
break;
}
}
}
}

3、前端代码

@{
ViewBag.Title = "Home Page";
} <script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript"> var ws;
$().ready(function () {
$('#conn').click(function () {
ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Home/Demo');
$('#tips').text('正在连接');
ws.onopen = function () {
$('#tips').text('已经连接');
}
ws.onmessage = function (evt) {
$('#tips').text(evt.data);
}
ws.onerror = function (evt) {
$('#tips').text(JSON.stringify(evt));
}
ws.onclose = function () {
$('#tips').text('已经关闭');
}
}); $('#close').click(function () {
ws.close();
}); $('#send').click(function () {
if (ws.readyState == WebSocket.OPEN) {
ws.send($('#content').val());
}
else {
$('#tips').text('连接已经关闭');
}
}); });
</script>
<br/> <div class="row"> <form id="form1" runat="server">
<div> <input id="conn" type="button" value="连接" />
<input id="close" type="button" value="关闭" />
<span id="tips"></span>
<input id="content" type="text" />
<input id="send" type="button" value="发送" />
</div>
</form> </div>

4、总结:看网上Websocket的实例后台一般都是ashx的样例,研究了好久才知道mvc的action也可以写成websocket。非常感谢eleven老师的指导。让我今天对websocket有了一定的了解,并且有信心坚持下去。也谢谢这位大牛的文章,让我解决了问题

https://stackoverflow.com/questions/40074190/websocket-connection-to-ws-localhost2017-failed-invalid-frame-header

还有这个文章

http://www.cnblogs.com/langu/archive/2013/12/22/3485676.html

感谢帮助过我的朋友们

H5WebSocket前后台代码的更多相关文章

  1. 分页 工具类 前后台代码 Java JavaScript (ajax) 实现 讲解

    [博客园cnblogs笔者m-yb原创, 转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]http ...

  2. FreeMarker中的list集合前后台代码

    freemarker中的list集合前后台代码: FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它 ...

  3. 原生js复制粘贴上传图片前后台代码,兼容firebox,chrome, ie11,亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  4. WPF 最基本的前后台代码对照

    最基本的3D代码对照 xaml代码 <Viewport3D> <Viewport3D.Camera> <PerspectiveCamera Position=" ...

  5. proguard 混淆android代码

    官网 http://proguard.sourceforge.net/#manual/examples.html android 2.3后,新建的project默认就有一个project.proper ...

  6. 关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...

  7. asp.net导出excel-一行代码实现excel、xml、pdf、word、html、csv等7种格式文件导出功能而且美观-SNF快速开发平台

    分享: 腾讯微博  新浪微博   搜狐微博   网易微博  腾讯朋友  百度贴吧  豆瓣   QQ好友  人人网 作者:王春天  原文地址:http://www.cnblogs.com/spring_ ...

  8. 【.NET】关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...

  9. SOAOffice和iWebOffice、NTKO的比较及其优势(转)

    http://www.cnblogs.com/liping13599168/articles/1681465.html SOAOffice和iWebOffice.NTKO的比较及其优势 近年来,市场上 ...

随机推荐

  1. StackExchange.Redis学习笔记(五) 发布和订阅

    Redis命令中的Pub/Sub Redis在 2.0之后的版本中 实现了 事件推送的  发布订阅命令 以下是Redis关于发布和订阅提供的相关命令 SUBSCRIBE channel [channe ...

  2. 从好用到更好用 —— 2017 年又拍云 CDN 功能更新回顾

    又拍云一直致力于为客户带来更好的服务,在 2017 年又拍云 CDN 服务进行了数次重大更新,在功能上更加全面.完善,进一步提升了 CDN 的稳定性与安全性. 在过去一年里又拍云 CDN 服务共进行了 ...

  3. [bzoj3191] [JLOI2013]卡牌游戏

    概率DP. 首先由题解可得>_<,胜出概率只与剩余人数.与庄家的相对位置有关. 所以设f[i][j]表示剩下i个人,从庄家开始第j个人的胜利概率... 根据卡牌一通乱搞即可... #inc ...

  4. Codeforces Round #280 (Div. 2)_C. Vanya and Exams

    C. Vanya and Exams time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. HDU--2114

    Calculate S(n) Time Limit: 10000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. c语言基础学习02_windows系统下的cmd命令

    =============================================================================注意:cmd的命令很多,需要用的时候可以查询即 ...

  7. JS——判断一个对象是否为空

    判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in...遍历属性,为真则为"非空数组":否则为"空数组" 2.通过JSON自带 ...

  8. iOS钉钉远程打卡助手(支持越狱和非越狱)

    前言:本文主要讲述使用hook方式实现钉钉远程打卡功能,涉及到tweak相关知识,如果你不想了解具体实现细节可直接到我的Github地址参考安装(包含越狱和非越狱两种方法)   你是不是像小编一样每个 ...

  9. asp.net网站管理工具 遇到错误。请返回上一页并重试。

    原因:项目的路径里有“#”号.

  10. addslashes() 函数返回在预定义字符之前添加反斜杠的字符串

    . 预定义字符是: 单引号(') 双引号(") 反斜杠(\) NULL 提示:该函数可用于为存储在数据库中的字符串以及数据库查询语句准备字符串. 注释:默认地,PHP 对所有的 GET.PO ...