Minicap数据解析(PHP-Client)

2017-01-18  本文已影响0人  PreFU

<?php

/* @var $this yii\web\View */



use yii\helpers\Html;

$this->title = 'client';
$this->params['breadcrumbs'][] = $this->title;
?>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web sockets test</title>
    <script type="text/javascript">

        var ws;
        function ToggleConnectionClicked() {          
                    ws = new WebSocket("ws://127.0.0.1:2000");//连接服务器        
                    ws.onopen = function(event){alert("已经与服务器建立了连接\r\n当前连接状态:"+this.readyState);
                    console.log("握手成功");};

                    ws.onmessage = function(evt){                              
                        var img="data:image/png;base64,"+evt.data;          
                        var obj = document.getElementById('pic');
                        obj.src=img;  
                       }; 
                    ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);};
                    ws.onerror = function(event){alert("WebSocket异常!");};

        };

        function SendData() {
            try{
                var content = document.getElementById("content").value;
                if(content){
                    ws.send(content);
                }

            }catch(ex){
                alert(ex.message);
            }
        };

        function seestate(){
            alert(ws.readyState);
        }

    </script>
</head>
<body>
   <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接服务器</button><br /><br />
   <textarea id="content" ></textarea>
    <button id='ToggleConnection' type="button" onclick='SendData();'>发送我的名字:beston</button><br /><br />
    <button id='ToggleConnection' type="button" onclick='seestate();'>查看状态</button><br /><br />
    <div id ='pi2c' style="width:300px" ><img id ='pic' style="width:100%"/></div>

</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读