WebSocket协议

一个WebSocket的简单Echo例子：例子代码来自：http://www.websocket.org/echo.html

使用一个文本编辑器，把下面代码复制保存在一个 websocket.html 文件中，然后只要在浏览器中打开它，页面就会使用 websocket 自动连接，发送一个消息，显示接受到的服务器响应，然后关闭连接。

<!DOCTYPE html>  

<meta charset="utf-8" />  

<title>WebSocket Test</title>  

<script language="javascript"type="text/javascript">  

    var wsUri ="ws://echo.websocket.org/"; 

    var output;  

    

    function init() { 

        output = document.getElementById("output"); 

        testWebSocket(); 

    }  

 

    function testWebSocket() { 

        websocket = new WebSocket(wsUri); 

        websocket.onopen = function(evt) { 

            onOpen(evt) 

        }; 

        websocket.onclose = function(evt) { 

            onClose(evt) 

        }; 

        websocket.onmessage = function(evt) { 

            onMessage(evt) 

        }; 

        websocket.onerror = function(evt) { 

            onError(evt) 

        }; 

    }  

 

    function onOpen(evt) { 

        writeToScreen("CONNECTED"); 

        doSend("WebSocket rocks"); 

    }  

 

    function onClose(evt) { 

        writeToScreen("DISCONNECTED"); 

    }  

 

    function onMessage(evt) { 

        writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>'); 

        websocket.close(); 

    }  

 

    function onError(evt) { 

        writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data); 

    }  

 

    function doSend(message) { 

        writeToScreen("SENT: " + message);  

        websocket.send(message); 

    }  

 

    function writeToScreen(message) { 

        var pre = document.createElement("p"); 

        pre.style.wordWrap = "break-word"; 

        pre.innerHTML = message; 

        output.appendChild(pre); 

    }  

 

    window.addEventListener("load", init, false);  

</script>  

<h2>WebSocket Test</h2>  

<div id="output"></div>  

</html>

主要代码解读：

申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。。

       var wsUri ="ws://echo.websocket.org/"; 
       websocket = new WebSocket(wsUri); 

WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，

我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

当Browser和WebSocketServer连接成功后，会触发onopen消息；

        websocket.onopen = function(evt) { 

        }; 

如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；

        websocket.onerror = function(evt) { 

        }; 

当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；

        websocket.onmessage = function(evt) { 

        }; 

当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。

        websocket.onclose = function(evt) { 

        }; 

WebSocket与TCP、HTTP的关系

WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。

WebSocket和Http协议一样都属于应用层的协议，那么他们之间有没有什么关系呢？答案是肯定的，WebSocket在建立握手连接时，数据是通过http协议传输的，但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。

 

 

 

 

 

 

 

 

 

 

WebSocket通讯详细解读

 从下图可以明显的看到，分三个阶段：

  • 打开握手
  • 数据传递
  • 关闭握手

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下图来自：https://code.google.com/p/websocket-sample/wiki/Tips

显示了WebSocket主要的三步 浏览器和 服务器端分别做了那些事情。

 

WebSocket的优点
a）、服务器与客户端之间交换的标头信息很小，大概只有2字节；
b）、客户端与服务器都可以主动传送数据给对方；
c）、不用频率创建TCP请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源；

建立连接的握手 

当Web应用程序调用new WebSocket(url)接口时，Browser就开始了与地址为url的WebServer建立握手连接的过程。

1. Browser与WebSocket服务器通过TCP三次握手建立连接，如果这个建立连接失败，那么后面的过程就不会执行，Web应用程序将收到错误消息通知。

2. 在TCP建立连接成功后，Browser/UA通过http协议传送WebSocket支持的版本号，协议的字版本号，原始地址，主机地址等等一些列字段给服务器端。

3.     WebSocket服务器收到Browser/UA发送来的握手请求后，如果数据包数据和格式正确，客户端和服务器端的协议版本号匹配等等，就接受本次握手连接，并给出相应的数据回复，同样回复的数据包也是采用http协议传输。 

4.     Browser收到服务器回复的数据包后，如果数据包内容、格式都没有问题的话，就表示本次连接成功，触发onopen消息，此时Web开发者就可以在此时通过send接口想服务器发送数据。否则，握手连接失败，Web应用程序会收到onerror消息，并且能知道连接失败的原因。 

 

这个握手很像HTTP，但是实际上却不是，它允许服务器以HTTP的方式解释一部分handshake的请求，然后切换为websocket

数据传输

WebScoket协议中，数据以帧序列的形式传输。
考虑到数据安全性，客户端向服务器传输的数据帧必须进行掩码处理。服务器若接收到未经过掩码处理的数据帧，则必须主动关闭连接。
服务器向客户端传输的数据帧一定不能进行掩码处理。客户端若接收到经过掩码处理的数据帧，则必须主动关闭连接。
针对上情况，发现错误的一方可向对方发送close帧（状态码是1002，表示协议错误），以关闭连接。

 

 

http://www.cnblogs.com/caosiyang/archive/2012/08/14/2637721.html 

关闭WebSocket（握手）

 

 

使用Wireshark监控到的上面WebSocket例子的数据。

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: echo.websocket.org
Origin: null
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: Qcgtb1RJ6HceeTRLPFux/A==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
Cookie: __utma=9925811.951031439.1365242028.1365980711.1366068689.5; __utmc=9925811; __utmz=9925811.1365242028.1.1.utmcsr=websocket.org|utmccn=(referral)|utmcmd=referral|utmcct=/

HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Accept: 84Qpane33QhxOmcz8bGkFdE1AHk=
Server: Kaazing Gateway
Date: Tue, 16 Apr 2013 09:51:25 GMT
Access-Control-Allow-Origin: null
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Headers: x-websocket-extensions
Access-Control-Allow-Headers: x-websocket-version
Access-Control-Allow-Headers: x-websocket-protocol

..a[
J6>h..8a/.{x%.0y..WebSocket rocks..i.....

时间： 2024-11-05 19:24:57

WebSocket协议的相关文章

Websocket协议的学习、调研和实现

1. websocket是什么 Websocket是html5提出的一个协议规范,参考rfc6455. websocket约定了一个通信的规范,通过一个握手的机制,客户端(浏览器)和服务器(webserver)之间能建立一个类似tcp的连接,从而方便c-s之间的通信.在websocket出现之前,web交互一般是基于http协议的短连接或者长连接. WebSocket是为解决客户端与服务端实时通信而产生的技术.websocket协议本质上是一个基于tcp的协议,是先通过HTTP/HTTPS协议发

Websocket协议之握手连接

Websocket协议是为了解决web即时应用中服务器与客户端浏览器全双工通信的问题而设计的,是完全意义上的Web应用端的双向通信技术,可以取代之前使用半双工HTTP协议而模拟全双工通信,同时克服了带宽和访问速度等的诸多问题.协议定义为ws和wss协议,分别为普通请求和基于SSL的安全传输,占用端口与http协议系统,ws为80端口,wss为443端口,这样可以支持HTTP代理. 协议包含两个部分,第一个是"握手",第二个是数据传输. 一.Websocket URI 定义的两个协议框架

关于如何让tomcat6支持websocket协议的问题

问题描述 关于如何让tomcat6支持websocket协议的问题 使用websocket需要至少tomcat7的支持可是我们现在的项目不能再7下面跑 请问有什么方法让6支持websocket协议

Websocket协议详解及简单实例代码_基础知识

Websocket协议详解 关于websocket的协议是用来干嘛的,请参考其他文章. WebSocket关键词 HTML5协议,实时,全双工通信,长连接 WebSocket比传统Http的好处 客户端与服务端只建立一个TCP连接,可以使用更少的连接 WebSocket的服务端可以将数据推送到客户端,如实时将证券信息反馈到客户端(这个很关键),实时天气数据,比http请求响应模式更灵活 更轻量的协议头,减少数据传送量 数据帧格式 下图为手工打造的数据帧格式 /** * fin |masked |

基于node实现websocket协议_node.js

一.协议 WebSocket是一种基于TCP之上的客户端与服务器全双工通讯的协议,它在HTML5中被定义,也是新一代webapp的基础规范之一. 它突破了早先的AJAX的限制,关键在于实时性,服务器可以主动推送内容 到客户端!可能的应用有:多人在线游戏,即时聊天,实时监控,远程桌面,新闻服务器等等. 对于我自己,当前最想尝试的是canvas+websocket组合起来能做什么. 二.实现由于握手的过程是一个标准的HTTP请求,因此 websocket 的实现有两种选择:1)TCP上实现: 2)

HTML5 直播协议之 WebSocket 和 MSE

当前为了满足比较火热的移动 Web 端直播需求, 一系列的 HTML5 直播技术迅速的发展了起来. 常见的可用于 HTML5 的直播技术有 HLS, WebSocket 与 WebRTC. 今天我要向大家介绍一下 WebSocket 与 MSE 相关的内容, 并在最后通过一个实际的例子, 来展示其具体的用法. 大纲 WebSocket 协议介绍. WebSocket Client/Server API 介绍. MSE 介绍. fMP4 介绍. Demo 展示. WebSocket 通常的 Web

Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器_python

最近在做的一个项目中需要使用到HTML5中引入的WebSocket技术,本来以为应该很容易就能搞定,谁知道在真正上手开发了以后才发现有很多麻烦的地方,虽然我们是一个以前端开发和设计见长的团队,而且作为一个二手程序猿又长期不被待见,但是为了让有同样需求的朋友少走些弯路,我还是决定把实现方法贴在这个地方. 关于WebSocket的基本概念,维基百科上解释的很清楚,而且网上也能搜出来一大把,这里就略过不表,直接进入正题. 这次的问题首先有一个前提,就是得用Python来实现这个服务器,如果对具体语言没

websocket实现握手协议

问题描述 websocket实现握手协议 在websocket握手协议中是所有的客户端都可以访问服务器吗?如果不是该怎么给他添加限制条件呀! 解决方案 是的所有的客户端都可以访问服务器 如果你需要限制某些用户,就加一个登录过程 解决方案二: 客户端和服务器都要支持websocket协议才行.比如tomcat7开始才支持websocket协议. 解决方案三: 怎么只加一个登录过程呀!origin跟的后面是什么呢?

WebSocket 和 Golang 实现聊天功能

这个示例应用程序展示了如何使用 WebSocket, Golang 和 jQuery 创建一个简单的web聊天应用程序.这个示例的源代码在 https://github.com/waylau/goChat . Running the example 运行示例 这个示例需要 Golang 开发环境. 该页面描述如何安装开发环境. 一旦你去启动和运行,您可以下载.构建和运行的例子, 使用命令: go get gary.burd.info/go-websocket-chat go-websocket-