WebSocket简单使用(二) - 客户端

背景：

前几天老大突然发现微信有个链接键盘的功能，我仔细想了下或许是使用WebSocket来实现的，又加上最近HTML5的呼声愈来愈高，觉得有必要研究下HTML5了。

如概念篇中介绍的握手协议，客户端是由浏览器提供了API，所以只要使用JavaScript来简单调用即可，而服务器端是要自己实现的，服务器端将在下个博文来讲。

WebSocket JavaScript 接口定义:

[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
   readonly attribute DOMString URL;
   // ready state
   const unsigned short CONNECTING = 0;
   const unsigned short OPEN = 1;
   const unsigned short CLOSED = 2;
   readonly attribute unsigned short readyState;
   readonly attribute unsigned long bufferedAmount;

   // networking
   attribute Function onopen;
   attribute Function onmessage;
   attribute Function onclose;
   boolean send(in DOMString data);
   void close();
};
WebSocket implements EventTarget;

简单了解下接口方法和属性：

• readyState表示连接有四种状态：
  CONNECTING (0)：表示还没建立连接；
  OPEN (1)： 已经建立连接，可以进行通讯；
  CLOSING (2)：通过关闭握手，正在关闭连接；
  CLOSED (3)：连接已经关闭或无法打开；
• url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；
• close 方法就是关闭连接；
• onopen连接建立，即握手成功触发的事件；
• onmessage收到服务器消息时触发的事件；
• onerror异常触发的事件；
• onclose关闭连接触发的事件；

JavaScript调用浏览器接口实例如下：

var wsServer = 'ws://localhost:8888/Demo'; //服务器地址
var websocket = new WebSocket(wsServer); //创建WebSocket对象
websocket.send("hello");//向服务器发送消息
alert(websocket.readyState);//查看websocket当前状态
websocket.onopen = function (evt) {
    //已经建立连接
};
websocket.onclose = function (evt) {
    //已经关闭连接
};
websocket.onmessage = function (evt) {
    //收到服务器消息，使用evt.data提取
};
websocket.onerror = function (evt) {
    //产生异常
};