Zhiqim Httpd即知启蒙WEB容器,是Zhiqim Framework面向WEB开发的多例服务,提供更简洁配置、积木式组件模块和天然的模型模板设计。
websocket.zml3KB
<script>
var conn = null;
function doOpen()
{//开启
var url = (location.protocol=="https:"?"wss:":"ws:")+"//"+location.hostname+":"+location.port+"${context.getRootPath("/service/ws")}";
conn = new WebSocket(url, "WebSocketServicer");
conn.onopen = function()
{
doWrite(new Date().format("yyyy-MM-dd HH:mm:ss,S") + ": ws.onopen");
Z("#close").show();
Z("#open").hide();
};
conn.onclose = function(e){doWrite(new Date().format("yyyy-MM-dd HH:mm:ss,S") + ": ws.onclose");doClose()};
conn.onerror = function(e){doWrite(new Date().format("yyyy-MM-dd HH:mm:ss,S") + ": ws.onerror");doClose()};
conn.onmessage = function(e){doWrite(e.data);};
}
function doClose()
{//关闭
if (conn == null)
return;
conn.close();
conn = null;
Z("#close").hide();
Z("#open").show();
}
function doWrite(data)
{//写入到文本框
var old = Z("#text").val();
if (!Z.V.isEmpty(old))
data = old + "\r\n" + data;
Z("#text").val(data);
Z("#text")[0].scrollTop = Z("#text")[0].scrollHeight;
}
function doSend()
{//发送到服务器
if (conn == null)
{
Z.failure("WS连接未开启");
return;
}
var data = Z("#data").val();
if (Z.V.isEmpty(data))
return;
conn.send(data);
}
Date.prototype.format = function(fmt)
{
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
"H+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
</script>
${zhiqim_manager_breadcrumb("测试WS连接")}
${zhiqim_manager_content()}
<#-- 导航 -->
<div class="z-tabnav-main z-mg-b20 ${zmr_color_class}">
<nav>
<ul>
<li class="z-active">测试WS连接</li>
</ul>
<div class="z-float-left z-mg10">
<input id="data" name="data" class="z-float-left z-input z-w300 zi-bd-r-none" value="" maxlength="64" placeholder="消息文本">
<button class="z-float-left z-button z-w80 zi-bd-rd0 ${zmr_color_class}" onclick="doSend()"><i class="z-font z-upload"></i>发送</button>
</div>
<div class="z-text-right z-mg-t10 z-mg-r5">
<button id="open" class="z-button z-green z-w80" onclick="doOpen();">开启</button>
<button id="close" class="z-button z-red z-w80" style="display:none;" onclick="doClose();">关闭</button>
</div>
</nav>
</div>
<#-- 列表 -->
<table class="z-table z-bordered z-pd10 z-bg-white z-text-center">
<tr class="zi-h40" bgcolor="${zmr_thead_bgcolor}">
<td align="left">消息内容</td>
</tr>
<tr style="height:400px">
<td><textarea id="text" class="z-w100p z-samp zi-px16 z-lh130p" style="height:380px;overflow-y:scroll;"></textarea></td>
</tr>
</table>
${zhiqim_manager_content_end()}