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. HashMap的工作原理

    HashMap的工作原理   HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间 ...

  2. 2003-Can't connect to mysql server on localhost (10061)

    mysql数据库出现2003-Can't connect to mysql server on localhost (10061)问题 解决办法:查看wampserver服务器是否启动,如果没有启动启 ...

  3. 算是休息了这么长时间吧！准备学习下python文本处理了，哪位大大有好书推荐的说下！

    算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!

  4. C++常考面试题汇总

    c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...

  5. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  6. ABP理论之CSRF

    返回总目录 本篇目录 介绍 ASP.NET MVC ASP.NET WEB API ASP.NET Core[以后补上] 客户端类库 内部原理 介绍 CSRF[Cross-Site Request F ...

  7. ASP.NET MVC Model绑定(一)

    ASP.NET MVC Model绑定(一) 前言 ModelMetadata系列的结束了,从本篇开始就进入Model绑定部分了,这个系列阅读过后你会对Model绑定有个比较清楚的了解, 本篇对于Mo ...

  8. [APUE]不用fcntl实现dup2函数功能

    dup2的函数定义为: #include <unistd.h> int dup2(int src_fd, int new_fd); 自己实现dup2函数有几个关键点: 1,检查给定的源fd ...

  9. ZeroMQ：云时代极速消息通信库

    ZeroMQ:云时代极速消息通信库(大规模|可扩展|低成本|高效率解决之道,大规模分布式|多线程应用程序|消息传递架构构建利器) [美]Pieter Hintjens(皮特.亨特金斯)著   卢涛 李 ...

  10. 从零开始编写自己的C#框架（22）——添加普通列表页面

    普通列表页面指的是上一章那种有层次感列表以外的正常列表页面,由于上一章已讲解了正常添加页面的相关操作了,所以部分相关的操作本章节就不再罗嗦重复一次了.大家可以试试先用本章内容中的一些简单介绍,自己使用 ...