WebSocket(二)——WebSocket API

WebSocket API 是完全事件驱动的,一旦建立起全双工连接,当服务端需要发送数据给客户端时,就会自动发送,而不需要客户端的主动请求。目前,不同浏览器对WebSocket的支持度不同,可以通过javascriptif(window.WebSocket)来进行判断,或者在console里输入window.WebSocket检测,或者在html5test里查看。

使用WebSocket需要有WebSocket的服务端,这里先使用http://www.websocket.org/echo.html里的ws://echo.websocket.org,实现的是一个回复发送消息的功能。

WebSocket构造函数

构造函数有一个必需参数URL和一个可选参数protocols,在protocols中可以使用的协议包括XMPP、SOAP或者自定义协议。

WebSocket事件

  • open//服务端响应连接请求时触发
  • message//客户端收到消息时触发
  • error//响应意外故障时触发
  • close//连接关闭时触发

WebSocket有如上的四个事件,要开始监听事件,可以为WebSocket对象添加回调函数(on<事件名称>),也可以使用addEventListener()方法为对象添加事件监听器。

WebSocket方法

  • send()//发送数据至服务端
  • close()//主动关闭连接
  • WebSocket属性
  • readyState//连接状态
  • bufferedAmount//检查已进入队列但尚未发送的字节数
  • protocol//获取客户端与服务端的协议名称

一个完整的测试代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function(e) {
console.log("OPEN");
var send_string = "Hello WebSocket";
ws.send(send_string);
console.log("Send:" + send_string);
};
ws.onmessage = function(e) {
console.log("MESSAGE");
console.log("Receive:", e.data);
ws.close();
};
ws.onerror = function(e) {
console.log("ERROR", e);
};
ws.onclose = function(e) {
console.log("CLOSE");
};

console里的结果如下

图片


参考文章

Just a beginner.<br /><a href='https://github.com/yaoshanliang/about' target='_blank'>profile</a>