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. Android基础_Service

    一.service的用途 1.1 一种是执行长时间运行的耗时操做 1.如网络下载.音乐播放2.文件系统监控等 1.2 另一种是负责组件间的交互 1.将某些功能以Service组件形式封装,然后提供给其 ...

  2. 跨浏览器开发:CSS

    理解CSS盒子模型 如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CS ...

  3. Codeforces Round #395 (Div. 2)(A.思维,B,水)

    A. Taymyr is calling you time limit per test:1 second memory limit per test:256 megabytes input:stan ...

  4. Java 大数类BigInteger和BigDecimal的基本函数

    在Java中有两个类BigInteger和BigDecimal分别表示不可变的任意精度的整数和不可变的有符号的任意精度的十进制数(浮点数).主要用于高精度计算中.这两个类使得java中的大数,高精度运 ...

  5. ICMP TYPE-CODE查阅表

    我们在使用ICMP协议进行作业时,经常会用到ICMP类型和code,这里给出ICMP类型和code对应表. ICMP TYPE CODE对照表 TYPE CODE Description Query ...

  6. c++(线性堆栈)

    前面我们讲到了队列,今天我们接着讨论另外一种数据结构:堆栈.堆栈几乎是程序设计的命脉,没有堆栈就没有函数调用,当然也就没有软件设计.那么堆栈有什么特殊的属性呢?其实,堆栈的属性主要表现在下面两个方面: ...

  7. Oracle复制表结构及数据

    1. 复制表结构及其数据:  create table table_name_new as select * from table_name_old 2. 只复制表结构:  ; 或者: create ...

  8. 应用fstream格式化输出

    我举一个我应用的例子 file.open("shoroud.jrf" ,ios_base::trunc); //打开文件,清空文件内容 if(!file.good()) { pri ...

  9. [国嵌攻略][160][SPI驱动程序设计]

    SPI Flash驱动 1.打开/drivers/mtd/devices/m25p80.c驱动文件.找到初始化m25p80_init函数,其中通过spi_register_driver来注册spi设备 ...

  10. 逢三退一(boolean数组的使用)

    package com.hanqi.count; // 逢三退一 输出留到最后值的索引; public class Count1 { //主方法 public static void main(Str ...