我一直在网上寻找演示WebSocket的简单页面。但我找到的所有示例似乎都支持较旧的协议，无法在Firefox 6和Chrome 14中工作。
例如:http://html5demos.com/web-socket
我只是想在某个地方看到一些可行的演示，所以我可以确保这是我的代码失败，而不是浏览器实现的web套接字。
WEBSOCKET SERVER演示目前在FIREFOX 7 BETA和CHROME DEV(现在是16)上运行。火狐6不会，因为它使用的是旧版本的websocket草案协议。(我只是觉得我应该提到这一点，因为我看到了很多来自Firefox 6的服务器点击-对于那些尝试它的人来说肯定不满意。)
这是Cameron建议的演示代码。不确定它是否完全符合你对"简单"的要求。它在一个帧内运行，showResults()函数打印从浏览器发送的内容，并将从服务器接收到的内容发送到另一个帧。所有的源代码都可以在(demo server changes -查看这篇博客文章底部的最新demo链接…Demo有下载链接)。否则，它不应该花费大量的摆弄，把它变成一个单页的应用程序。建议，如果你想这样做，开始通过指向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>
是。下面是websocket协议最终调用版本的工作演示:版本8 (hybi-8,9,10…)17)。(演示服务器更改…请参阅下面的博客文章获取最新链接)
这里有一篇关于它的博客文章:http://highlevellogic.blogspot.com/2011/09/websocket-server-demonstration_26.html
请注意，它使用FIREFOX 7 BETA(不是6，它支持更旧的协议版本)或Chrome dev-channel 14或更高版本。
我想我们都有点困了。这是对你问题的直接、简短的回答。此外，上面列出了一些演示html代码，如果需要，还提供了一个下载位置。