WebSocket小觑

最新推荐文章于 2024-08-12 10:25:28 发布
最新推荐文章于 2024-08-12 10:25:28 发布
阅读量298 收藏
点赞数

1. 什么是WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。

1. 传统的web通信方式

01. 工作模式：客户端请求-服务端响应
02. 适用场景：信息变化不是特别频繁的场合，如网页刷新
03. 不适用场景：在线游戏，实时监控
04. 问题
占用网络传输带宽：每次请求和应答都带有完整的Http头，这就增加了每次传输的数据量。
实时性差：在全双工通信时常采用轮询进行。

2. 改进版web通信方式

01. 轮询

001. 基于polling（轮询）技术：以频繁请求方式来保持客户端和服务端的同步

002. 问题：客户端的频繁的请求，服务端的数据无变化，造成通信低效

 

02. 长轮询

001. 当服务端没有数据更新的时候，连接会保持一段时间周期知道数据或者状态改变或者过期，依次减少无效的客户端和服务端的交互

002. 当服务端数据变更频繁的话，这种机制和定时轮询毫无区别

3. 流技术

01. 在客户端页面通过一个隐藏的窗口向服务端发出一个长连接请求。服务端接到这个请求后作出回应并不断更新链接状态以保证客户端和服务端的连接不过期。

02. 浏览器设计兼容和并发处理问题。
                               

4. websocket

01. 概念：是html5开始提供的一种在单个TCP连接上进行全双工通讯协议。Websocket通信协议与2011年倍IETF定为标准RFC 6455，Websocket API被W3C定为标准。

02. 原理和TCP一样，只需做一个握手动作，就可以形成一条快速通道。

001. 客户端发起http请求，附加头信息为：“Upgrade Websocket”
   
002. 服务端解析，并返回握手信息，从而建立连接
003. 传输数据（双向）
 
004. 断开连接
03. 数据传输过程
001. 以帧形式进行传输
1. 大数据分片
2. 支持边生成数据，把你传递消息
002. 说明
1. 客户端到服务端的数据帧必须进行掩码处理，服务端拖接收到未经掩码处理的数据帧，须主动关闭连接
2. 服务端到客户端的数据一定不能加掩码，客户端接收到经过掩码的实际帧，须主动关闭连接
3. 发现错误的一方可以发送close帧，关闭连接。
04. 优势
001. 数据传输量
002. 稳定性
05. 支持浏览器
001. Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持

2. websocket案例说明

                1. 客户端

01. 创建Websocket实例
ws = new WebSocket("ws://127.0.0.1:10000/Server_Test.php"); 
1. 服务器IP：ws://127.0.0.1 
2. 服务器端口：10000  
3. 服务程序：Server_Test.php
02. 建立连接后回调函数
ws.onopen = function(event){}
03. 收到服务端消息后回调函数
ws.onmessage = function(event){}
04. 关闭连接后回调函数
ws.onclose = function(event){}
05. 连接错误后回调函数
ws.onerror = function(event)
06. 发送数据
ws.send('服务器，您好');
07. 查看当前连接状态
alert(ws.readyState)

                2. 服务端

01. 创建服务端WebSocket对象，等待客户端接入
$master  = WebSocket("localhost",10000);
首先创建Websocket，然后服务端监听相应端口，等待客户端接入
function WebSocket($address,$port){
$master=socket_create(AF_INET, SOCK_STREAM, SOL_TCP) or die("socket_create() failed");
socket_set_option($master, SOL_SOCKET, SO_REUSEADDR, 1) or die("socket_option() failed");
socket_bind($master, $address, $port)   or die("socket_bind() failed");
socket_listen($master,20)    or die("socket_listen() failed");
echo "Server Started : ".date('Y-m-d H:i:s')."\n";
echo "Master socket  : ".$master."\n";
echo "Listening on   : ".$address." port ".$port."\n\n";
return $master;
}
02. 从WebSocket中读取数据
$buffer = socket_read($socket,2048);
03. 当收到客户端首次连接请求后，生成握手信息并回复
$return_str = dohandshake($buffer);
socket_write($socket,$return_str,strlen($return_str));
04. 连接后，即可接收并解析出客户端的数据
$buffer = socket_read($socket,2048);
$data_str = decode($buffer);
05. 接收到用户数据后，直接回复客户端
socket_write($socket,$return_str,strlen($return_str));
06. 断开连接
socket_close($socket);
07. 以上6步完成全双工通信

                3. 本案例说明

01. 目前只可传文本，byte传输还需进一步研究

3. 案例运行流程

首先需要安装PHP study，然后将服务端代码放到PHP study可执行目录下，最后使用浏览器打开客户端代码去访问服务器即可进行通信。

                1. 安装PHP study，然后将PHP文件放到 D:\phpStudy\WWW 
                    
                2. 设置PHP study端口：
                    
                3. 在客户端程序中通过url去访问服务器：
                    

4. 调试说明

1. 客户端代码

01. html代码使用Hbuilder编辑完成
02. 打印信息使用
console.log("已经与服务器建立了连接rn当前连接状态：" + this.readyState);
03. 打印信息可以实时输出到控制台

                2. 服务端代码

01. 服务端代码编辑同样在Hbuilder中完成
02. 服务端代码调试工具推荐使用Xdebug，我们目前使用的是打印错误日志方式进行调试
error_log("客户端发送数据：  $data_str \r\n", 3, "D:/phpStudy/WWW/error.log");
03. 注意，D:/phpStudy/WWW/error.log为日志输出路径

5. 参考资料

1. 认识Websocket ：http://www.itpub.net/thread-1373652-1-1.html##

2. 认识Websocket （较全面）：https://my.oschina.net/u/1266171/blog/357488

3. websocket讲解：http://wenku.baidu.com/link?url=q-RIde8I-ScuPv6wO1APa8lfX47B-6meTdm7LTNyCcSsSxOqnqzt7WtKEXzwl6YpAVG5KzMcAMRTusknr_6T9w5RC7qbZGa0elRy6b4sTZi

4. Websocket在线测试工具：http://www.blue-zero.com/WebSocket/

5. 客户端很简单，关键是服务端代码：http://www.yxsss.com/sg.php?fp=0&tag=websocket

6. 使用php创建WebSocket服务：http://www.oschina.net/code/snippet_1029305_22256

7. PHP服务器：http://www.oschina.net/code/snippet_230665_21329

8. 在线聊天室程序：http://www.yxsss.com/ui/sk.html

9. 在线聊天室程序详解： http://www.bitscn.com/pdb/php/201609/732585.html

                                                     http://www.111cn.net/phper/php-cy/120076.htm

10. 服务端代码详解：http://zhidao.baidu.com/link?url=cbPCqd2rdNUMqHNKhQKEqF2j5carf01upT6PHGpFFPVLZv7ef5q5avksGyNd5P06nvIltLgHCPN68YZ6Emp2ytT4NVyi1-7CUkghun4zT1i


6. 源码

请到 http://www.dingwave.com/bbs/forum.php?mod=viewthread&tid=372&extra=page%3D1 下载


zimushuang
关注
WebSocket入门使用教程
qq_35500568的博客
11-17 4680
一、WebSocket 介绍 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成
史上最全的Websocket入门教程
书写人生
09-03 1万+
websocket简介 websocket是什么？ 答: 它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要websocket? 疑问? 我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答: 因为 HTTP 协议有一个缺陷：通信只能由客户端发起 我们都知道轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTT...
WebSocket入门教程（一）-- WebSocket简介
柳木木的IT专栏
06-05 1万+
本文简要介绍websocket的概念、原理、以及浏览器支持。
WebSocket入门教程
m0_75198698的博客
05-11 323
请注意，以上仅为一个大纲，具体的实施和配置细节将取决于您选择的编程语言和框架。建议您参考特定语言和框架的官方文档和教程，以获得更详细和具体的步骤和配置说明。- 解释 WebSocket 与传统 HTTP 的区别和优势。- 使用 WebSocket 实现实时聊天应用的后端和前端。- 说明 WebSocket 的消息传递机制和状态管理。- 介绍 WebSocket 的基本概念和原理。- 说明 WebSocket 的用途和适用场景。- 防止 WebSocket 连接的滥用和攻击。
WebSocket 入门教程
Pika
06-14 640
WebSocket 是一种提供全双工通信的协议，通过单个 TCP 连接实现服务器和客户端的实时双向数据传输，适用于在线聊天、游戏和实时数据流等应用。本文介绍了 WebSocket 的工作原理、优势及一个使用 Python 实现的简单示例，展示了如何建立和使用 WebSocket 进行实时通信。
实时数据处理专家：WebSocket-Client在物联网中的最佳实践
随着物联网技术的发展，实时通信需求日益增长，WebSocket作为一项提供全双工通信的网络技术，在物联网领域发挥着关键作用。本章节将对WebSocket技术进行基础性介绍，并探讨其与物联网的关联。 ## 1.1 Web
我用kafka两年踩过的一些非比寻常的坑
m0_67322837的博客
07-18 389
我的上家公司是做餐饮系统的，每天中午和晚上用餐高峰期，系统的并发量不容小觑。为了保险起见，公司规定各部门都要在吃饭的时间轮流值班，防止出现线上问题时能够及时处理。我当时在后厨显示系统团队，该系统属于订单的下游业务。用户点完菜下单后，订单系统会通过发kafka消息给我们系统，系统读取消息后，做业务逻辑处理，持久化订单和菜品数据，然后展示到划菜客户端。这样厨师就知道哪个订单要做哪些菜，有些菜做好了，就可以通过该系统出菜。kafka，如果它有问题，将会直接影响到后厨显示系统的功能。kafka。...
WebSocket
u012977486的博客
09-10 88
https://blog.csdn.net/qq_41603102/article/details/82492040
OpenResty限频限流
沙沙罗曼的专栏
08-01 894
OpenResty限频限流 之前对系统限流这个话题有过一次讨论，之后有在实际工作中遇到一次应用，写一篇文章记录本次实践。 背景 目前在做的系统有提供Open API接入，即客户通过API Key接入使用系统功能。所允许接入的API根据功能种类不同所需系统开销有所差异，从技术角度希望对系统增加一些保护措施，避免用户接入使用过程有意或无意高频调用一些API对系统构成压力，从而影响整个系统稳定性。 限制主要考虑两个维度： 限频，限制单位时间内调用次数，关注调用速度 限流，限制时间窗口内调用次数，关注调用总量
WebSocket全双工通信入门教程
XUXUEMING的博客
11-02 6979
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。
WebSocket新手入门指南
蛮三刀酱
12-14 8227
文章目录 介绍 WebSocket 的原理，了解原理后，用起来更放心大胆； 类似技术对比，搞清楚自己的业务场景是不是需要使用 WebSocket； 使用过程中的经验分享，让你少走一些弯路； 1 WebSocket 是什么 WebSocket 是 HTML5 新增的在单个 TCP 连接上进行全双工通讯（不受限的双向通信）的协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 全双工（Full Duplex）的通讯传输允许数据在两个方向上同时传输，相当于两个单工通信方式的结合。发送和接收分别由两
【WebSocket 】入门学习
weixin_44976643的博客
08-08 923
websocket入门学习，以及外卖项目来单提醒、客户催单应用websocket
WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室
热门推荐
柳木木的IT专栏
06-09 2万+
本文，我们通过nodejs和javascript实现一个网页聊天室的demo。主要包括，聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播给其他用户！
websocket 入门只需五分钟
qq_35227244的博客
03-14 578
websocket 是一种采用socket 通信的连接，而不是http协议所以不受浏览器SOP的限制，是一种支持跨域访问的协议，客户端可以与任意服务器通信。
04.HTTPS及追加协议
最新发布
weixin_38313819的博客
08-12 649
数字证书认证机构在判明提出申请者的身份之后，会对已申请的公开密钥做数字签名，然后分配这个已签名的公开密钥，并将该公开密钥放入公钥证书后绑定在一起。通过和SSL（Secure Socket Layer，安全套接层）或TLS（Transport Layer Security，安全层传输协议）的组合使用，加密 HTTP的通信内容。一，认证服务器的公开密钥的是真实有效的数字证书认证机构。使用通信方式时，如何安全转交是一件很困难的事，因此，多数浏览器开发商发布版本时，会事先在内部植入常用认证机关的公开密钥。
websocket基础使用学习
qq_27756989的博客
06-29 625
这里就是基础使用了。
WebSocket：5分钟从入门到精通
全栈前端精选
12-18 149
程序猿小卡_casperhttps://juejin.im/post/5a4e6a43f265da3e303c4787一、内容概览 WebSocket的出现，使得浏览器具备了实时双向通信...
WebSocket入门教程（四）-- WebSocket实例：实时获取服务器内存使用情况（优化一）
06-06
WebSocket入门教程（四）-- WebSocket实例：实时获取服务器内存使用情况（优化一）详解：http://blog.csdn.net/u010136741/article/details/51590619
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值