济南城市建设职业学院官网招生网,网站seo外包公司有哪些,湖南省建设安监局官网站,京网站建设Websocket——原理及基本属性和方法
初次接触 WebSocket 的人#xff0c;都会问同样的问题#xff1a;我们已经有了 HTTP 协议#xff0c;为什么还需要另一个协议#xff1f;它能带来什么好处#xff1f;
答案很简单#xff0c;因为 HTTP 协议有一个缺陷#xff1a;通…Websocket——原理及基本属性和方法
初次接触 WebSocket 的人都会问同样的问题我们已经有了 HTTP 协议为什么还需要另一个协议它能带来什么好处
答案很简单因为 HTTP 协议有一个缺陷通信只能由客户端发起。
举例来说我们想了解今天的天气只能是客户端向服务器发出请求服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
WebSocket 协议在2008年诞生2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是服务器可以主动向客户端推送信息客户端也可以主动向服务器发送信息是真正的双向平等对话属于服务器推送技术的一种。
一.传统的实现即时通信的方式
ajax轮询
ajax轮询的原理非常简单让浏览器隔个几秒就发送一次请求询问服务器是否有新信息。
场景再现
客户端啦啦啦有没有新信息(Request)
服务端没有Response
客户端啦啦啦有没有新信息(Request)
服务端没有。。Response
客户端啦啦啦有没有新信息(Request)
服务端你好烦啊没有啊。。Response
客户端啦啦啦有没有新消息Request
服务端好啦好啦有啦给你。Response
客户端啦啦啦有没有新消息Request
服务端。。。。。没。。。。没。。。没有Response —- loop
long poll
long poll 其实原理跟 ajax轮询 差不多都是采用轮询的方式不过采取的是阻塞模型一直打电话没收到就不挂电话也就是说客户端发起连接后如果没消息就一直不返回Response给客户端。直到有消息才返回返回完之后客户端再次建立连接周而复始。
场景再现
客户端啦啦啦有没有新信息没有的话就等有了才返回给我吧Request
服务端额。。 等待到有消息的时候。。来 给你Response
客户端啦啦啦有没有新信息没有的话就等有了才返回给我吧Request -loop
从上面可以看出其实这两种方式都是在不断地建立HTTP连接然后等待服务端处理可以体现HTTP协议的另外一个特点被动性。
何为被动性呢其实就是服务端不能主动联系客户端只能有客户端发起。
小姐
ajax轮询 需要服务器有很快的处理速度和资源。速度 long poll 需要有很高的并发也就是说同时接待客户的能力。场地大小
长连接
在页面里嵌入一个隐蔵iframe将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求服务器端就能源源不断地往客户端输入数据。 优点消息即时到达不发无用请求管理起来也相对方便。 缺点服务器维护一个长连接会增加开销当客户端越来越多的时候server压力大 实例Gmail聊天
(1).基于http协议的长连接
在HTTP1.0和HTTP1.1协议中都有对长连接的支持。其中HTTP1.0需要在request中增加”Connection keep-alive“ header才能够支持而HTTP1.1默认支持.
http1.0请求与服务端的交互过程:
a)客户端发出带有包含一个header”Connection keep-alive“的请求
b)服务端接收到这个请求后,根据http1.0和”Connection keep-alive“判断出这是一个长连接,就会在response的header中也增加”Connection keep-alive“,同是不会关闭已建立的tcp连接.
c)客户端收到服务端的response后,发现其中包含”Connection keep-alive“就认为是一个长连接不关闭这个连接。并用该连接再发送request.转到a)
(2).http1.1请求与服务端的交互过程:
a)客户端发出http1.1的请求
b)服务端收到http1.1后就认为这是一个长连接,会在返回的response设置Connection keep-alive,同是不会关闭已建立的连接.
c)客户端收到服务端的response后,发现其中包含”Connection keep-alive“就认为是一个长连接不关闭这个连接。并用该连接再发送request.转到a)
基于http协议的长连接减少了请求,减少了建立连接的时间,但是每次交互都是由客户端发起的,客户端发送消息,服务端才能返回客户端消息.因为客户端也不知道服务端什么时候会把结果准备好,所以客户端的很多请求是多余的,仅是维持一个心跳,浪费了带宽.
Flash Socket
在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信JavaScript在收到服务器端传送的信息后控制页面的显示。 优点实现真正的即时通信而不是伪即时。 缺点客户端必须安装Flash插件移动端支持不好IOS系统中没有flash的存在非HTTP协议无法自动穿越防火墙。 实例网络互动游戏。
二.websocket的方式实现服务端消息推送
1.什么是socket什么是websocket两者有什么区别websocket是仅仅将socket的概念移植到浏览器中的实现吗
我们知道在网络中的两个应用程序进程需要全双工相互通信全双工即双方可同时向对方发送消息需要用到的就是socket它能够提供端对端通信对于程序员来讲他只需要在某个应用程序的一端暂且称之为客户端创建一个socket实例并且提供它所要连接一端暂且称之为服务端的IP地址和端口而另外一端服务端创建另一个socket并绑定本地端口进行监听然后客户端进行连接服务端服务端接受连接之后双方建立了一个端对端的TCP连接在该连接上就可以双向通讯了而且一旦建立这个连接之后通信双方就没有客户端服务端之分了提供的就是端对端通信了。我们可以采取这种方式构建一个桌面版的im程序让不同主机上的用户发送消息。从本质上来说socket并不是一个新的协议它只是为了便于程序员进行网络编程而对tcp/ip协议族通信机制的一种封装。
socket传送门http://blog.csdn.net/luokehua789789/article/details/54378264
websocket是html5规范中的一个部分它借鉴了socket这种思想为web应用程序客户端和服务端之间注意是客户端服务端提供了一种全双工通信机制。同时它又是一种新的应用层协议websocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议通常它表示为ws://echo.websocket.org/?encodingtext HTTP/1.1可以看到除了前面的协议名和http不同之外它的表示地址就是传统的url地址。
Websocket其实是一个新协议跟HTTP协议基本没有关系只是为了兼容现有浏览器的握手规范而已也就是说它是HTTP协议上的一种补充可以通过这样一张图理解
websocket具有以下几个方面的优势
1建立在 TCP 协议之上服务器端的实现比较容易。
2与 HTTP 协议有着良好的兼容性。默认端口也是80和443并且握手阶段采用 HTTP 协议因此握手时不容易屏蔽能通过各种 HTTP 代理服务器。
3数据格式比较轻量性能开销小通信高效。
4可以发送文本也可以发送二进制数据。
5没有同源限制客户端可以与任意服务器通信。
6协议标识符是ws如果加密则为wss服务器网址就是 URL。
2.websocket的通信原理和机制
既然是基于浏览器端的web技术那么它的通信肯定少不了http,websocket本身虽然也是一种新的应用层协议但是它也不能够脱离http而单独存在。具体来讲我们在客户端构建一个websocket实例并且为它绑定一个需要连接到的服务器地址当客户端连接服务端的时候会向服务端发送一个类似下面的http报文
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com这个就是Websocket的核心了告诉Apache、Nginx等服务器发起的是websocket协议。
Upgrade: websocket
Connection: Upgrade首先Sec-WebSocket-Key 是一个Base64 encode的值这个是浏览器随机生成的告诉服务器泥煤不要忽悠窝我要验证尼是不是真的是Websocket助理。 然后Sec_WebSocket-Protocol 是一个用户定义的字符串用来区分同URL下不同的服务所需要的协议。简单理解今晚我要服务A别搞错啦~ 最后Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft协议版本在最初的时候Websocket协议还在 Draft 阶段各种奇奇怪怪的协议都有而且还有很多期奇奇怪怪不同的东西什么Firefox和Chrome用的不是一个版本之类的当初Websocket协议太多可是一个大难题。。不过现在还好已经定下来啦大家都使用的一个东西 脱水服务员我要的是13岁的噢→_→
然后服务器会返回下列东西表示已经接受到请求 成功建立Websocket啦
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk
Sec-WebSocket-Protocol: chat依然是固定的告诉客户端即将升级的是Websocket协议而不是mozillasocketlurnarsocket或者shitsocket。 然后Sec-WebSocket-Accept 这个则是经过服务器确认并且加密过后的 Sec-WebSocket-Key。服务器好啦好啦知道啦给你看我的ID CARD来证明行了吧。。 后面的Sec-WebSocket-Protocol 则是表示最终使用的协议。
返回的状态码为101表示同意客户端协议转换请求并将它转换为websocket协议。以上过程都是利用http通信完成的称之为websocket协议握手(websocket Protocol handshake)进过这握手之后客户端和服务端就建立了websocket连接以后的通信走的都是websocket协议了。所以总结为websocket握手需要借助于http协议建立连接后通信过程使用websocket协议。同时需要了解的是该websocket连接还是基于我们刚才发起http连接的那个TCP连接。一旦建立连接之后我们就可以进行数据传输了websocket提供两种数据传输文本数据和二进制数据。
至此HTTP已经完成它所有工作了接下来就是完全按照Websocket协议进行了。
基于以上分析我们可以看到websocket能够提供低延迟高性能的客户端与服务端的双向数据通信。它颠覆了之前web开发的请求处理响应模式并且提供了一种真正意义上的客户端请求服务器推送数据的模式特别适合实时数据交互应用开发。
对比前面的http的客户端服务器的交互图可以发现WebSocket方式减少了很多TCP打开和关闭连接的操作WebSocket的资源利用率高。
3.websocket的创建和常用的属性方法
以下 API 用于创建 WebSocket 对象。
var Socket new WebSocket(url, [protocol] );以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象
属性描述Socket.readyState只读属性 readyState 表示连接状态可以是以下值0 - 表示连接尚未建立。1 - 表示连接已建立可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。Socket.bufferedAmount只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输但是还没有发出的 UTF-8 文本字节数。
CONNECTING值为0表示正在连接。
OPEN值为1表示连接成功可以通信了。
CLOSING值为2表示连接正在关闭。
CLOSED值为3表示连接已经关闭或者打开连接失败。
var webSocket new WebSocket(url);if(webSocket.readyState webSocket.CONNECTING){console.log(连接正在打开);}webSocket.onopen function () {webSocket.send(consumerId);//可以看到 连接正在打开并没有被打印说明open对应的就是OPEN状态if(webSocket.readyState webSocket.CONNECTING){console.log(连接正在打开1);}if(webSocket.readyState webSocket.OPEN){console.log(连接已打开);}sendMsg();window.weui.alert(已经建立连接);};//连接关闭时触发webSocket.onclose function () {if(webSocket.readyState webSocket.CLOSED){console.log(连接已关闭)}window.weui.alert(连接已断开);};//连接webSocket.onerror function () {window.weui.alert(连接错误请稍后再试);};可以看到当onopen触发时对应的额就是readyState的OPEN状态不包含OPENINGonclose触发时对应的就是CLOSED状态不包含CLOSING状态。
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象
事件事件处理程序描述openSocket.onopen连接建立时触发messageSocket.onmessage客户端接收服务端数据时触发errorSocket.onerror通信发生错误时触发closeSocket.onclose连接关闭时触发
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象
方法描述Socket.send()使用连接发送数据Socket.close()关闭连接
!DOCTYPE HTML
htmlheadmeta charsetutf-8title菜鸟教程(runoob.com)/titlescript typetext/javascriptfunction WebSocketTest(){if (WebSocket in window){alert(您的浏览器支持 WebSocket!);// 打开一个 web socketvar ws new WebSocket(ws://localhost:9998/echo);ws.onopen function(){// Web Socket 已连接上使用 send() 方法发送数据ws.send(发送数据);alert(数据发送中...);};ws.onmessage function (evt) { var received_msg evt.data;alert(数据已接收...);};ws.onclose function(){ // 关闭 websocketalert(连接已关闭...); };}else{// 浏览器不支持 WebSocketalert(您的浏览器不支持 WebSocket!);}}/script/headbodydiv idssea hrefjavascript:WebSocketTest()运行 WebSocket/a/div/body
/html用websocket发送接受二进制数据
WebSocket可以通过ArrayBuffer发送或接收二进制数据。
var socket new WebSocket(ws://127.0.0.1:8081);
socket.binaryType arraybuffer;// Wait until socket is open
socket.addEventListener(open, function (event) {// Send binary datavar typedArray new Uint8Array(4);socket.send(typedArray.buffer);
});// Receive binary data
socket.addEventListener(message, function (event) {var arrayBuffer event.data;// ···
});目前websocket的缺点是不兼容低版本浏览器。
WebSocket 有没有可能取代 AJAX ?
