• HTML5之websocket


    • 初识websocket
    • websocket的应用:构造函数、常量、属性、方法
    • websocket应用示例

     一、初识websocket

    1.1Websocket是一种网络协议,是在HTTP基础上做出一些优化的协议,与HTTP无直接关系。WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

    1.2HTTP协议相关回顾:

    HTTP(超文本传输协议):规定了web浏览器如何从web服务器获取文档和向web服务器提交表单内容,以及web服务器如何响应这些请求和提交返回给浏览器。

    HTTP的第一个版本叫做HTTP/0.9是一种为互联网原始数据传输服务的简单协议。由RFC1945[6]定义的HTTP/1.0进一步完善了这个协议。它允许消息以类MIME消息的格式传送,它包括传输数据的辕信息和对请求/响应语义的修饰。

    HTTP/1.0没有充分考虑到分层代理,缓存,以及持久连接和虚拟主机的需求的影响。

    HTTP/1.1版本对1.0版本做了优化,开始支持长连接和缓存。

    1.3为什么需要webSocket?

    因为HTTP协议有一个缺陷:通信只能由客户端发起。服务器端不能时实发送最新数据给客户端,如果遇到客户端需要时实获取服务器上的最新数据,就需要使用Ajax轮训来请求最新数据。这种实现方案显然要消耗大量的网络请求资源,对于客户端的定时器触发轮训也是比较大的性能消耗,而服务器还需要处理很多多余的网络请求。

    通过webSocket可以建立一个连接只需要一次握手,然后,浏览器和服务器之间就可以直接进行数据交互。这就意味着服务器可以时实向客户端发送数据,而不需要重复的通过客户端来请求。

     

    1.4websocket请求报文:

    Request Headers(请求头

    Accept-Encoding:gzip,deflate,sdch(接受编码格式

    Accept-Language:zh-CN,zh,q=0.8(接受语言

    Cache-Control:no-cache(缓存控制:无缓冲

    Connection:Upgrade(连接

    Host:echo.websocket.org(请求的服务器地址:服务器域名/IP 端口

    Origin:file://(请求发起端

    Pragma:no-cache(报文指令

    Sec-WebSocket-Extenslons:permessage-deflate;client_max_window_bits(用户定义的字符串,用来区分同RUL下,不同服务所需要的协议

    Sec-WebSocket-key:8DtPaH9DH2Qsw6BK0q6FCw==(随机字符串,服务器端使用这个数据构造出一个SHA-1的信息摘要。把“Sec-WebSocket-key”加上一个特殊字符串,然后计算SHA-1摘要,之后进行BASE-64编码,将结果作为“Sec-WebSocket-Accept”头的值,返回给客户端。这样操作,可以尽量避免普通HTTP请求被误认为Websocket协议

    Sec-WebSocket-Version:13(表示支持的WebSocket版本,RFC645要求使用的版本是13,之前草案的版本均应当弃用

    Upgrade:websocket(表示希望升级到WebSocket协议

    User-Agent:Mozilla/5.0...(用户代理

    1.5WebSocket特点:

      (a)建立在TCP协议之上,服务器端的实现比较容易。

      (b)与HTTP协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用HTTP协议,因此握手时不容易屏蔽,能通过各种HTTP代理服务器。

      (c)数据格式比较轻量,性能开销小,通信高效。

      (d)可以发送文本,也可以发送二进制数据。

      (e)没有同源限制,客户端可以与任意服务器通信。(就是说可以通过websocket实现跨域)

      (f)协议标识符为ws(如果加密为wss)服务器网址就是url

    1.6浏览器兼容性:

    Chrome

    Firefox

    IE>=10

    Sarafi>=6

    Android>=4.4

    iOS>=8

     二、websocket的应用

    这里有一篇不错的教程:https://www.cnblogs.com/jingmoxukong/p/7755643.html

    2.1WebSocket客户端API

    var Socket = new WebSocket(url, [protocol]);

    URL:指定连接的URL。

    protocol:可选,指定可接受的子协议。

    2.2WebSocket的属性:

    WebSocket.binaryType:使用二进制的数据类型连接。

    WebSocket.bufferedAmount:未发送至服务器的字节数。

    WebSocket.extensions:服务器选择的扩展。

    WebSocket.onclose:指定连接关闭的回调函数。

    WebSocket.onerror:用于指定连接失败后的回调函数。

    WebSocket.onmessag:指定当从服务器接受到信息时的回调函数。

    WebSocket.onopen:指定连接成功后的回调函数。

    WebSocket.readyState:当前连接状态。

    WebSocket.url:WebSocket的绝对路径。

    2.3WebSocket的方法:

    WebSocket.close(code,reason):关闭当前连接

      参数code:一个数字状态码,他解释了连接关闭的原因。如果没有传递这个参数,默认使用1005。关于状态码可以了解:https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes

      参数reason:返回关闭原因,字符串类型,UTF-8编码的字符串不能超过123个字节。

    WebSocket.send(data):向服务器发送数据

      参数data:可以是USVString(文本字符串)、ArrayBuffer(数组对象发送的底层二进制数据)、Blob类型(将Blob中的原始数据以二进制传输)、ArrayBufferView(二进制帧的形式发送任何JavaScript类数组对象)。

    2.4简单的使用websocket

     1 var socket = new WebSocket('ws://echo.websocket.org/');
     2 //ws://echo.websocket.org/ 官方开发测试接口,向它发送什么数据它返回什么数据
     3 socket.onopen = function(){ //连接成功触发
     4     socket.send('hello');
     5 }
     6 socket.onmessage = function(e){ //接收到服务器响应触发
     7     console.log('message');
     8     console.log(e);
     9     console.log(e.data);
    10     socket.close(); //关闭连接
    11 }
    12 socket.onlose = function(e){ //关闭连接后触发
    13     console.log('close');
    14     console.log(e);
    15 }
    16 socket.onerror = function(){ //出现错误时触发
    17     console.log('erre');
    18 }

    2.5websocket.readyState当前连接状态与WebSocket常量

    WebSocket.CONNECTING = 0;(正在连接中)

    WebSocket.OPEN = 1;(已经连接并且可以通讯)

    WebSocket.CLOSING = 2;(连接正在关闭)

    WebSocket.CLOSED = 3;(连接已关闭或者没有连接成功)

    (关于示例应用,有时间再来补充)

  • 相关阅读:
    AcWing 276. I-区域
    学习笔记:可持久化线段树(主席树):静态 + 动态
    NOIP2016提高组 天天爱跑步
    AcWing 195. 骑士精神
    标准文档流
    css 盒模型
    css 继承性和层叠性
    css 选择器
    css 引入方式
    html body中的标签2
  • 原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11298759.html
Copyright © 2020-2023  润新知