WebSocket原理与实践(二)---WebSocket协议

时间：2022-06-08 00:52:50

WebSocket原理与实践(二)---WebSocket协议

WebSocket协议是为了解决web即时应用中服务器与客户端浏览器全双工通信问题而设计的。协议定义ws和wss协议，分别为普通请求和基于SSL的安全传输， ws端口是80，wss的端口为443.

WebSocket协议由两部分组成，握手和数据传输。

2-1 握手
WS的握手使用HTTP来实现的。客户端的握手消息是一个普通的，带有Upgrade头的，HTTP Request的消息。
先来看看如下代码：

<!DOCTYPE html>

<html>

  <head>

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

    <title>websocket</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

  </head>

  <body>

    <script type="text/javascript">

      var wsUrl = "wss://echo.websocket.org";

      var ws = new WebSocket(wsUrl);

      ws.onopen = function() {

        console.log('open');

      };

      ws.onmessage = function(msg) {

        console.log(msg.data);

      }

      ws.onclose = function() {

        console.log('已经被关闭了');

      }

    </script>

  </body>

</html>

页面运行后，我们可以看到链接到 wss://echo.websocket.org 期间记录的一个握手协议。先来看看客户端发送http的请求头：

GET /chat HTTP/1.1

Host:echo.websocket.org

Upgrade:websocket

Connection:Upgrade

Sec-WebSocket-Key:ALS2AoBJtUup67heKDgzFg==

Origin:file://

Sec-WebSocket-Version:13

服务器响应的头字段

Connection:Upgrade

Sec-WebSocket-Accept:qyzx/EgbRK15QNmr5PhpMQrPZMM=

Server: Kaazing Gateway

Upgrade:websocket

下面是请求和响应头字段的含义：
Upgrade: websocket, 告诉服务器这个HTTP链接是升级的WebSocket协议。
Connection:Upgrade 告知服务器当前请求链接是升级的。
Origin: 该字段是用来防止客户端浏览器使用脚本进行未授权的跨源攻击，服务器要根据这个字段是否接受客户端的socket链接。
可以返回一个HTTP错误状态码来拒绝连接。

Sec-WebSocket-Key: ALS2AoBJtUup67heKDgzFg==
Sec-WebSocket-Accept: qyzx/EgbRK15QNmr5PhpMQrPZMM=

Sec-WebSocket-Key 的值是一串长度为24的字符串是客户端随机生成的base64编码的字符串，它发送给服务器，服务器需要使用它经过一定的运算规则生成服务器的key，然后把服务器的key发到客户端去，客户端验证正确后，握手成功。

握手的具体原理：当我们客户端执行 new WebSocket(''wss://echo.websocket.org')的时候，客户端就会发起请求报文进行握手申请，报文中有一个key就是
Sec-WebSocket-Key，服务器获取到key，会将这个key与字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11相连，对新的字符串通过sha1安全散列算法计算出结果后，再进行Base64编码，并且将结果放在请求头的"Sec-WebSocket-Accept"，最后返回给客户端，
客户端进行验证后，握手成功。握手成功后就可以开始数据传输了。

下面是实现一个简单的握手协议的demo，代码如下：

### 目录结构如下：

demo
  |--- hands.html
  |--- hands.js

hands.html 代码如下：

<html>

<head>

  <title>WebSocket Demo</title>

</head>

<body>

  <script type="text/javascript">

    var ws = new WebSocket("ws://127.0.0.1:8000");

    ws.onerror = function(e) {

      console.log(e);

    };

    ws.onopen = function() {

      console.log('握手成功');

    }

  </script>

</body>

</html>

hands.js 代码如下：

var crypto = require('crypto');

var WS = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';

require('net').createServer(function(o) {

  var key;

  o.on('data', function(e) {

    if (!key) {

      console.log(e);

      key = e.toString().match(/Sec-WebSocket-Key: (.+)/)[1];

      console.log(key);

      // WS的字符串 加上 key, 变成新的字符串后做一次sha1运算，最后转换成Base64

      key = crypto.createHash('sha1').update(key+WS).digest('base64');

      console.log(key);

      // 输出字段数据，返回到客户端，

      o.write('HTTP/1.1 101 Switching Protocol\r\n');

      o.write('Upgrade: websocket\r\n');

      o.write('Connection: Upgrade\r\n');

      o.write('Sec-WebSocket-Accept:' +key+'\r\n');

      // 输出空行，使HTTP头结束

      o.write('\r\n');

    } else {

      // 数据处理

    }

  })

}).listen(8000);

首先在命令行中 进入相对应项目目录后，运行 node hands.js, 然后打开 hands.html 运行一下即可看到 命令行中打印出来如下信息：

$ node hands.js

<Buffer 47 45 54 20 2f 20 48 54 54 50 2f 31 2e 31 0d 0a 48 6f 73 74 3a 20 31 32 37 2e 30 2e 30 2e 31 3a 38 30 30 30 0d 0a 43 6f 6e 6e 65 63 74 69 6f 6e 3a 20 ... >

+iHlfGTolBaWYpnyTIw22g==

W7IEsdQtwv8EP2204kssK/6pg+c=

然后在浏览器中查看请求头如下信息：

Request Headers：

Connection:Upgrade

Host:127.0.0.1:8000

Origin:file://

Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits

Sec-WebSocket-Key:+iHlfGTolBaWYpnyTIw22g==

Sec-WebSocket-Version:13

Upgrade:websocket

响应头如下信息：

Response Headers:

Connection:Upgrade

Sec-WebSocket-Accept:W7IEsdQtwv8EP2204kssK/6pg+c=

Upgrade:websocket

如上信息可以看到，获取报文中的key代码：
key = e.toString().match(/Sec-WebSocket-Key: (.+)/)[1];
console.log(key); // 打印 +iHlfGTolBaWYpnyTIw22g==

和 Request Headers：中的 Sec-WebSocket-Key 值是一样的，该值是浏览器自动生成的，然后获取该值后，与 '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'，相连，对新的字符串通过sha1安全散列算法计算出结果后，再进行Base64编码，
并且将结果放在请求头的"Sec-WebSocket-Accept"，最后返回给客户端，客户端进行验证后，握手成功。在浏览器中可以看到打印出 握手成功了。

github上查看demo

WebSocket原理与实践(二)---WebSocket协议的更多相关文章

  1. &lbrack;从Paxos到ZooKeeper&rsqb;&lbrack;分布式一致性原理与实践&rsqb;&lt&semi;二&gt&semi;一致性协议&lbrack;Paxos算法&rsqb;

    Overview 在<一>有介绍到,一个分布式系统的架构设计,往往会在系统的可用性和数据一致性之间进行反复的权衡,于是产生了一系列的一致性协议. 为解决分布式一致性问题,在长期的探索过程中 ...

  2. WebSocket原理与实践&lpar;一&rpar;---基本原理

    WebSocket原理与实践(一)---基本原理 一:为什么要使用WebSocket?1. 了解现有的HTTP的架构模式:Http是客户端/服务器模式中请求-响应所用的协议,在这种模式中,客户端(一般 ...

  3. WebSocket原理与实践&lpar;四&rpar;--生成数据帧

    WebSocket原理与实践(四)--生成数据帧 从服务器发往客户端的数据也是同样的数据帧,但是从服务器发送到客户端的数据帧不需要掩码的.我们自己需要去生成数据帧,解析数据帧的时候我们需要分片. 消息 ...

  4. WebSocket原理与实践&lpar;三&rpar;--解析数据帧

    WebSocket原理与实践(三)--解析数据帧 1-1 理解数据帧的含义:   在WebSocket协议中,数据是通过帧序列来传输的.为了数据安全原因,客户端必须掩码(mask)它发送到服务器的所有 ...

  5. WebSocket原理与实践

    开题思考:如何实现客户端及时获取服务端数据? Polling 指客户端每隔一段时间(周期性)请求服务端获取数据,可能有更新数据返回,也可能什么都没有,它并不在乎服务端数据有无更新.(Web端一般采用a ...

  6. RPC原理与实践&lpar;二&rpar;----Thrift分层模型

    这一节我们从一下几个方面来讲一下Thrift的分层架构,按照官方的定义这是Thrift的网络栈,其中网络栈中分为一下几个部分,(由栈顶到栈底)server,processor,protocol,tra ...

  7. HTML5&lpar;十二&rpar;——一文读懂 WebSocket 原理

    一.WebSocket 由来 WebSocket 是一个持久化的协议,通过第一次 HTTP Request 建立连接之后,再把通信协议升级成 websocket,保持连接状态,后续的数据交换不需要再重 ...

  8. 萌萌的websocket原理解析

    转载自:http://www.zhihu.com/question/20215561 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持 ...

  9. WebSocket原理及与http1&period;0&sol;1&period;1 long poll和 ajax轮询的区别【转自知乎】

    一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)首先HTTP有1.1和1.0之说,也就是所谓的ke ...

随机推荐

  1. java 13-3 int类型的包装包Integer

    1.Integer的概述 需求1:把100这个数据的二进制,八进制,十六进制计算出来 需求2:判断一个数据是否是int范围内的.  首先你得知道int的范围是多大? 为了对基本数据类型进行更多的操作, ...

  2. HDOJ 1870

    #include<stdio.h> #include<stack> #include<string.h> #include<iostream> usin ...

  3. 解决SQLServer 2008 日志无法收缩，收缩后大小不改变

    问题 数据库日志文件上G,或者几十G了,使用日志收缩,和日志截断收缩都不管用.体积一直减不下来.. 解决方案 查看日志信息 在查询分析器中执行如下代码来查看日志信息:  DBCC LOGINFO('数 ...

  4. 命名参数名（含&ast;args ， &ast; &ast;kw的区别）

    要限制关键字参数的名字,就可以用命名关键字参数 # coding=utf-8 # 命名关键字参数需要一个特殊分隔符*,*后面的参数被视为命名关键字参数.调用方式如下 def person(name, ...

  5. 谈谈Mysql主从同步延迟分析及解决方案

    一.MySQL的数据库主从复制原理 MySQL主从复制实际上基于二进制日志,原理可以用一张图来表示: 分为四步走: 1. 主库对所有DDL和DML产生的日志写进binlog: 2. 主库生成一个 lo ...

  6. PythonStudy1——Python 值拷贝 浅拷贝 深拷贝

    拷贝:对值进行复制的过程 # 值拷贝:应用场景最多  ls = [1, 'abc', [10]] ls1 = ls # ls1直接将ls中存放的地址拿过来  # ls内部的值发生任何变化,ls1都会随 ...

  7. mysql caching&lowbar;sha2&lowbar;password异常分析

    使用navicat连接mysql报错 解决办法: 通过命令行登录mysql后,输入: alter user 'root'@'localhost' IDENTIFIED WITH mysql_nativ ...

  8. 洛谷P3382 【模板】三分法&lpar;三分&rpar;

    题目描述 如题,给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 输入输出格式 输入格式: 第一行一次包含一个正整数N和两个实数l.r,含 ...

  9. Struts2数据验证机制

    1. 手动验证的实现 只需要在继承ActionSupport类的情况下,直接重写validate()方法即可.使用validate()方法可以对用户请求的多个Action方法进行验证,但其验证的逻辑是 ...

  10. java----监听器的作用

    Web监听器导图详解   监听器是JAVA Web开发中很重要的内容,其中涉及到的知识,可以参考下面导图: Web监听器 1 什么是web监听器? web监听器是一种Servlet中的特殊的类,它们能 ...

相关文章