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. Centos 6.6 下搭建php5.2.17+Zend Optimizer3.3.9+Jexus环境

    (为何安装php5.2.17这个版本 因为phpweb这个程序用到了Zend Optimizer3.3.9 这个东东已经停止更新了 最高支持5.2版本的php 所以就有了一晚上填坑的自己和总结了这篇文 ...

  2. 【已解决】Https请求——基础连接已经关闭 发送时发生错误

    本人在做商用项目的推送消息功能时,借助第三方推送服务.这里避免有打广告的嫌疑,就不报名字了.由于是通过调用API接口,所以Post方法是自己写的,但是在开发环境是可以正常推送的,但是一上线就出各种问题 ...

  3. 分布式存储 CentOS6.5虚拟机环境搭建FastDFS-5.0.5集群

    前言:       由于公司项目需要,最近开始学习一下分布式存储相关知识,确定使用FastDFS这个开源工具.利用周末的时间在虚拟机上搭建了分布式存储系统,在搭建过程中,发现网上的资料说的并不是很全, ...

  4. Spark笔记：复杂RDD的API的理解（下）

    本篇接着谈谈那些稍微复杂的API. 1)   flatMapValues:针对Pair RDD中的每个值应用一个返回迭代器的函数,然后对返回的每个元素都生成一个对应原键的键值对记录 这个方法我最开始接 ...

  5. Entity Framework 6 Recipes 2nd Edition（10-8）译 - >映射插入、修改、删除操作到存储过程

    10-8. 映射插入.修改.删除操作到存储过程 问题 想要映射插入.修改.删除操作到存储过程 解决方案 假设已有运动员实体模型,如Figure 10-8所示. 对应的数据库表如Figure 10-9所 ...

  6. maven repo plugin archiver

    Failure to transfer org.apache.maven:maven-archiver:pom:2.4.1 from http://repo1.maven.org/xxx was ca ...

  7. 解决VMWARE NAT SERVICE服务无法启动或服务消失的问题

    解决VMWARE NAT SERVICE服务无法启动或服务消失的问题 2016-02-02 11:18 2012人阅读 评论(2) 收藏 举报  分类: 网络通信(3)  今日使用VMware中的Wi ...

  8. iOS-----App闪退，程序崩溃---解决方案

    1.iOS-中app启动闪退的原因 2.iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题 3.iOS-应用闪退总结 4.iOS开发-捕获程序崩溃日志 5.iOS开发-应用崩溃日 ...

  9. 解析大型.NET ERP系统 单据标准(新增，修改，删除，复制，打印)功能程序设计

    ERP系统的单据具备标准的功能,这里的单据可翻译为Bill,Document,Entry,具备相似的工具条操作界面.通过设计可复用的基类,子类只需要继承基类窗体即可完成单据功能的程序设计.先看标准的销 ...

  10. Uncaught RangeError: Maximum call stack size exceeded 调试日记

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 开发道路上不是解决问题最重要,而是解决问题的过程,这个过程我们称之为~~~调试 记 ...