HTML5 WebSockets 教程

Web Sockets 是用于 Web 应用程序的新一代双向通信技术，运行在单一套接字之上，它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。

一旦取得 Web 服务器上的 Web Socket 连接之后，就可以通过调用 send() 方法从浏览器发送数据到服务器上，通过 onmessage 事件处理程序从服务器接收数据到浏览器中。

下面是创建一个新的 WebSocket 对象的 API。

var Socket = new WebSocket(url, [protocal] );

第一个参数 url 用于指定要连接的 URL。第二个属性 - 端口是可选的，如果提供，就会指定一个服务器必须支持连接成功的子协议。

WebSocket 属性

下面是 WebSocket 对象的属性。假定我们已经创建了上述的 Socket 对象：

属性	描述
Socket.readyState	只读属性readyState表示连接的状态。有以下取值： 0 表示连接尚未建立。 1 表示连接已建立，可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

属性

描述

Socket.readyState

只读属性readyState表示连接的状态。有以下取值：

0 表示连接尚未建立。
1 表示连接已建立，可以进行通信。
2 表示连接正在进行关闭握手。
3 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

WebSocket 事件

下面是 WebSocket 对象相关的事件。假定我们已经创建了上述的 Socket 对象：

事件	事件处理程序	描述
open	Socket.onopen	建立 socket 连接时触发这个事件。
message	Socket.onmessage	客户端从服务器接收数据时触发。
error	Socket.onerror	连接发生错误时触发。
close	Socket.onclose	连接被关闭时触发。

WebSocket 方法

下面是 WebSocket 对象相关的方法。假定我们已经创建了上述的 Socket 对象：

方法	描述
Socket.send()	send(data) 方法使用连接传输数据。
Socket.close()	close() 方法用于终止任何现有连接。

WebSocket 示例

一个 WebSocket 就是客户端和服务端之间的标准双向 TCP 套接字。套接字以 HTTP 连接开始，在 HTTP 握手之后“升级”为 TCP 套接字。握手之后，任意一端都可以发送数据。

客户端 HTML 和 JavaScript 代码

编写这篇教程时，只有少数几个浏览器支持 WebSocket() 接口。你可以使用最新版的 Chrome，Mozilla，Opera 和 Safari 尝试下面这个例子。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://localhost:9998/echo");
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        alert("Message is sent...");
     };
     ws.onmessage = function (evt) 
     { 
        var received_msg = evt.data;
        alert("Message is received...");
     };
     ws.onclose = function()
     { 
        // websocket is closed.
        alert("Connection is closed..."); 
     };
  }
  else
  {
     // The browser doesn't support WebSocket
     alert("WebSocket NOT supported by your Browser!");
  }
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

安装 pywebsocket

在测试上面的客户端程序之前，需要一个支持 WebSocket 的服务器。可以从 pywebsocket 下载 mod_pywebsocket-x.x.x.tar.gz，它只在为 Apache HTTP 服务器提供 WebSocket 扩展，然后按照如下步骤安装。

解压缩和解压下载的文件
进入 pywebsocket-x.x.x/src/ 目录。
执行 $python setup.py build
执行 $sudo python setup.py install
然后通过 $pydoc mod_pywebsocket 读取文档

这将会把他安装到我们的 python 环境中。

启动服务器

进入 __pywebsocket-x.x.x/src/mod_pywebsocket__ 文件夹并运行如下命令：

$sudo python standalone.py -p 9998 -w ../example/

这会启动监听 9998 端口的服务器，然后使用通过 -w 选项指定的处理程序目录，也就是 echo_wsh.py 所在目录。

现在使用 Chrome 浏览器打开起初创建的 html 文件。如果浏览器支持 WebSocket()，那么会得到一个指示浏览器支持 WebSocket 的消息框，当我们点击 “Run WebSocket” 时会得到服务器脚本发出的 Goodbye 信息。