首页 web前端 H5教程 Websocket 协议解析

Websocket 协议解析

Mar 30, 2017 pm 02:38 PM

WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。

       现 很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。

       而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求。

       在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,改变了原有的B/S模式。

1099.png

 在这里是关于Websocket在 php 中的实现,这篇文章里,我主要对websocket 协议进行一个简单的介绍。

Websocket 业务模型

1110.png

浏览器端的websocket 请求一般是

 // javacsript
  var ws = new WebSocket("ws://127.0.0.1:4000");
  ws.onopen = function(){
    console.log("succeed");
  };
  ws.onerror = function(){
    console.log(“error”);
  };
  ws.onmessage = function(e){
  console.log(e); 
  }
登录后复制

当 new 一个 websocket 对象之后,就会向服务器发送一个 get 请求

1111.png

这个请求是对摸个服务器的端口发送的,一般的话,会预先在服务器将一个socket 绑定到一个端口上,客户端和服务器端在这个预定的端口上通信(我这里绑定的就是 4000 端口,默认情况下,websocke 使用 80 端口)。

然 后,在服务器端的socket监听到这个packet 之后就生成一个新的 socket,将发送过来的数据中的 Sec-WebSocket-Key 解析出来,然后按照把“Sec-WebSocket-Ke”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA- C5AB0DC85B11”。使用SHA-1加密,之后进行BASE-64编码,将结果做为“Sec-WebSocket-Accept”头的值,返回给 客户端。

客户端收到这个之后,就会将 通信协议 upgrade 到 websocket 协议。

1112.png

然后就会在这个持久的通道下进行通信,包括浏览器的询问,服务器的push,双方是在一个全双工的状态下相互通信。 切换后的websocket 协议中的 数据传输帧的格式(此时不再使用html协议) 官方文档给出的说明:

1113.jpg

直接看这个,谁都会有点头大: 我花了一幅图来简单的解释这个 frame 的结构。

1114.png

各字段的解释:

FIN 1bit 表示信息的最后一帧,flag,也就是标记符

RSV 1-3 1bit each 以后备用的 默认都为 0

Opcode 4bit 帧类型,

Mask 1bit 掩码,是否加密数据,默认必须置为1

Payload len 7bit 数据的长度,当这个7 bit的数据 == 126 时,后面的2 个字节也是表示数 据长度,当它 == 127 时,后面的 8 个字节表示数据长度Masking-key 1 or 4 bit 掩码Payload data playload len bytes 数据

所以我们这里的代码,通过判断 Playload len的值,来用 substr 截取 Masking-key 和 PlayloadData。

根据掩码解析数据的方法是:

for( i = 0; i < data.length ; i++){
   orginalData += data[i]  ^  maskingKey[i mod 4]; 
}
登录后复制

在PHP中,当我们收到数据之后,按照这里的格式截取数据,并将其按照这里的方法解析后就得到了浏览器发送过来的数据。 当我们想把数据发送给浏览器时,也要按照这个格式组装frame。 这里是我的方法:

function frame($s){
   $a = str_split($s, 125);
   if (count($a) == 1){
   return "\x81" . chr(strlen($a[0])) . $a[0];
   }
   $ns = "";
   foreach ($a as $o){
   $ns .= "\x81" . chr(strlen($o)) . $o;
   }
   return $ns;
  }
登录后复制

 强 行将要发送的数据分割成 125 Byte / frame,这样 playload len 只需要 7 bits。也就是直接将数据的长度的ascall码拼接上去,然后后面跟上要发送的数据。 每一个 frame 前面加的 ‘\x81’ 用二进制就是: 1000 0001 1000 :

1 是 FIN

000 是三个备用的bit

0001 : 指的是 opcode 官方的解释:

1115.jpg

       可以设置 opcode的值,来告诉浏览器这个frame的数据属性。

以上就是Websocket 协议解析的内容,更多相关内容请关注PHP中文网(www.php.cn)!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

Java和WebSocket的结合:如何实现实时视频流播放 Java和WebSocket的结合:如何实现实时视频流播放 Dec 17, 2023 pm 05:50 PM

随着互联网技术的不断发展,实时视频流已经成为了互联网领域的一个重要应用。要实现实时视频流播放,其中的关键技术包括WebSocket和Java。本文将介绍如何结合使用WebSocket和Java实现实时视频流播放,并提供相关的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工通信的协议,它在Web

如何使用PHP和WebSocket实现实时通信 如何使用PHP和WebSocket实现实时通信 Dec 17, 2023 pm 10:24 PM

随着互联网技术的不断发展,实时通信已经成为了日常生活中不可缺少的一部分。利用WebSockets技术可以实现高效、低延迟的实时通信,而PHP作为互联网领域使用最广泛的开发语言之一,也提供了相应的WebSocket支持。本文将为大家介绍如何使用PHP和WebSocket实现实时通信,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单

golang WebSocket与JSON的结合:实现数据传输和解析 golang WebSocket与JSON的结合:实现数据传输和解析 Dec 17, 2023 pm 03:06 PM

golangWebSocket与JSON的结合:实现数据传输和解析在现代的Web开发中,实时数据传输变得越来越重要。WebSocket是一种用于实现双向通信的协议,与传统的HTTP请求-响应模型不同,WebSocket允许服务器向客户端主动推送数据。而JSON(JavaScriptObjectNotation)是一种用于数据交换的轻量级格式,它简洁易读

PHP和WebSocket: 实现实时数据传输的最佳实践方法 PHP和WebSocket: 实现实时数据传输的最佳实践方法 Dec 18, 2023 pm 02:10 PM

PHP和WebSocket:实现实时数据传输的最佳实践方法引言:在Web应用程序开发中,实时数据传输是一项非常重要的技术需求。传统的HTTP协议是一种请求-响应模式的协议,不能有效地实现实时数据传输。为了满足实时数据传输的需求,WebSocket协议应运而生。WebSocket是一种全双工通信协议,它提供了一种在单个TCP连接上进行全双工通信的方式。相比于H

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

Java Websocket如何实现在线白板功能? Java Websocket如何实现在线白板功能? Dec 17, 2023 pm 10:58 PM

JavaWebsocket如何实现在线白板功能?在现代互联网时代,人们越来越注重实时协作和互动的体验。在线白板就是一种基于Websocket实现的功能,它能够使多个用户实时协作编辑同一个画板,完成绘图和标注等操作,为在线教育、远程会议、团队协作等场景提供了便捷的解决方案。一、技术背景WebSocket是HTML5提供的一种新的协议,它在同一条TCP连接上实

SSE 与 WebSocket SSE 与 WebSocket Apr 17, 2024 pm 02:18 PM

在本文中,我们将比较服务器发送事件(SSE)和 WebSocket,两者都是用于传递数据的可靠方法。我们将在八个方面对它们进行分析,包括通信方向、底层协议、安全、易用性、性能、消息结构、易用性和测试工具。这些方面的比较总结如下:类别服务器发送事件 (SSE)WebSocket通信方向单向双向底层协议HTTPWebSocket 协议安全与 HTTP 相同存在安全漏洞易用性设置简单设置复杂性能消息发送速度快受消息处理和连接管理影响消息结构纯文本文本或二进制易用性广泛可用对 WebSocket 集成有

See all articles