Board logo

标题: 使用 HTML5 WebSocket 构建实时 Web 应用(3)WebSocket JavaScript 接口 [打印本页]
作者: look_w    时间: 2018-10-18 16:41     标题: 使用 HTML5 WebSocket 构建实时 Web 应用(3)WebSocket JavaScript 接口

WebSocket JavaScript 接口上一节介绍了 WebSocket 规范，其中主要介绍了 WebSocket 的握手协议。握手协议通常是我们在构建 WebSocket 服务器端的实现和提供浏览器的 WebSocket 支持时需要考虑的问题，而针对 Web 开发人员的 WebSocket JavaScript 客户端接口是非常简单的，以下是 WebSocket JavaScript 接口的定义：
清单 2. WebSocket JavaScript 定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[Constructor(in DOMString url, in optional 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;




其中 URL 属性代表 WebSocket 服务器的网络地址，协议通常是”ws”,send 方法就是发送数据到服务器端，close 方法就是关闭连接。除了这些方法，还有一些很重要的事件：onopen，onmessage，onerror 以及 onclose。我们借用 Nettuts 网站上的一张图来形象的展示一下 WebSocket 接口：
图 2. WebSocket JavaScript 接口下面是一段简单的 JavaScript 代码展示了怎样建立 WebSocket 连接和获取数据：
清单 3. 建立 WebSocket 连接的实例 JavaScript 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var  wsServer = 'ws://localhost:8888/Demo';
var  websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function (evt) { onClose(evt) };
websocket.onmessage = function (evt) { onMessage(evt) };
websocket.onerror = function (evt) { onError(evt) };
function onOpen(evt) {
console.log("Connected to WebSocket server.");
}
function onClose(evt) {
console.log("Disconnected");
}
function onMessage(evt) {
console.log('Retrieved data from server: ' + evt.data);
}
function onError(evt) {
console.log('Error occured: ' + evt.data);
}





欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0