Web信息交互

自己稍微总结了一下Web信息交互，大概有以下几种...

传统AJAX数据交互：

客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来。

轮询：

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

长轮询：

长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。

流：

流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端，但是需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

Websocket:

WebSocket 协议本质上是一个基于 TCP 的协议，WebSocket API使用ws或wss协议，可用于任意的客户端和服务器程序。WebSocket并不限于以Ajax(或XHR)方式通信，服务器和客户端可以彼此相互推送信息还允许跨域通信。

客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息，然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

 

下面的示例是是打开一个连接，为连接创建事件监听器，断开连接，消息时间，发送消息返回到服务器，关闭连接。

 

//新建一个 WebSocket 实例，ws表示WebSocket协议。

var ws = new WebSocket("wss://echo.websocket.org");

//打开Socket

ws.onopen = function(evt) { 

  console.log("Connection open ..."); 

// 发送一个初始化消息

  ws.send("Hello WebSockets!");};

// 监听消息

ws.onmessage = function(evt) {

  console.log( "Received Message: " + evt.data);

  ws.close();};

 // 监听Socket的关闭

ws.onclose = function(evt) {

  console.log("Connection closed.");};      

 

 

Websocket特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

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

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

websocket的内容还有很多，具体的在单独写一个websocket的博客来细说~~