A demo page for latest WebSocket protocol [closed]_问答_开发者

Closed. This question is off-topic. It is not currently accepting answers.

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 10 years ago.

Improve this question

I've been searching all over the web for simple page that demos WebSocket. But all the examples I find seem to support an older protocol, failing to work in Firefox 6 and Chrome 14.

For example: http://html5demos.com/web-socket

I'd just like to see some workable demo somewhere, so I could make sure that it's开发者_如何学运维 my code that's failing not the browser-implementation of web socket.

THE WEBSOCKET SERVER DEMONSTRATION CURRENTLY WORKS WITH FIREFOX 7 BETA AND CHROME DEV (it's at 16 now). NOT FIREFOX 6, WHICH USES AND OLDER VERSION OF THE WEBSOCKET DRAFT PROTOCOL. (Just thought I'd mention that because I'm seeing a lot of server hits from Firefox 6 - must be dissatisfying for those who try it.)

Here's the code from the demonstration suggested by Cameron. Not sure if it fits your request for something "simple" exactly. It runs within a frame and the function showResults() that prints sends from the browser and what's received back from the server are sent to another frame. All the source code is available at (demo server changes - check bottom of this blog article for up-to-date link to demo ... demo has a download link). Otherwise, it shouldn't take a huge amount of fiddling to turn this back (as it started) into a single page app. Suggest if you want that, start by pointing showResults() to a div in the same page instead of the other page.

<?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>

Yes. Here's a working demo of the final call version of the websocket protocol: version 8 (hybi-8,9,10 ... 17). (demo server changes ... see blog article below for up-to-date link)

There's a blog article about it here: http://highlevellogic.blogspot.com/2011/09/websocket-server-demonstration_26.html

NOTE THAT IT USES FIREFOX 7 BETA (NOT 6, which supports and older version of the protocol) or Chrome dev-channel 14 or later.

(I guess we were all a bit sleepy. This is the direct, short answer to your question. Also, some of the demo dhtml code is listed above, along with a place to download it if you want.)