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. （一）Spark简介-Java&Python版Spark

    Spark简介 视频教程: 1.优酷 2.YouTube 简介: Spark是加州大学伯克利分校AMP实验室,开发的通用内存并行计算框架.Spark在2013年6月进入Apache成为孵化项目,8个月 ...

  2. 端盘子的服务生到月薪一万五的IT精英，你能相信吗

    一直以来,我都觉得自己不是一个有故事的人. 以前的我,是个乖宝宝,对父母言听计从,特别内向,甚至一度感觉到自卑.不上学之后,我干过送货员,去工地除泥搬砖,当过油漆工,去过工厂,还去饭店当过端盘子的服务 ...

  3. 【每日一linux命令1】linux命令路径

    一.路径: 执行命令前必须要考虑的一步是命令的路径,若是路径错误或是没有正确的指定,可能导致错误 的执行或是找不到该命令.要知道设置的路径,可执行以下命令: echo $PATH 显示结果: 这时我们 ...

  4. mysql集群（主从）

    本文主要记录mysql 主从配置. 经典的原理图 0.环境: 采用阿里云ECS服务器,同区同配置,操作系统为ubuntus 14 64位,服务器如下: 服务器A: 内网IP: 10.44.94.219 ...

  5. Enterprise Integration Pattern - 组成简介

    近些年来,越来越多的Web应用正在逐渐向大型化的方向发展.它们通常都会包含一系列相互协作的子服务.在开发过程中,如何让这些子服务协同工作常常是软件开发人员所最为头疼的问题,如各个子服务之间的数据表示不 ...

  6. Linux 中的数值计算和符号计算

    不知道经常需要做科学计算的朋友们有没有这样的好奇:在 Linux 系统下使用什么工具呢?说到科学计算,首先想到的肯定是 Matlab,如果再说到符号计算,那就非 Mathematica 不可了.可惜, ...

  7. （转）利用libcurl和国内著名的两个物联网云端通讯的例程, ubuntu和openwrt下调试成功(四)

    1. libcurl 的参考文档如下 CURLOPT_HEADERFUNCTION Pass a pointer to a function that matches the following pr ...

  8. 详解this

    this 虐我千百遍,看完此文效立见!不得不说,这篇文章的总结很地道很全面,适合收藏之用. 原文:all this 习惯了高级语言的你或许觉得JavaScript中的this跟Java这些面向对象语言 ...

  9. ABP(现代ASP.NET样板开发框架)系列之9、ABP设置管理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之9.ABP设置管理 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  10. ABP(现代ASP.NET样板开发框架)系列之14、ABP领域层——领域事件（Domain events）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之14.ABP领域层——领域事件(Domain events) ABP是“ASP.NET Boilerplate P ...