Python：Tornado 第三章：HTML5 WebSocket概念及应用：第三节：客户端编程

时间 2019-11-11

标签 python tornado 第三 html5 html websocket 概念应用三节客户端编程栏目 Python 繁體版

原文原文链接

上一篇文章： Python：Tornado 第三章：HTML5 WebSocket概念及应用：第二节：服务端编程
下一篇文章： Python：Tornado 第四章：Tornado网站部署：第一节：调试模式

因为WebSocket是HTML5的标准之一，因此主流浏览器的Web客户端编程语音JavaScript已经支持WebSocket的客户端编程。javascript

客户端编程围绕着WebSocket对象展开，在JavaScript中能够经过以下代码初始化WebSocket对象：html

var Socket=new WebSocket(url);

在代码中只需给WebSocket构造函数传入服务器的URL地址，好比http://mysite.com/point.java

能够为该对象的以下事件指定处理函数以相应它们：web

WebSocket.onopen：此事件发生在WebSocket连接创建时。
WebSocket.onmessage：此事件发生在收到了来自服务器的消息时。
WebSocket.onerror：此事件发生在通讯过程当中有任何错误时。
WebSocket.onclose：此事件发生在服务器的连接关闭时。

除了这些事件处理函数，还能够经过WebSocket对象的两个方法进行主动操做：编程

WebSocket.send(data)：向服务器发送消息。
WebSocket.close()：主动关闭现有连接。

客户端WebSocket编程实例程序以下：index.htmlsegmentfault

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
<a href="javascript:WebSocketTest()">运行WebSocket</a>
<div id="messages" style="height: 200px;background: black;color:white"></div>

</body>
<script type="text/javascript">
    var messageContainer=document.getElementById("messages");
    function WebSocketTest() {
        if("WebSocket" in window){
            messageContainer.innerHTML="浏览器支持WebSocket";
            var ws=new WebSocket("ws://localhost:8888/websocket?Id=12345");
            ws.onopen=function () {
                ws.send("onopen")
            };
            ws.onmessage=function (evt) {
                var received_msg=evt.data;
                messageContainer.innerHTML=messageContainer.innerHTML+"<br/>收到的信息："+received_msg;
            }
            ws.onclose=function () {
                messageContainer.innerHTML=messageContainer.innerHTML+"<br/> 链接关闭了";
            }


        }else{
            messageContainer.innerHTML="浏览器不支持WebSocket"
        }
    }
</script>
</html>

对上述代码解析以下：浏览器

客户端页面主体是有两部分组成：一个Run WebSocket连接用于让用户启动WebSocket；另外一个id=message的<div>标签用于显示服务器端的消息。
使用JavaScript语句if("WebSocket" in window)能够判断当前浏览器是否支持WebSocket对象。
如何浏览器支持WebSocket对象，则定义实例ws连接到服务器的WebSocket地址，并传入本身的标识符参数。而后经过js语法定义事件：onopen、onmessage、onclose的处理函数。除了在onopen事件中客户端向服务器用WebSocket.send()函数发送了消息，其他事件均只将事件结果显示在页面<div>标签中。

运行效果以下：服务器