众所周知，Http协议是无状态的，并且是基于Request/Response的方式与服务器进行交互，也就是我们常说的单工模式。但是随着互联 网的发展，浏览器与服务端进行双向通信需求的增加，长轮询向服务器以获取最新数据并实现推送效果的方式已经越来越不能满足我们。Html5标准的制定，也 为我们提供了浏览器与服务端的双工通信协议WebSocket。

　　WebSocket协议的格式为 "ws://IP:Port" 或者“wss://IP:Port"。其中wss表示进行加密传输的websocket协议。

　　WebSocket协议与传统的Socket协议一样，都需要进行“握手”。但是WebSocket的“握手”阶段是通过Http协议进行的， “握手”行为通过Request/Response的Header完成，只需要交换很少的数据，便可以创建基于TCP/IP协议的双工通道。下面我们来看 一下Fiddler截取到的WebSocket握手请求

　　

　　通过Fiddler我们可以看到，在握手请求时，客户端向服务端发送了一个Get请求，并且在请求的头中增加了这么几个Key

　　Origin:http://IP:Port 表示客户端的地址

　　Connection:Upgrade / Upgrade:WebSocket 表示本次请求是要进行WebSocket的握手动作

　　Sec-WebSocket-Version: 13 表示浏览器支持的WebSocket版本信息

　　

　　Sec-WebSocket-Key:     这是一个由客户端随机生成的字符串

　　

　　在服务器响应的握手信息中Sec-WebSocket-Accept:的值为服务器通过客户端Header的Sec-WebSocket-Key的值进行计算并加密的结果。

　　

　　并且服务器的响应状态为101  表示服务器端已经理解了客户端的需求，并且客户端需要根据Upgrade中的协议类型，切换为新的协议来完成后续的通信。

　　这时候我们的TCP/IP双工通道就已经建立了，WebSocket协议就这么简单。

　　说完理论知识了，我们来看如何在浏览器中使用WebSocket协议。

　　

　　

　　最新的FireFox、Chrome、IE10及以上版本都已经支持了WebSocket协议。但是在使用它时，我们需要先检测浏览器是否支持WebSocket协议

　　WebSocket对象位于 window对象下。我们可以通过以下代码检测浏览器对WebSocket的支持

　　

　　

if("WebSocket" in window)

if(window.WebSocket)

if("MozWebSocket" in window)

if(window.MozWebSocket)

　　

　　如果我们的浏览器支持WebSocket 那么我们就可以创建WebSocket的实例了。

　　

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

var ws=new MozWebSocket("ws://localhost:2012);

　　

　　

　　这里需要注意一下，当我们创建WebSocket的实例时，这个WebSocket实例就已经开始向服务器发起握手请求了，不需要我们手动打开连接。

　　WebSocket对象也很简单，我们会常用到它的4个回调方法 onopen onclose onerror onmessage。他们触发的实际分别为 握手完成并创建TCP/IP通道后，断开连接后，发生错误时，接收到服务端消息时。

　　另外我们还常常用到一个属性 readyState 用以检查连接状态，和一个函数 send() 向服务端发送数据。

　　

　　下面我们来完成一个完整的浏览器使用WebSocket的例子，这里需要服务端也支持WebSocket协议

　　

　　

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>WebSocket示例</title>

    <script type="text/javascript">

        var ws;//WebSocket对象

        var wsUrl = "ws://localhost:2012";//支持WebSocket协议的服务器端地址

        function connection() {

            //判断该使用哪种WebSocket对象

            if ("WebSocket" in window) {

                ws = new WebSocket(wsUrl);

            }

            else if ("MozWebSocket" in window) {

                ws = new MozWebSocket(wsUrl);

            } else {

                alert("当前浏览器不支持WebSocket");

            }

            //注册各类回调

            ws.onopen = function () {

                alert("连接服务器成功");

            }

            ws.onclose = function () {

                alert("与服务器断开连接");

            }

            ws.onerror = function () {

                alert("数据传输发生错误");

            }

            ws.onmessage = function (receiveMsg) {

                alert(receiveMsg.data);

            }

        }

        function sendMessage() {

            //尝试向服务端发送消息

            ws.send("Hello World");

        }

    </script>

</head>

<body>

    <input type="button" value="Connection" onclick="connection()" />

    <input type="button" value="Send" onclick="sendMessage()" />

</body>

</html>

　　

　　

　　

　　完整示例代码在这里下载 示例代码的服务端是基于.Net Framework 4.5用VS2012开发的 因为服务器WebSocket框架的.NET 4.0版本有问题……

　　下一篇文章我们会讲如何使用SuperWebSocket框架搭建我们自己的WebSocket服务器

本文转自：http://www.cnblogs.com/ShadowLoki/p/3712048.html

初识WebSocket的更多相关文章

  1. 一步一步学WebSocket (一) 初识WebSocket

    众所周知,Http协议是无状态的,并且是基于Request/Response的方式与服务器进行交互,也就是我们常说的单工模式.但是随着互联网的发展,浏览器与服务端进行双向通信需求的增加,长轮询向服务器 ...

  2. 初识WebSocket协议

    1.什么是WebSocket协议 RFC6455文档的表述如下: The WebSocket Protocol enables two-way communication between a clie ...

  3. 初识webSocket及其使用

    阅读目录 1.什么是webSocket? 2.webSocket实现原理 3.webSocket优点 4.webSocket和socket的区别 5.webSocket API 6.webSocket ...

  4. TCP/IP, WebSocket 和 MQTT

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP和MQTT是应用层的协议.在这三者之间, TCP是HTTP和MQTT底层的协议.大家对HTTP很熟悉,这里简要介绍下MQTT.M ...

  5. WebSocket实现一个聊天室

    聊天室页面-->index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  6. 学习WebSocket

    初识WebSocket: index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  7. WebSocket协议详解及应用

    WebSocket协议详解及应用(七)-WebSocket协议关闭帧 本篇介绍WebSocket协议的关闭帧,包括客户端及服务器如何发送并处理关闭帧.关闭帧错误码及错误处理方法.本篇内容主要翻译自RF ...

  8. websocket初识

    一.官网 官网地址:http://www.websocket.org/ 二.websocket初识demo <input id="sendTxt" type="te ...

  9. websocket 初识

    websocket 初识 前言 其实很早就知道了 websocket 这个概念了,像现在大火的直播等使用的就是 websocket.之前找爬虫工作,对面问我爬过 websocket 网站没,很汗颜,那 ...

随机推荐

  1. emc 郵件設置

    1. 進入Data Domain管理界面后,在Administration--->Settings界面.點擊More mail Server--->Set Mail Server---&g ...

  2. PHP json数据格式化方法

    php 的json_encode能把数组转换为json格式的字符串.字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4.人阅读比较困难.现在这个方法在json_encode的基 ...

  3. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三)：配置ActiveXForm运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  4. java 访问 usb

    java 要访问 usb 设备,通常要自己写c/c++代码,然后再用 java 访问这些组件,以达到控制usb设备的目的.但现在有一个开源组件 libusb 帮我们做好了访问usb设备的封装(包括wi ...

  5. 数据分析(4):Scipy

    科学计算 最小二乘leastsq # -*- coding: utf-8 -*- def func(x,p): # p 参数列表 A,k,theta = p; # 可以一一对应赋值 return A* ...

  6. 《大话》之 策略模式 Vs 状态模式

    一.简介: 策略模式: 背景:商店要打折销售,各种版本的销售方式,让小菜心烦意乱 内容:    定义算法家族,分别封装起来,让他们之间可以户型替换,此模式让算法的变化,不会影响到使用算法的用户. 图文 ...

  7. WINDOWS系统下四叶草CLOVER引导U盘制作

    一.所需软件1.下载BootDiskUtility链接:http://pan.baidu.com/s/1bwBFyu 密码:glyk 2.下载Clover r3330 USB链接:http://pan ...

  8. java读取properties配置文件信息

    一.Java Properties类 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置 ...

  9. Git 使用命令

    $ git add . $ git commit -m "html files created 20160308 16:08" $ git push origin master 设 ...

  10. JS(ajax笔记)

    简介:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是与服务器交 ...