H5学习系列之webSocket入门

Websocket

1.websocket是什么？

WebSocket是为解决客户端与服务端实时通讯而产生的技术。其本质是先经过HTTP/HTTPS协议进行握手后建立一个用于交换数据的TCP链接，

此后服务端与客户端经过此TCP链接进行实时通讯。

2.websocket的优势

之前咱们实现推送技术，用的都是轮询，在特色的时间间隔有浏览器自动发出请求，将服务器的消息主动的拉回来，在这种状况下，咱们须要不断的向服务器 发送请求，然而HTTP request 的header是很是长的，里面包含的数据可能只是一个很小的值，这样会占用不少的带宽和服务器资源。会占用大量的带宽和服务器资源。

WebSocket API最伟大之处在于服务器和客户端能够在给定的时间范围内的任意时刻，相互推送信息。在创建链接以后，服务器能够主动传送数据给客户端。

此外，服务器与客户端之间交换的标头信息很小。

WebSocket并不限于以Ajax(或XHR)方式通讯，由于Ajax技术须要客户端发起请求，而WebSocket服务器和客户端能够彼此相互推送信息；

关于ajax,comet,websocket的详细介绍，和websocket报文的介绍，你们能够参看http://www.shaoqun.com/a/54588.aspx  网页设计]Ajax、Comet与Websocket，

我若是之后有时间，也会写出来的

3.如何使用websocket

客户端

在支持WebSocket的浏览器中，在建立socket以后。能够经过onopen，onmessage，onclose即onerror四个事件实现对socket进行响应

一个简单是示例

var ws = new WebSocket(“ws://localhost:8080”);

ws.onopen = function()

{  console.log(“open”);

  ws.send(“hello”);

};

ws.onmessage = function(evt)

{

  console.log(evt.data)

};

ws.onclose = function(evt)

{

  console.log(“WebSocketClosed!”);

};

ws.onerror = function(evt)

{

  console.log(“WebSocketError!”);

};

1.var ws = new WebSocket(“ws://localhost:8080”);

申请一个WebSocket对象，参数是须要链接的服务器端的地址，同http协议使用http://开头同样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

ws.send(“hello”);
用于叫消息发送到服务端
2.ws.onopen = function() { console.log(“open”)};

当websocket建立成功时，即会触发onopen事件 3.ws.onmessage = function(evt) { console.log(evt.data) }; 当客户端收到服务端发来的消息时，会触发onmessage事件，参数evt.data中包含server传输过来的数据 4.ws.onclose = function(evt) { console.log(“WebSocketClosed!”); }; 当客户端收到服务端发送的关闭链接的请求时，触发onclose事件 5.ws.onerror = function(evt) { console.log(“WebSocketError!”); }; 若是出现链接，处理，接收，发送数据失败的时候就会触发onerror事件 咱们能够看出全部的操做都是采用事件的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，获得更好的用户体验。