HTML5 WebSocket
概念:
WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
WebSocket 事件:
Open 连接建立时触发
Message 客户端接收服务端数据时触发
Error 通信发生错误时触发
Close 连接关闭时触发
WebSocket 方法
send() 使用连接发送数据
close() 关闭连接
具体实例:
安装 pywebsocket
在执行以上程序前,我们需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,
mod_pywebsocket 需要 python 环境支持,python如何安装在下一篇随笔
mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展,安装步骤如下:
解压下载的文件。
进入 pywebsocket 目录。
执行命令:
$ python setup.py build
$ python setup.py install
开启服务
在 pywebsocket/mod_pywebsocket 目录下执行以下命令:
$ sudo python standalone.py -p 9998-w ../example/
Html页面代码:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>测试</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上,使用 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>