WEBSOCKET 服务器演示目前可与 Firefox 7 BETA 和 Chrome DEV 一起使用（现在是 16 版）。不是 Firefox 6，它使用和旧版本的 WEBSOCKET 草案协议。 （我只是想提一下，因为我看到很多来自 Firefox 6 的服务器点击 - 一定会让尝试它的人不满意。）
这是 Cameron 建议的演示代码。不确定它是否完全符合您对“简单”事物的要求。它在一个框架内运行，打印从浏览器发送的函数 showResults() 以及从服务器接收回的内容被发送到另一个框架。所有源代码都可以在 (demo server changes - check bottom of this blog article for up-to-date link to demo ... demo has a download link) 获得。否则，不应该花费大量的精力来将它（开始时）变成单页应用程序。建议您是否愿意，首先将 showResults() 指向同一页面中的 div，而不是其他页面。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>HLL Command Center</title>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<meta name="description" content="HTML5 Websockets for the HLL high level logic open source project" />
<meta name="keywords" content="high level logic, hll, open source, artificial intelligence, agents" />
<meta name="author" content="Roger F. Gay" />
<meta name="owner" content="rogerfgay@isr.nu" />
<meta name="copyright" content="%a9 2011 Roger F. Gay" />
<meta name="license" content="Lesser General Public License (LGPL v. 2.1)" />
<meta name="website" content="http://hll.dev.java.net" />
<meta name="permission" content="restricted" />
<meta name="created" content="20110801" />
<meta name="changed" content="20110902" />
<meta name="security" content="public" />
<meta name="generator" content="skill, knowledge, and intelligence" />
<style type="text/css">
body {background-color:Khaki;}
</style>
<script type="text/javascript">
var websocket;
var connected=false;
var frameDoc;
var appType;
function doConnect(wsURIValue) {
if (connected) {
showResults("<span style='color: red;'>You're already connected!</span>");
} else {
if (appType == "Mozilla") {
websocket = new MozWebSocket(document.getElementById('wsURI').value);
} else {
websocket = new WebSocket(document.getElementById('wsURI').value);
}
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) {
connected=true;
showResults("CONNECTED");
doSend("WebSocket rocks!");
}
function onClose(evt) {
connected=false;
websocket.close();
showResults("DISCONNECTED");
}
function doPing () {
if (connected) {
showResults("Not yet implemented in browser. Sending pseudo-ping message: 'Ping'.");
websocket.send('Ping');
} else {
showResults("<span style='color: red;'>NOT CONNECTED: No pseudo-ping message sent.</span>");
}
}
function onMessage(evt) {
showResults("<span style='color: blue;'>RESP: " + evt.data + "</span>");
}
function onError(evt) {
showResults("<span style='color: red;'>ERROR:</span> " + evt.data);
}
function doSend(message) {
if (connected) {
websocket.send(message);
showResults("SENT: " + message);
} else {
showResults("<span style='color: red;'>NOT CONNECTED: No message sent.</span>");
}
}
function doMultiple (message) {
for (i=0; i<n_times; i++) {
if (connected) {
websocket.send(message);
showResults("SENT: " + message);
} else {
showResults("<span style='color: red;'>NOT CONNECTED: No message sent.</span>");
}
}
}
function doClose(message) {
if (connected) {
showResults("CLOSING");
websocket.close();
connected=false;
} else {
showResults("<span style='color: red;'>NOT CONNECTED</span>");
}
}
function showResults(message) {
frameDoc.showResults(message);
}
function init() {
if ((frameDoc = parent.results)) {
document.getElementById('wsURI').value=wsUri;
document.getElementById('message').value=mess;
showResults("Frame communication confirmed.");
} else {
document.getElementById("testit1").innerHTML = "<span style='color:red'>Interframe communication failed for this webpage.</span>";
alert("Problem printing output: This application has been tested with up-to-date versions of Chrome, Firefox, and MSIE. (May 22, 2011)");
return;
}
if (typeof MozWebSocket != "undefined") { // (window.MozWebSocket)
appType = "Mozilla";
} else if (window.WebSocket) {
appType = "Chrome";
} else {
showResults('<strong style="color: red;">ERROR: This browser does not support WebSockets.</strong>');
return;
}
}
function changeNTimes () {
n_times = flowContainer.ntimes.options[document.flowContainer.ntimes.selectedIndex].value;
}
var wsUri = "ws://isr2.mine.nu/echo";
var mess = "HLL International: " + String.fromCharCode(196,197,214) + " " + String.fromCharCode(945,946,948) + " " + String.fromCharCode(20149,20150,20153) + " " + String.fromCharCode(1490,1513,1488,1458) + " " + String.fromCharCode(286,350,399);
var n_times=5;
// window.addEventListener("load", init, false);
</script>
</head>
<body onload="init()">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<b>Server: </b>
<input type='button' onclick="doConnect(document.getElementById('wsURI').value)" value='Open Connection' />
<input type='button' onclick="doClose()" value='Close Connection' />
<input type='button' onclick="doPing()" value='Ping' /><br>
<input type='text' style="text-align:left;" size='65' id='wsURI' /><br><br>
<span style="background-color:#CCCCCC">
<b><input type="radio" id="encoding" value="text" disabled="true" checked /> text
<input type="radio" id="encoding" value="binary" disabled="true" /> binary</b>
(binary not yet browser supported) <br><br>
</span>
<b>Message: </b>
<input type='button' onclick="doSend(document.getElementById('message').value)" value='Send Message to Server' /><br>
<textarea cols="50" rows="3" maxlength='260' id="message" ></textarea><br><br>
<b>Continuation (will be sent if not null): </b><br>
<textarea cols="50" rows="3" maxlength='125' id="continued" ></textarea><br><br>
<form name="flowContainer">
<input type='button' onclick="doMultiple(document.getElementById('message').value)" value='MultiMessage' /><br>
<select name="ntimes" onchange="changeNTimes()">
<option value="5" selected="selected">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</form>
<div id='testit3' name='testit3' style='color:blue'></div><br><br>
<div id='testit1' name='testit1' style='color:green'></div>
<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>