《物联网技术创新应用》Websocket通讯协议的实践

Websocket通讯协议的实践InternetofThings目录ContentsSuccessWords2相关知识Websocket基本概念任务实践Web实时通信方案Websocket协议目录ContentsSuccessWords3Web实时通信方案13Web实时通信方案轮询最早的一种实现实时Web应用的方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。在客户端的页面使用隐藏窗口向服务端发出长连接请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。长轮询长轮询是对定时轮询的改进和提高，当服务器端没有数据更新的时候，连接会保持一段时间周期，直到数据或状态改变或者时间过期。流5Web实时通信方案

这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。轮询6Web实时通信方案

这种方式从某种程度上减小了网络带宽和CPU利用率等问题。但是，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能提高。长轮询7Web实时通信方案

这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。流8Web实时通信方案Websocket与传统通信方式的效率对比场景A:1,000个客户端请求每秒:网络流量(871×1,000)=871,000bytes=6,968,000bits每秒(6.6Mbps)场景B:10,000个客户端请求每秒:网络流量(871×10,000)=8,710,000bytes=69,680,000bits每秒(66Mbps)场景A:1,000个客户端请求每秒:网络流量(2×1,000)=2,000bytes=16,000bits每秒(0.015Mbps)场景B:10,000个客户端请求每秒:网络流量(2×10,000)=20,000bytes=160,000bits每秒(0.153Mbps)传统HTTP通信方式使用

websocket通信方式假设HTTP头是871字节（有些是2000字节）9Web实时通信方案

综合这几种方案，我们会发现，这些目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用Ajax方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次HTTP的请求和应答的过程，而每一次的HTTP请求和应答都带有完整的HTTP头信息，这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂。在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。总结:目录ContentsSuccessWords10Websocket基本概念11Websocket基本概念WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC6455，WebSocketAPI被W3C定为标准。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。websocket需要类似tcp的客户端和服务端通过握手连接，连接成功后才能相互通信。12WebSocket解决的问题HTML5WebSocket设计出来的目的就是要取代轮询和Comet技术，使客户端浏览器具备像C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及Comet技术比较，具有很大的性能优势。Websocket出现使得浏览器提供socket的支持成为可能，从而在浏览器和服务器之间建立一条基于tcp的双向连接通道，web开发人员可以很方便的利用websocket构建实时web应用。13Websocket与http、tcp关系Websocket和http，都基于tcp，是可靠的协议；同属于应用层协议；Websocket在浏览器中的实现最终都是通过tcp系统接口进行数据传输。Websocket在建立握手连接时，数据是通过http协议传输的，因此用到了http协议的一些简单字段，如“GET/chatHTTP/1.1”，但是在建立连接之后，真正的数据传输是不需要http协议参与的。目录ContentsSuccessWords14Websocket协议15Websocket协议图2.传统http客户端服务器交互图1.websocket客户端服务器交互16Websocket客户端和服务端建立websocket连接的过程客户端浏览器首先要向服务器发起一个HTTP请求，然后等待服务器响应。这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息"Upgrade:WebSocket"表明这是一一个申请协议升级的HTTP请求。服务器解析这些附加的头信息，然后返回握手响应，告诉浏览器将后续的数据;按照WebSocket指定的数据格式传过来。此时，客户端和服务器端的WebSocket连接就建立起来了。客户端和服务器有任何需要传递的数据的时候，可以通过这个连接通道自由的传递信息。这个连接会持续存在，直到客户端或者服务器端的某--方主动的关闭连接。17Websocket协议Websocket类似socket的http长连接通信方式，一旦连接建立，后续数据都以帧形式传输，在客户端或服务器断开连接前，不需要客户端和服务器重新发起连接请求，在高并发及负载流量大的情况下，可节省网络带宽资源，且客户端发送和接收信息是在同一个持久连接上发起，实时性优势明显。传统http每次请求-应答都需要客户端服务器建立连接模式。18Websocket协议客户端到服务端握手协议GET/chatHTTP/1.1Host:Connection:UpgradeSec-WebSocket-Key2:129985Y31.P00Upgrade:WebSocketSec-WebSocket-Key1:4@146546xW%0l15Origin:[8-bytesecuritykey]GET/chatHTTP/1.1：打开阶段握手，使用http协议。Upgrade：websocket，表示请求为特殊http请求，请求的目的是要将客户端和服务端的通信协议从http上升为websocket；Sec-websocket-key、8-bytesecuritykey，客户端向服务端提供的握手信息；19Websocket协议服务端到客户端握手协议HTTP/1.1101WebSocketProtocolHandshakeUpgrade:WebSocketConnection:UpgradeWebSocket-Origin:WebSocket-Location:ws:///demo[16-bytehashresponse]16-bytehashresponse：服务端解析客户端头信息，生成16位安全密钥返回给客户端，以表明服务端获取了客户端的请求；一旦连接建立，后续就可以通过tcp通信（双向传输数据）。20Websocket协议握手协议21Websocket协议http请求头请求头部分字段Accept:告诉服务器客户机支持的数据类型。Accetp-charset:客户机采用的编码格式。Accept-encoding:客户机支持的数据压缩格式。Accept-language:客户机的语言环境。Host:客户机要访问的主机名。If-modified-since:客户机告诉服务器资源缓存时间。Referer:它是从哪个资源来访问服务器的（防盗链）Cookie:客户机向服务器带数据。User-Agent：告诉服务器客户机的软件环境。Connection:处理完这次请求后是否断开连接还是继续保持连接。Date：当前时间值。应答头部分Etag:缓存相关的字段。Server:服务器告诉浏览器服务器的类型。22Websocket协议websocket请求头目录ContentsSuccessWords23任务实践——搭建简易聊天室24Websocket协议1.安装Websocket服务端2.编写客户端代码25步骤一：下载并安装相关软件任务实践WebSocket协议的URLws://开头,普通的WebSocket协议wss://开头,安全的WebSocket协议服务器网址就是URL:ws://:80/path其余为websocket注册消息的处理函数，共支持四个消息onopen,onmessageoncloseonerror26Websocket协议@OnError当websocket发送错误时调用此方法，通过参数可以获取错误的更多细节@OnMessage用户接受传入的websocket信息，信息可以是文本格式，也可以是二进制格式。@OnClose连接被终止时调用，通过参数可以获取用户关闭连接的原因，如正常关闭网络超时等@OnOpen在访问端点，新的连接建立时调用，参数提供了连接的另一端的更多细节27步骤一：下载并安装相关软件任务实践1.Windows开始菜单，右键运行2.执行pipinstallwebsockets28步骤三：编写客户端代码（1）任务实践1.新建客户端Python脚本server.py2.引入Websocket模块：importwebsockets3.引入asyncio模块：importasyncioasyncio是Python3.4版本引入的标准库，直接内置了对异步IO的支持。asyncio的编程模型就是一个消息循环。我们从asyncio模块中直接获取一个EventLoop的引用，然后把需要执行的协程扔到EventLoop中执行，就实现了异步IO。29步骤三：编写客户端代码（2）任务实践4.注册一个websockets服务器start_server=websockets.serve(main_logic,'localhost',1234)5.创建一个事件loop6.将协程加入到事件循环looploop.run_until_complete(start_server)loop=asyncio.get_event_loop()。websockets.serve方法有三个参数，main_logic是websocket连接后用于处理业务的方法，main_logic在第八步介绍，host是Websocket服务器地址，port是服务器端口30步骤三：编写客户端代码（3）任务实践7.启动服务端保持一直监听状态loop.run_forever()8.websocket连接后用于处理业务的方法main_logicasyncdefmain_logic(websocket,path):whileTrue:name=awaitwebsocket.recv()print(f"Anewclient:{name}")greeting="Welcome"+nameawaitwebsocket.send(greeting)print(f"send'{greeting}'to'{name}'")main_logic是一个异步IO的方法websocket.send(greeting)是websocket发送数据的方法websocket.recv()是websocket从客户端读取数据的方法31步骤三：编写客户端代码（4）任务实践10.代码概览importwebsocketsimportasyncioasyncdefmain_logic(websocket,path):whileTrue:name=awaitwebsocket.recv()print(f"Anewclient:{name}")greeting="Welcome"+nameawaitwebsocket.send(greeting)print(f"send'{greeting}'to'{name}'")start_server=websockets.serve(main_logic,'localhost',1234)loop=asyncio.get_event_loop()loop.run_until_complete(start_server)loop.run_forever()11.执行代码pythonserver.py32步骤三：编写客户端代码（5）任务实践1.新建客户端Python脚本client.py：2.与服务器建立连接，连接回调，信息到达等处理方法参照server.py3.发送Websocket消息方法whileTrue:context=input("pleaseenteryourcontext:")awaitwebsocket.send(context)whileTrue:循环等待用户输入信息.input("pleaseenteryourcontext:"):获取用户输入的信息awaitwebsocket.send(context):将用户输入的信息异步发送出去参数：实现Python客户端33步骤三：编写客户端代码（6）任务实践importwebsocketsimportasyncioasyncdefmain_logic():asyncwithwebsockets.connect('ws://localhost:1234')aswebsocket:whileTrue:context=input("pleaseenteryourcontext:")awaitwebsocket.send(context)print(f"sendserver:{context}")greeting=awaitwebsocket.recv()print(f"receivefromserver:{greeting}")asyncio.get_event_loop().run_until_complete(main_logic())4.代码概览5.执行代码pythonclient.py34步骤三：编写客户端代码（7）任务实践1.首先运行server.py，启动后客户端会一直运行等待接收数据2.然后运行client.py，启动后发布者会发送信息3.查看运行效果：运行后客户端会接收到数据并打印出来。35步骤三：编写客户端代码（8）任务实践varws=newWebSocket("ws://localhost:9998/echo");1.新建html版客户端index.html：实现Html客户端ws是与服务器的连接结果，ws.readyState属性返回实例对象的当前状态，共有四种。CONNECTING：值为0，表示正在连接。OPEN：值为1，表示连接成功，可以通信了。CLOSING：值为2，表示连接正在关闭。CLOSED：值为3，表示连接已经关闭，或者打开连接失败。36步骤三：编写客户端代码（9）任务实践ws.onopen=function(){//WebSocket已连接上，使用send()方法发送数据ws.send("发送数据");};3.连接到服务端后的处理varws=newWebSocket("ws://localhost:1234");2.Javascript脚本，连接websocket服务器：37步骤三：编写客户端代码（9）任务实践ws.onclose=function(){//关闭websocketalert("连接已关闭...");};4.新建html版客户端代码：ws.onmessage=function(evt){varreceived_msg=evt.data;alert("数据已接收...");};5.收到聊天信息后的处理ws.onerror=function(evt){alert("+evt.data");};6.发生错误时的处理38步骤三：编写客户端代码（10）任务实践varsocket;if("WebSocket"inwindow){socket=newWe