上一节介绍了 WebSocket 规范,其中主要介绍了 WebSocket 的握手协议。握手协议通常是我们在构建 WebSocket 服务器端的实现和提供浏览器的WebSocket 支持时需要考虑的问题,而针对 Web 开发人员的 WebSocket JavaScript 客户端接口是非常简单的,以下是 WebSocket JavaScript 接口的定义:
WebSocket JavaScript 定义:
1 [Constructor(in DOMString url, in optional DOMString protocol)] 2 interface WebSocket { 3 readonly attribute DOMString URL; 4 // ready state 5 const unsigned short CONNECTING = 0; 6 const unsigned short OPEN = 1; 7 const unsigned short CLOSED = 2; 8 readonly attribute unsigned short readyState; 9 readonly attribute unsigned long bufferedAmount; 10 //networking 11 attribute Function onopen; 12 attribute Function onmessage; 13 attribute Function onclose; 14 boolean send(in DOMString data); 15 void close(); 16 }; 17 WebSocket implements EventTarget;
其中 URL 属性代表 WebSocket 服务器的网络地址,协议通常是”ws”,send 方法就是发送数据到服务器端,close 方法就是关闭连接。除了这些方法,还有一些很重要的事件:onopen,onmessage,onerror 以及 onclose。我们借用 Nettuts 网站上的一张图来形象的展示一下 WebSocket 接口:
WebSocket JavaScript 接口
下面是一段简单的 JavaScript 代码展示了怎样建立 WebSocket 连接和获取数据:
建立 WebSocket 连接的实例 JavaScript 代码
1 var wsServer = 'ws://localhost:8888/Demo'; 2 var websocket = new WebSocket(wsServer); 3 websocket.onopen = function (evt) { onOpen(evt) }; 4 websocket.onclose = function (evt) { onClose(evt) }; 5 websocket.onmessage = function (evt) { onMessage(evt) }; 6 websocket.onerror = function (evt) { onError(evt) }; 7 function onOpen(evt) { 8 console.log("Connected to WebSocket server."); 9 } 10 function onClose(evt) { 11 console.log("Disconnected"); 12 } 13 function onMessage(evt) { 14 console.log('Retrieved data from server: ' + evt.data); 15 } 16 function onError(evt) { 17 console.log('Error occured: ' + evt.data); 18 }
浏览器支持
下面是主流浏览器对 HTML5 WebSocket 的支持情况: