<html>
<head> 
<title>Demo</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<script src="jquery.js?bust=1" type="text/javascript"></script> 
<script type="text/javascript"> 

function sc(){
    var div = document.getElementById("console_wrapper"); 
    div.scrollTop = div.scrollHeight;
}

var ws;

$(document).ready(function () {
    var s = setInterval("sc()", 500);
    if ("WebSocket" in window) { 
        debug("Browser supports web sockets!", 'success');
        connect($('#host').val());
        $('#console_send').removeAttr('disabled');
    } else {
        debug("Browser does not support web sockets", 'error');
    };
// function to send data on the web socket 
    function ws_send(str) { 
        try { 
            ws.send(str); 
        } catch (err) { 
            debug(err, 'error'); 
        } 
    }
// connect to the specified host 
function connect(host) { 
    debug("Connecting to " + host + " ..."); 
    try {
        ws = new WebSocket(host); // create the web socket 
    } catch (err) {
        debug(err, 'error'); 
    }
  $('#host_connect').attr('disabled', true); // disable the 'reconnect' button
  ws.onopen = function () {
  debug("connected... ", 'success'); // we are in! :D
};
ws.onmessage = function (evt) {
debug(evt.data, 'response'); // we got some data - show it omg!!
};
ws.onclose = function () {
   debug("Socket closed!", 'error'); // the socket was closed (this could be an error or simply that there is no server) 
   $('#host_connect').attr('disabled', false); // re-enable the 'reconnect button 
};
};

// function to display stuff, the second parameter is the class of the <p> (used for styling) 
function debug(msg, type) { 
    $("#console").append('<p class="' + (type || '') + '">' + msg + '</p>');
};

// the user clicked to 'reconnect' button
$('#host_connect').click(function () { 
    debug("\n"); 
    connect($('#host').val()); 
}); 
// the user clicked the send button 
$('#console_send').click(function () { 
var time = new Date().getTime(); 
var msg = $('#console_input').val() + time; 
ws_send(msg); 
$('#console_input').val(' '); 
}); 

$('#console_input').keyup(function (e) { 
if(e.keyCode == 13){ // enter is pressed 
    ws_send($('#console_input').val()); 
   $('#console_input').val(' '); 
}
});
});
</script> 

<style type="text/css">
.error {color: red;}
.success {color: green;}
#console_wrapper {background-color: black; color:white;padding:5px;}
#console p {padding:0;margin:0;}
</style>
</head>
<body>
<h1>Xmeet Demo</h1> 
<div id="server_wrapper" > 
<p>Server 
<input type="text" name="host" id="host" value="ws://meet.xpro.im:8080/xgate/websocket/xnestname" /> 
<input type="submit" name="host_connect" id="host_connect" value="重新连接" /> 
</p> 
</div> 

<div id="console_wrapper" style="overflow:auto; height:600px; border: 1px solid #999;">
<pre id="console"></pre> 
</div> 
<div> 
<input type="text" name="console_input" id="console_input" value="" /> 
<input type="submit" name="console_send" id="console_send" value="Send" /> 
</div> 
</body> 
</html>

运 行 一 下