HTML5作为下一代的 Web 标准， 拥有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等。WebSocket 在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用。HTML5 WebSocket 的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 WebSocket 在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。

下面给出一个简单的例子，来说明websocket如何进行前后台交互：

1 html页面

首先判断浏览器是否支持WebSocket，如果具有此特征，则打开特定uri，进行数据交互。

 <html>

 <head>

     <script>

     var socket ;

     if ("WebSocket" in window) {

         //alert("WebSocket is supported by your Browser!");

         //open web socket

         var ws = new WebSocket("ws://localhost:8181/echo");

         socket = ws;

         ws.onopen = function() {

             // Web Socket is connected, send data using send()

             // ws.send("Message from client");

             //console.log('Message is sent...');

         };

         ws.onmessage = function(evt) {

             var received_msg = evt.data;

             //alert("Message is received...");

            console.log("Server:"+evt.data);

         };

         ws.onclose = function() {

             // websocket is closed.

             alert("Connection is closed...");

         };

     } else {

         //不支持WebSocket

         alert("WebSocket not supported by your Browser!");

     }

     function login(){

          socket.send("{\"uid\":\"admin\",\"pwd\":\"admin\"}");

     }

     </script>

 </head>

 <body>

   <button onclick="login();">login</button>

 </body>

 </html>

2 C# websocket server

 using System;

 using Fleck;

 using Newtonsoft.Json;

 namespace WebSocketNet

 {

     class Program

     {

         static void Main(string[] args)

         {

             //Fleck

             var server = new WebSocketServer("ws://0.0.0.0:8181");

             server.Start(socket =>

             {

                 socket.OnOpen = () =>

                 {

                     Console.WriteLine("Open!");

                     socket.Send("hello");

                 };

                 socket.OnClose = () => Console.WriteLine("Close!");

                 socket.OnMessage = message =>

                 {

                     Console.WriteLine(message);

                     //尝试用websocket进行登录

                     dynamic o = JsonConvert.DeserializeObject<user>(message);

                     var pwd = o.pwd;

                     var uid = o.uid;

                     if (uid == "admin" && uid == "admin")

                     {

                         socket.Send("login success");

                     }

                     else

                     {

                         socket.Send("login fail");

                     }

                 };

             });

             Console.ReadLine();

         }

     }

    public class user

     {

         public string uid { get; set; }

         public string pwd { get; set; }

     }

 }

3 运行

H5 WebSocket 如何和C#进行通信的更多相关文章

  1. .net core 和 WPF 开发升讯威在线客服与营销系统：使用 WebSocket 实现访客端通信

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  2. WebSocket实现Web端即时通信

    前言 WebSocket 是HTML5开始提供的一种在浏览器和服务器间进行全双工通信的协议.目前很多没有使用WebSocket进行客户端服务端实时通信的web应用,大多使用设置规则时间的轮询,或者使用 ...

  3. 根据Unix哲学来编写你的HTML5 Websocket服务器来实现全双工通信

    websocketd代表WebSocket的守护进程 websocketd处理的是浏览器和服务器之间的WebSocket连接,它会启动你所指定的服务器端应用来对WebSockets进行处理,然后在浏览 ...

  4. Node + H5 + WebSocket + Koa2 实现简单的多人聊天

    服务器代码  ( 依赖于 koa2,  koa-websocket ) /* 实例化外部依赖 */ let Koa = require("koa2"); let WebSocket ...

  5. h5:WebSocket

    实时 Web 应用的窘境 Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特 ...

  6. 前端H5与安卓和ios之间通信

    在一些app场景中,经常看到app里面嵌套H5页面, 安卓和ios提供一个空壳子,方法两者互相调用.上一周就是写H5页面让安卓和ios调用使用,中间传参,接受参数.通过 window.wx 对象调用一 ...

  7. h5 websocket 断开重新连接

    最近的项目中使用ws 长连接来接收和发送消息, 直接上代码 import * as SockJS from "sockjs-client"; import Stomp from & ...

  8. 推荐一个 基于 WebSocket 和 Redis 的 即时通信 开源项目

    项目地址 : https://github.com/2881099/im 大家可以和 SignalR 比较看看 ,  如何  ?        ^^  ^^  ^^ 这是一个 网友 写的 , 他还写了 ...

  9. HTML5 WebSocket和后端C#通信

    1.使用 HTML5 开发离线应用 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ 2.利用html 5 websocket ...

随机推荐

  1. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  2. Atitit.技术管理者要不要自己做开发？？

    Atitit.技术管理者要不要自己做开发?? 1. 为什么很多管理者不能自己亲自做了1 1.1. 沟通成本多了1 1.2. .组织分散. 1 1.3. 会议多 .协调多 1 1.4. 问题的根源在于我 ...

  3. TFS2013 设置签出独占锁

    转载自: http://www.cnblogs.com/zhang888/p/4280251.html

  4. CentOS下Zabbix安装部署及汉化

    搭建环境:Centos6.5_x86_64,Zabbix2.4.5,epel 源 服务端: 1.安装开发软件包yum -y groupinstall "Development Tools&q ...

  5. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  6. POJ1743 Musical Theme [后缀数组]

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 27539   Accepted: 9290 De ...

  7. 【流量劫持】SSLStrip 终极版 —— location 瞒天过海

    前言 之前介绍了 HTTPS 前端劫持 的方案,虽然很有趣,然而现实却并不理想.其唯一.也是最大的缺陷,就是无法阻止脚本跳转.若是没有这个缺陷,那就非常完美了 -- 当然也就没有必要写这篇文章了. 说 ...

  8. Xamarin.Android下获取与解析JSON

    一.新建项目 1.新建一个Android项目,并命名为为NetJsonList 2.右击引用,选择添加引用,引用System.Json.dll 二.同步请求 既然是跨平台,我们自然不能按照java下的 ...

  9. 在C#代码中应用Log4Net系列教程(附源代码)

    Log4Net应该可以说是DotNet中最流行的开源日志组件了.以前需要苦逼写的日志类,在Log4Net中简单地配置一下就搞定了.没用过Log4Net,真心不知道原来日志组件也可以做得这么灵活,当然这 ...

  10. WCF学习之旅—第三个示例之一（二十七）

    一.前言 通过前面二十几个章节的学习,我们知道了什么是WCF:WCF中的A.B.C:WCF的传输模式:WCF的寄宿方式:WCF的异常处理.本文综合应用以上知识点,一步一步写一个小的WCF应用程序——书 ...