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>標籤中。

運行效果以下：服務器