浅谈webscoket

webscoket是H5提出的一个网络传输协议API，类似于http协议。但是和http协议没有任何联系，http协议也没有改变。http协议是不支持持久连接的，这里说的是长连接，循环连接并不属于这个范畴。webscoket可以看成是为了兼容浏览器的握手规范在http协议上的一个补充，是H5提出的一个新技术新API，和http并无联系。
  那我们就在这里对比一下webscoket和http的优缺点。首先，webscoket优于http协议的地方在于它不是那么被动，http协议中request和response一一对应，服务器必须接收到客户端发送的请求才能进行响应。那在完成类似于数据实时更新等需求时，http并不能很好的完成需求。这时传统解决方式多使用的是ajax轮询（定时发送ajax查询服务器获取数据），这就有可能造成多次发送request，服务器却还没有response，造成资源浪费。而webscoket则是在第一次发送请求与服务器进行连接后，服务器可以自主进行数据传输，不再需要客户端发送request。当然webscoket的缺点就是兼容性较差，ie10以下不支持，Android内置浏览器不支持，也没有合适的解决办法，只能通过ajax轮询进行模拟。
  然后，我们一起来看看webscoket 的用法。webscoket的用法其实相当简单，下面先给大家看个简单的例子。

[JavaScript]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

var ws = new WebSocket( "wss://echo.websocket.org" );   ws.onopen = function (evt) {    console.log( "Connection open ..." );    ws.send( "Hello WebSockets!" ); };   ws.onmessage = function (evt) {    console.log( "Received Message: " + evt.data);    ws.close(); };   ws.onclose = function (evt) {    console.log( "Connection closed." ); };

以下是webscoket主要的几个API
使用构造函数实例化webscoket

[JavaScript]  纯文本查看  复制代码

?

1	var ws = new WebSocket( 'ws://localhost:8080' );

我们可以通过ws.readyState属性来查看实例对象的当前状态，共有四种。

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败
  

webSocket.onopen

实例对象的 onopen属性，用于指定连接成功后的回调函数。

[AppleScript]  纯文本查看  复制代码

?

1 2 3

ws.onopen = function ( ) {    ws.send ( 'Hello Server!' ) ; }

webSocket.onclose

实例对象的 onclose属性，用于指定连接关闭后的回调函数。

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4 5 6

ws.onclose = function (event) {    var code = event.code;    var reason = event.reason;    var wasClean = event.wasClean;    // handle close event };

webSocket.onmessage

实例对象的 onmessage属性，用于指定收到服务器数据后的回调函数。

[JavaScript]  纯文本查看  复制代码

?

1 2 3 4

ws.onmessage = function (event) {    var data = event.data;    // 处理数据 };

webSocket.send()

实例对象的 send()方法用于向服务器发送数据。

[JavaScript]  纯文本查看  复制代码

?

1	ws.send( 'your message' );

webSocket.onerror

实例对象的 onerror属性，用于指定报错时的回调函数。

[JavaScript]  纯文本查看  复制代码

1 2 3

socket.onerror = function (event) {    // handle error event };

需要更多的前端学习资源可以加QQ  2832281573  领取

?