您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 协议格式,5分钟从入门到精通

协议格式,5分钟从入门到精通

发布时间:2019-09-12 10:54编辑:1010cc时时彩客户端浏览(86)

    WebSocket:5分钟从入门到精通

    2018/01/08 · HTML5 · 1 评论 · websocket

    原文出处: 程序猿小卡   

    WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。

    本文来自云栖社区程序猿小卡的技术分享。

    一、内容概览

    WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。

    HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。

    1、前言

    WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。

    (本文同步发布于:http://www.52im.net/thread-1341-1-1.html)

    二、什么是WebSocket

    HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。

    对大部分web开发者来说,上面这段描述有点枯燥,其实只要记住几点:

    1. WebSocket可以在浏览器里使用
    2. 支持双向通信
    3. 使用很简单

    对大部分web开发者来说,上面这段描述有点枯燥,其实只要记住几点:

    2、参考文章

    《WebSocket详解(一):初步认识WebSocket技术》

    《WebSocket详解(二):技术原理、代码演示和应用案例》

    《WebSocket详解(三):深入WebSocket通信协议细节》

    《WebSocket详解(四):刨根问底HTTP与WebSocket的关系(上篇)》

    《WebSocket详解(五):刨根问底HTTP与WebSocket的关系(下篇)》

    《WebSocket详解(六):刨根问底WebSocket与Socket的关系》

    1、有哪些优点

    说到优点,这里的对比参照物是HTTP协议,概括地说就是:支持双向通信,更灵活,更高效,可扩展性更好。

    1. 支持双向通信,实时性更强。
    2. 更好的二进制支持。
    3. 较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节(取决于数据包长度),客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
    4. 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)

    对于后面两点,没有研究过WebSocket协议规范的同学可能理解起来不够直观,但不影响对WebSocket的学习和使用。

    1. WebSocket可以在浏览器里使用
    2. 支持双向通信
    3. 使用很简单

    3、更多资料

    Web端即时通讯新手入门贴:

    《新手入门贴:详解Web端即时通讯技术的原理》

    Web端即时通讯技术盘点请参见:

    《Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE》

    关于Ajax短轮询:

    找这方面的资料没什么意义,除非忽悠客户,否则请考虑其它3种方案即可。

    有关Comet技术的详细介绍请参见:

    《Comet技术详解:基于HTTP长连接的Web端实时通信技术》

    《WEB端即时通讯:HTTP长连接、长轮询(long polling)详解》

    《WEB端即时通讯:不用WebSocket也一样能搞定消息的即时性》

    《开源Comet服务器iComet:支持百万并发的Web端即时通讯方案》

    有关WebSocket的详细介绍请参见:

    《新手快速入门:WebSocket简明教程》

    《WebSocket详解(一):初步认识WebSocket技术》

    《WebSocket详解(二):技术原理、代码演示和应用案例》

    《WebSocket详解(三):深入WebSocket通信协议细节》

    《Socket.IO介绍:支持WebSocket、用于WEB端的即时通讯的框架》

    《socket.io和websocket 之间是什么关系?有什么区别?》

    有关SSE的详细介绍文章请参见:

    《SSE技术详解:一种全新的HTML5服务器推送事件技术》

    更多WEB端即时通讯文章请见:

    http://www.52im.net/forum.php?mod=collection&action=view&ctid=15

    2、需要学习哪些东西

    对网络应用层协议的学习来说,最重要的往往就是连接建立过程数据交换教程。当然,数据的格式是逃不掉的,因为它直接决定了协议本身的能力。好的数据格式能让协议更高效、扩展性更好。

    下文主要围绕下面几点展开:

    1. 如何建立连接
    2. 如何交换数据
    3. 数据帧格式
    4. 如何维持连接

    1、有哪些优点

    说到优点,这里的对比参照物是HTTP协议,概括地说就是:支持双向通信,更灵活,更高效,可扩展性更好。

    1. 支持双向通信,实时性更强。
    2. 更好的二进制支持。
    3. 较少的控制开销。连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节,客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部。
    4. 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议。(比如支持自定义压缩算法等)

    对于后面两点,没有研究过WebSocket协议规范的同学可能理解起来不够直观,但不影响对WebSocket的学习和使用。

    4、什么是WebSocket

    HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。(更多WebSocket的相关介绍,可参见“参考文章”这一节)

    对大部分web开发者来说,上面这段描述有点枯燥,其实只要记住几点:

    WebSocket可以在浏览器里使用;

    支持双向通信;

    使用很简单。

    三、入门例子

    在正式介绍协议细节前,先来看一个简单的例子,有个直观感受。例子包括了WebSocket服务端、WebSocket客户端(网页端)。完整代码可以在 这里 找到。

    这里服务端用了ws这个库。相比大家熟悉的socket.iows实现更轻量,更适合学习的目的。

    2、需要学习哪些东西

    对网络应用层协议的学习来说,最重要的往往就是连接建立过程数据交换教程。当然,数据的格式是逃不掉的,因为它直接决定了协议本身的能力。好的数据格式能让协议更高效、扩展性更好。

    下文主要围绕下面几点展开:

    1. 如何建立连接
    2. 如何交换数据
    3. 数据帧格式
    4. 如何维持连接

    在正式介绍协议细节前,先来看一个简单的例子,有个直观感受。例子包括了WebSocket服务端、WebSocket客户端。完整代码可以在 这里 找到。

    这里服务端用了ws这个库。相比大家熟悉的socket.iows实现更轻量,更适合学习的目的。

    4.1 有哪些优点

    说到优点,这里的对比参照物是HTTP协议,概括地说就是:支持双向通信,更灵活,更高效,可扩展性更好。

    具体优化如下:

    1)支持双向通信,实时性更强;

    2)更好的二进制支持;

    3)较少的控制开销:

    连接创建后,ws客户端、服务端进行数据交换时,协议控制的数据包头部较小。在不包含头部的情况下,服务端到客户端的包头只有2~10字节(取决于数据包长度),客户端到服务端的的话,需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部;

    4)支持扩展:

    ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议(比如支持自定义压缩算法等)。

    对于后面两点,没有研究过WebSocket协议规范的同学可能理解起来不够直观,但不影响对WebSocket的学习和使用。

    1、服务端

    代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志。

    var app = require('express')(); var server = require('http').Server(app); var WebSocket = require('ws'); var wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { console.log('server: receive connection.'); ws.on('message', function incoming(message) { console.log('server: received: %s', message); }); ws.send('world'); }); app.get('/', function (req, res) { res.sendfile(__dirname '/index.html'); }); app.listen(3000);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var app = require('express')();
    var server = require('http').Server(app);
    var WebSocket = require('ws');
     
    var wss = new WebSocket.Server({ port: 8080 });
     
    wss.on('connection', function connection(ws) {
        console.log('server: receive connection.');
        
        ws.on('message', function incoming(message) {
            console.log('server: received: %s', message);
        });
     
        ws.send('world');
    });
     
    app.get('/', function (req, res) {
      res.sendfile(__dirname '/index.html');
    });
     
    app.listen(3000);

    1、服务端

    代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志。

    var app = require('express')();var server = require.Server;var WebSocket = require;var wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection { console.log('server: receive connection.'); ws.on('message', function incoming { console.log('server: received: %s', message); }); ws.send;});app.get('/', function  { res.sendfile(__dirname   '/index.html');});app.listen;
    

    4.2 需要学习哪些东西

    对网络应用层协议的学习来说,最重要的往往就是连接建立过程、数据交换教程。当然,数据的格式是逃不掉的,因为它直接决定了协议本身的能力。好的数据格式能让协议更高效、扩展性更好。

    下文主要围绕下面几点展开:

    如何建立连接;

    如何交换数据;

    数据帧格式;

    如何维持连接。

    2、客户端

    代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志。

    1
     

    2、客户端

    代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志。

    <script> var ws = new WebSocket('ws://localhost:8080'); ws.onopen = function () { console.log('ws onopen'); ws.send('from client: hello'); }; ws.onmessage = function  { console.log('ws onmessage'); console.log('from server: '   e.data); };</script>
    

    5、入门例子

    在正式介绍协议细节前,先来看一个简单的例子,有个直观感受。例子包括了WebSocket服务端、WebSocket客户端(网页端)。

    本节完整例代码请下载本附件:

    (请从链接:http://www.52im.net/thread-1341-1-1.html 处下载)

    这里服务端用了ws这个库。相比大家熟悉的socket.io(详见《Socket.IO介绍:支持WebSocket、用于WEB端的即时通讯的框架》),ws实现更轻量,更适合学习的目的。

    3、运行结果

    可分别查看服务端、客户端的日志,这里不展开。

    服务端输出:

    server: receive connection. server: received hello

    1
    2
    server: receive connection.
    server: received hello

    客户端输出:

    client: ws connection is open client: received world

    1
    2
    client: ws connection is open
    client: received world

    3、运行结果

    可分别查看服务端、客户端的日志,这里不展开。

    服务端输出:

    server: receive connection.server: received hello
    

    客户端输出:

    client: ws connection is openclient: received world
    

    前面提到,WebSocket复用了HTTP的握手通道。具体指的是,客户端通过HTTP请求与WebSocket服务端协商升级协议。协议升级完成后,后续的数据交换则遵照WebSocket的协议。

    5.1 服务端

    代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志。

    varapp = require('express')();

    varserver = require('http').Server(app);

    varWebSocket = require('ws');

    varwss = newWebSocket.Server({ port: 8080 });

    wss.on('connection', functionconnection(ws) {

        console.log('server: receive connection.');

        ws.on('message', functionincoming(message) {

            console.log('server: received: %s', message);

        });

        ws.send('world');

    });

    app.get('/', function(req, res) {

      res.sendfile(__dirname '/index.html');

    });

    app.listen(3000);

    四、如何建立连接

    前面提到,WebSocket复用了HTTP的握手通道。具体指的是,客户端通过HTTP请求与WebSocket服务端协商升级协议。协议升级完成后,后续的数据交换则遵照WebSocket的协议。

    1、客户端:申请协议升级

    首先,客户端发起协议升级请求。可以看到,采用的是标准的HTTP报文格式,且只支持GET方法。

    GET / HTTP/1.1Host: localhost:8080Origin: http://127.0.0.1:3000Connection: UpgradeUpgrade: websocketSec-WebSocket-Version: 13Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==
    

    重点请求首部意义如下:

    • Connection: Upgrade:表示要升级协议
    • Upgrade: websocket:表示要升级到websocket协议。
    • Sec-WebSocket-Version: 13:表示websocket的版本。如果服务端不支持该版本,需要返回一个Sec-WebSocket-Versionheader,里面包含服务端支持的版本号。
    • Sec-WebSocket-Key:与后面服务端响应首部的Sec-WebSocket-Accept是配套的,提供基本的防护,比如恶意的连接,或者无意的连接。

    注意,上面请求省略了部分非重点请求首部。由于是标准的HTTP请求,类似Host、Origin、Cookie等请求首部会照常发送。在握手阶段,可以通过相关请求首部进行 安全限制、权限校验等。

    5.2 客户端

    代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志。

      varws = newWebSocket('ws://localhost:8080');

      ws.onopen = function() {

        console.log('ws onopen');

        ws.send('from client: hello');

      };

      ws.onmessage = function(e) {

        console.log('ws onmessage');

        console.log('from server: ' e.data);

      };

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:协议格式,5分钟从入门到精通

    关键词:

上一篇:游戏开发,决胜三分球

下一篇:没有了