{{template "header"}}
{{define "ws"}}
<script language="javascript"type="text/javascript">
var host=window.location.host
var wsUri ="ws://{{.wsurl}}/ajaxchat";
var output;
function init() {
    output = document.getElementById("output");
    testWebSocket();
}
function testWebSocket() { websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) }; }
    function onOpen(evt) { writeToScreen("接入成功！！！");websocket.send("[[===]]"+"start"); }
    function onClose(evt) {
        writeToScreen("DISCONNECTED");
		websocket.close();
		 }
    function onMessage(evt) {
        writeToScreen('<span style="">'+ evt.data+'</span>');
       // websocket.close();
	}
    function onError(evt) {
        writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
	}
    function doSend() {
	    var message=$("#message").val();
		if (message=='') {
			alert("请先填写发送信息");
			$("#message").focus();
			return false;
		}
		$("#message").val('');
        websocket.send(message);
		}

    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
		var d = $("#output");
		var d=d[0];
        var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
		$("#output").append(pre);
        if (doScroll) {
            d.scrollTop = d.scrollHeight - d.clientHeight;
        }
		}

    window.addEventListener("load", init, false);
    function en(event){
		var evt=evt?evt:(window.event?window.event:null);//兼容IE和FF
        if (evt.keyCode==13){
         doSend()
        }
	}
</script>


<h2></h2>
<div style="border:1px solid #ccc;height:400px">
<div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;"></div>
<div class="row" >
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text"id='message'  class="form-control" style='width:794px' placeholder="send message" onkeydown="en(event);">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="doSend();">发送</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
{{end}}
{{template "footer"}}