一、API 参考
1. html5 websockets 官方API文档: http://dev.w3.org/html5/websockets/
2. 代码示例var socket = new WebSocket(‘ws://game.example.com:12010/updates’);
socket.onopen = function () {
setInterval(function() {
if (socket.bufferedAmount == 0)
socket.send(getUpdateData());
}, 50);
};
(1) 浏览器检测:
var hasWebSockets = !!(window.WebSocket);
(2) Scripting API:
| API | 描述 |
|---|---|
| WebSocket(url, protocols) | 1. url: 要连接的地址 2. protocols: {String} 或者 {Array}。当是 {String} 的时候相当于数组中的值 ['ws']；当是 {String} 的时候，表示一个协议集 |
| readyState | WebSocket 属性。表示 WebSocket 的状态 |
| bufferAmount | WebSocket 属性。返回 send() 排队队列中以 utf-8 编码文本的字节数 |
| send() | WebSocket 方法。使用 WebSocket 传输数据 |
| close() | WebSocket 方法。有下面几种情况：
|
| WebSocket 事件 | 描述 |
|---|---|
| onopen | 当 readyState 状态为 OPEN 时触发 |
| onmessage | 当 WebSocket 链接收到文本数据，客户端会创建一个 MessageEvent。触发些事件 |
| onerror | 当 WebSocket 出现异常时触发 |
| onclose | 当 WebSocket 已经关闭，客户端会通过 CloseEvent 创建一个 close 事件 |
| readyState 状态码 | message | 描述 |
|---|---|---|
| 0 | CONNECTING | 链接仍没有建立，连接中 |
| 1 | OPEN | 建立 WebSocket 链接，可以进行交互 |
| 2 | CLOSING | 正在进行关闭握手 |
| 3 | CLOSED | 链接已经关闭，或者打不开 |
二、DEMO
Kaazing 的 demo: http://kaazing.me/
三、注意事项
WebSocket 仍存在一些问题，Firefox 4 默认并没有打开。如要打开，需要在 about:config 中把下面两项设置为true：
network.websocket.enabled
network.websocket.override-security-block
使用它，更多的是关注后端的应该，前端方面只是简单的事件处理
四、附加一些资料: 浏览器兼容方案
Kaazing WebSocket Gateway – 一个 Java 的解决方案，不依赖 Native WebSockets，兼容所有浏览器。
jWebSocket – 一个纯 Java/Javascript 的解决方案。包括 Server/clients/flash 等支持。
Start Using HTML5 WebSockets Today – PHP solution