<?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>
网友评论