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] 纯文本查看 复制代码

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] 纯文本查看 复制代码

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

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

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

webSocket.onopen

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

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

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

webSocket.onclose

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

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

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

webSocket.onmessage

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

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

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

webSocket.send()

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

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

ws.send('your message');

webSocket.onerror

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

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

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

查看更多精彩前端资源