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

原文 http://www.oseye.net/user/kevin/blog/79

关于WebSocket我打算分如下几篇博文来探探路:

1. WebSocket简单使用(一) - 概念
2. WebSocket简单使用(二) - 客户端
3. WebSocket简单使用(三) - 服务器端
4. WebSocket简单使用(四) - 完整实例
5. WebSocket简单使用(五) - 模拟微信 连接键盘 功能

背景：

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

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

WebSocket JavaScript 接口定义:

1. [Constructor(inDOMString url, optional inDOMString protocol)]
2. interfaceWebSocket{
3. readonly attribute DOMString URL;
4. // ready state
5. constunsignedshort CONNECTING =0;
6. constunsignedshort OPEN =1;
7. constunsignedshort CLOSED =2;
8. readonly attribute unsignedshort readyState;
9. readonly attribute unsignedlong bufferedAmount;
10.  
11. // networking
12. attribute Function onopen;
13. attribute Function onmessage;
14. attribute Function onclose;
15. boolean send(inDOMString data);
16. void close();
17. };
18. WebSocketimplementsEventTarget;

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

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

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

1. 1. var wsServer ='ws://localhost:8888/Demo';//服务器地址
   2. var websocket =newWebSocket(wsServer);//创建WebSocket对象
   3. websocket.send("hello");//向服务器发送消息
   4. alert(websocket.readyState);//查看websocket当前状态
   5. websocket.onopen =function(evt){
   6. //已经建立连接
   7. };
   8. websocket.onclose =function(evt){
   9. //已经关闭连接
   10. };
   11. websocket.onmessage =function(evt){
   12. //收到服务器消息，使用evt.data提取
   13. };
   14. websocket.onerror =function(evt){
   15. //产生异常
   16. };