Zhiqim Httpd即知启蒙WEB容器,是Zhiqim Framework面向WEB开发的多例服务,提供更简洁配置、积木式组件模块和天然的模型模板设计。

森中灵 最后提交于1月前 增加RedirectContext方便配置HTTP:80跳转到HTTPS:443
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()}