极客教程HTML5 – WebSockets
WebSockets是一种新一代的双向通信技术，适用于在单个套接字上运行，并在符合HTML 5标准的浏览器中通过JavaScript接口公开。
一旦您与Web服务器建立了Web Socket连接，您可以通过调用 send() 方法从浏览器向服务器发送数据，通过 onmessage 事件处理程序从服务器接收数据到浏览器。
以下是创建新WebSocket对象的API。
var Socket = new WebSocket（url，[protocal]）;
这里的第一个参数url指定要连接的URL。第二个属性协议是可选的，如果出现，它指定服务器必须支持的子协议，以确保连接成功。
WebSocket属性
以下是WebSocket对象的属性。假设我们按照上述步骤创建了Socket对象-
| 序号 | 属性和描述 |
|---|---|
| 1 | Socket.readyState 只读属性readyState表示连接的状态。它可以具有以下值- 值为0表示尚未建立连接。 值为1表示连接已建立，通信可能。 值为2表示连接正在进行关闭握手。 值为3表示连接已关闭或无法打开。 |
| 2 | Socket.bufferedAmount 只读属性bufferedAmount表示已使用send()方法排队的UTF-8文本的字节数。 |
WebSocket事件
以下是与WebSocket对象相关联的事件。假设我们按照上述步骤创建了Socket对象-
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| 打开 | Socket.onopen | 当套接字连接建立时发生此事件。 |
| 消息 | Socket.onmessage | 当客户端接收到来自服务器的数据时发生此事件。 |
| 错误 | Socket.onerror | 在通信发生任何错误时发生此事件。 |
| 关闭 | Socket.onclose | 当连接关闭时发生此事件。 |
WebSocket方法
以下是与WebSocket对象相关联的方法。假设我们按照上述步骤创建了Socket对象-
| 序号 | 方法和描述 |
|---|---|
| 1 | Socket.send() send（data）方法使用连接传输数据。 |
| 2 | Socket.close() close（）方法将用于终止任何现有的连接。 |
WebSocket示例
WebSocket是客户端和服务器之间的标准双向TCP套接字。套接字首先作为HTTP连接，然后在HTTP握手之后“升级”为TCP套接字。握手之后，任何一方都可以发送数据。
客户端HTML和JavaScript代码
在编写本教程时，支持WebSocket（）接口的Web浏览器只有几个。您可以尝试使用最新版本的Chrome、Mozilla、Opera和Safari使用以下示例：
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
alert("您的浏览器支持WebSocket！");
// 打开一个WebSocket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() {
// WebSocket已连接，使用send()发送数据
ws.send("发送的消息");
alert("消息已发送...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("消息已接收...");
};
ws.onclose = function() {
// WebSocket已关闭
alert("连接已关闭...");
};
} else {
// 浏览器不支持WebSocket
alert("您的浏览器不支持WebSocket！");
}
}
</script>
</head>
<body>
<div id = "sse">
<a href = "javascript:WebSocketTest()">运行WebSocket</a>
</div>
</body>
</html>
安装pywebsocket
在测试客户端程序之前，您需要一个支持WebSocket的服务器。从 pywebsocket 下载mod_pywebsocket-x.x.x.tar.gz，该软件旨在为Apache HTTP Server提供一个Web Socket扩展，并按照以下步骤进行安装。
- 解压并解压缩下载的文件。
-
进入 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选项指定的”handlers”文件夹，其中包含我们的echo_wsh.py。
现在使用Chrome浏览器打开您在开始时创建的HTML文件。如果您的浏览器支持WebSocket()，则会收到一条提示，说明您的浏览器支持WebSocket，最后当您单击”运行WebSocket”时，您会收到服务器脚本发送的Goodbye消息。