04 Websocket和Websocketed

一、web socket事件和方法　

　　有了HTTP协议为什么还需要Websocket这种协议呢?因为HTTP协议发起的通信只能通过客户端发起,然后服务端才可以将消息回应到客户端。因此HTTP协议做不到服务器主动向客户端推送信息。

　　Websocket是在单个TCP连接上进行全双工通信的协议，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

　　实际生产环境中实现推送技术所运用的大多都是Ajax轮询。轮询是在特定的的时间间隔，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

简单示例：

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};   

大概执行步骤

1. 构造函数

　　WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:8080');

执行上边语句后，客户端会与服务器进行连接。

2. Websocket.readstate

　　此属性返回的是实例对象的当前状态

CONNECTING : 值为0,表示正在连接
OPEN :值为1 ,表示连接成功,可以进行通信
CLOSING: 值为2,表示连接正在关闭.
CLOSED: 值为3 ,表示连接已经关闭,或者打开连接失败

　　Java示例:

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

3.  webSocket.onopen(事件)

　　实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {
  ws.send('Hello Server!');
}

　　如果要指定多个回调函数，可以使用addEventListener方法。

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

4. webSocket.onclose(事件)

　　实例对象的onclose属性，用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

5. webSocket.onmessage(事件)

　　实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});

6. websocket.send(方法)

　　实例对象的send()方法用于向服务器发送数据

ws.send('your message');

7. webSocket.bufferedAmount

　　实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

8. websocket.onerror(事件)

　　实例对象的onerror属性，用于指定报错时的回调函数。

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

二、Websocketed服务器

Websocketd

它的最大特点，就是后台脚本不限语言，标准输入（stdin）就是 WebSocket 的输入，标准输出（stdout）就是 WebSocket 的输出。

举例来说，下面是一个python脚本counter.py

print('1')
sleep 1

print('2')
sleep 1

print('3')

命令行下运行这个脚本，会输出1、2、3，每个值之间间隔1秒。

1
2
3

现在，启动websocketd，指定这个脚本作为服务。

$ websocketd --port=8080 python ./counter.py

上面的命令会启动一个 WebSocket 服务器，端口是8080。每当客户端连接这个服务器，就会执行counter.py脚本，并将它的输出推送给客户端

var ws = new WebSocket('ws://localhost:8080/');

ws.onmessage = function(event) {
  console.log(event.data);
};

上面是客户端的 JavaScript 代码，运行之后会在控制台依次输出1、2、3。

有了它，就可以很方便地将命令行的输出，发给浏览器。

$ websocketd --port=8080 ls

上面的命令会执行ls命令，从而将当前目录的内容，发给浏览器。使用这种方式实时监控服务器，简直是轻而易举（代码）。