当前位置： 文江博客话题详情

最新WebSocket协议的演示页面

发布于 2024-12-07 02:02:46 字数 1459 浏览 0 评论 0原文

原文

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

蓝天 2024-12-14 02:02:46

WEBSOCKET 服务器演示当前可与 Firefox 7 Beta 和 Chrome DEV 配合使用（现在为 16）。不是 Firefox 6，它使用旧版本的 WEBSOCKET 草案协议。 （只是想我会提到这一点，因为我看到很多来自 Firefox 6 的服务器点击 - 对于那些尝试它的人来说一定是不满意的。）

这是 Cameron 建议的演示中的代码。不确定它是否完全符合您对“简单”事物的要求。它在一个框架内运行，并且打印从浏览器发送的函数 showResults() 以及从服务器接收回的内容被发送到另一个框架。所有源代码均可在 (演示服务器更改 - 检查此博客的底部文章提供最新演示链接...演示有一个下载链接）。否则，不应该需要大量的摆弄才能将其变回（就像它开始时一样）变成单页应用程序。如果您愿意，建议您首先将 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="[email protected]" />
 <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>

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="[email protected]" />
 <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>
回复 原文
千鲤 2024-12-14 02:02:46

是的。这是 websocket 协议最终调用版本的工作演示：版本 8 (hybi-8,9,10 ... 17)。 （演示服务器更改...请参阅下面的博客文章以获取最新链接）

这里有一篇关于它的博客文章：
http://highlevellogic.blogspot.com/2011/09/websocket-server -demonstration_26.html

注意它使用 FIREFOX 7 BETA（不是 6，它支持旧版本的协议）或 Chrome 开发通道 14 或更高版本。

（我想我们都有点困了。这是对你的问题的直接、简短的回答。此外，上面列出了一些演示 dhtml 代码，如果你愿意的话，还有一个下载它的地方。）

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.)

回复 原文
~没有更多了~

关于作者

べ繥欢鉨o。

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文