正文

最新 WebSocket 协议的演示页面 [关闭]

 2023-02-16  250

关键词：

【中文标题】最新 WebSocket 协议的演示页面 [关闭]【英文标题】：A demo page for latest WebSocket protocol [closed] 【发布时间】：2011-09-27 13:40:59 【问题描述】：

我一直在网上搜索演示 WebSocket 的简单页面。但我发现的所有示例似乎都支持旧协议，无法在 Firefox 6 和 Chrome 14 中运行。

例如：http://html5demos.com/web-socket

我只是想在某个地方看到一些可行的演示，这样我就可以确保失败的是我的代码，而不是 Web 套接字的浏览器实现。

【问题讨论】：

我正在使用带有内部 WebSocket 应用程序的 Chrome 14，它工作正常。尽管您没有明确要求它，但也许您可以发布代码的一些详细信息，以便对其进行修复。其实我现在的主要问题是 Firefox。理论上我应该能够在 Firefox 中使用相同的 JavaScript 代码，只需将 WebSocket 替换为 MozWebSocket，但它似乎不起作用。可能是我的服务器有问题，或者 MozWebSocket 实现有问题。是的。下面 Cameron 建议的页面中的 javascript 使用 MozWebSocket if (typeof MozWebSocket != "undefined")。我目前正在运行 Firefox 7 Beta，它在下面 Cameron 建议的文章中给出的其他浏览器中工作得很好。我相信这也适用于您的 Chrome 14。虽然 Firefox 在关闭事件上可能有问题。我还不知道它是什么，但自动开始猜测。他们可能尚未处理关闭消息。这似乎很可能，因为下面 Cameron 建议的浏览器应用程序会打印出服务器发送回的“再见”消息以响应关闭消息（用 Chromium 试试，你会看到）。 Firefox 会抛出一个未定义的错误。顺便说一句：您应该能够通过转到关于 Google Chrome 和关于 Firefox 将您的浏览器更新到最新版本。当您这样做时，它们会自动更新。 【参考方案1】：

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>

【讨论】：

所有源代码现在都可以在：isr.nu/ws/WSJavaScript.zip 我还可能会提到这样一个事实，如果有人想修改代码以便它也可以在 MSIE 中运行（现在，它只加载顶部框架然后阻塞），那将是相当不错的有。如果您接受 Google Frames 的自动下载/安装，服务器应该可以使用 MSIE。感谢您提供有关 Firefox 6 的说明。我猜你是我在过去 24 小时内看到使用 Firefox 6 请求访问服务器的人之一。我已经看到了这一点以及其他各种各样的东西。只有正确的“版本 8”才会得到响应，但我仍然会收到每次尝试的信息以及发送的信息。感谢这篇文章，我终于让我的聊天室网页可以与 Firefox 7.01 一起使用。谢谢！ +1 问题 +1 对此回复。【参考方案2】：

是的。这是 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 代码，如果您愿意，还可以在此处下载。）

【讨论】：

Firefox 7.01 和 8 Beta 存在外来字符问题。它不会影响浏览器体验，只会导致服务器上抛出错误。没什么可担心的。它继续运行。此外，Firefox 不会处理关闭时返回的消息。这也没什么好担心的。您只会在浏览器中收到错误报告。它不会停止运行。如果您运行 Chrome 开发通道 14 或更高版本，您会注意到它会收到一条“再见”消息，而不是 Firefox 显示的错误。 Firefox 7 不再是测试版。已经发布了。

websocket协议数据帧传输和关闭连接

之前总结了关于Websocket协议的握手连接方式等其他细节，现在对socket连接建立后的数据帧传输和关闭细节总结。一、数据帧格式数据传输使用的是一系列数据帧，出于安全考虑和避免网络截获，客户端发送的数据帧必... 查看详情

如何在windows系统中安装websocket模块

参考技术AWebSocket协议本质上是一个基于TCP的协议。为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息”Upgrade:WebSocket”表明这是... 查看详情

如何为 WebSocket 协议配置 AWS ELB 和 Nginx？ [关闭]

】如何为WebSocket协议配置AWSELB和Nginx？[关闭]【英文标题】：HowtoconfigureAWSELBandNginxforWebSocketprotocol?[closed]【发布时间】：2015-10-3010:26:16【问题描述】：我在AWS中有N层架构Web应用程序。HTTP请求流顺序如下：Nginx-ELB（公共ELB，Nginx的... 查看详情

使用html5的websocket实现服务端和客户端数据通信（有演示和源码）

WebSocket协议是基于TCP的一种新的网络协议。WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。WebSocket最大特点就是，服务器可以主动... 查看详情

websocket实战之——javascript例子

...Tinywan/PHP_Experience一、详细代码案例详细解读一个简单html5WebSocket的Js实例教程,附带完整的javascriptwebsocket实例源码，以及实例代码效果演示页面，并对本实例的核心代码进行了深入解读。从WebSocket通讯三个阶段（打开握手、数据... 查看详情

初识websocket

...的制定，也为我们提供了浏览器与服务端的双工通信协议WebSocket。　　WebSocket协议的格式为"ws://IP:Por 查看详情

websocket vs http vs spdy [关闭]

】websocketvshttpvsspdy[关闭]【英文标题】：websocketvshttpvsspdy[closed]【发布时间】：2016-05-0805:52:15【问题描述】：我对Web开发很陌生。我已经阅读了有关Web数据交换的不同方法。现在我发现人们通常发明了三种网络协议：http、websocket... 查看详情

页面关闭后无法在服务人员中维护 websocket

】页面关闭后无法在服务人员中维护websocket【英文标题】：unabletomaintainwebsocketinserviceworkerafterpageclosed【发布时间】：2019-11-2501:09:18【问题描述】：我在service-worker中使用websocket。它在网页打开时运行良好，但如果网页关闭，websoc... 查看详情

Delphi 的 WebSocket 服务器实现 [关闭]

】Delphi的WebSocket服务器实现[关闭]【英文标题】：WebSocketserverimplementationsforDelphi[closed]【发布时间】：2011-12-2120:18:05【问题描述】：正如Aquarium中提到的，WebSocket协议，通常被描述为HTML5的关键元素之一，终于有了beenblessed(RFC6455)... 查看详情

webrtc和websocket的区别

...输层协议，而HTTP是应用层的协议。在这三者之间，SPDY和WebSocket都是与HTTP相关的协议，而TCP是HTTP底层的协议。WebSocket则提供使用一个TCP连接进行双向通讯的机制，包括网络协议和API，以取代网页和服务器采用HTTP轮询进行双向通... 查看详情

jetty 9，websockets 和关闭服务器端的 websocket 连接

】jetty9，websockets和关闭服务器端的websocket连接【英文标题】：jetty9,websocketsandclosingwebsocketconnectiononserverside【发布时间】：2013-04-2002:39:51【问题描述】：我有一个使用基于jetty8的websocket服务器的应用程序。一切正常，当用户刷新... 查看详情

nginx代理websocket方法

参考技术AWebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。它与HTTP一样通过已建立的TCP连接来传输数据，但是它和HTTP最大不同是：1）WebSocket是一种双... 查看详情

一个html5页面怎么创建多个websocket

1.WebSocketAPI简介首先看一段简单的javascript代码，该代码调用了WebSockets的API。[javascript]viewplaincopyvarws=newWebSocket(“ws://echo.websocket.org”);ws.onopen=function()ws.send(“Test!”);;ws.onmessage=function(evt)console.log(evt.data);ws.close();;ws.onclose=function(evt... 查看详情

利用websocket使网页和服务器通信

WebSocketprotocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。具体说明请查阅相关资料，下面我来演示一种简单的页面与服务器通信的简单样例。新建个web工程（基于tomcat-7版本（6以下的版本未实现webSocket... 查看详情

一个html5页面怎么创建多个websocket

参考技术A1.WebSocketAPI简介首先看一段简单的javascript代码，该代码调用了WebSockets的API。[javascript]viewplaincopyvarws=newWebSocket(“ws://echo.websocket.org”);ws.onopen=function()ws.send(“Test!”);;ws.onmessage=function(evt)console.log(evt.data);ws.close();;ws.onclose... 查看详情

websocket面试题

参考技术A1.什么是websocket？websocket是HTML5的一种新协议，允许服务器想客户端传递信息，实现浏览器和客户端双工通信。2.websocket特点（1）与http协议有良好的兼容性；（2）建立在TCP协议之上，和http协议同属于应用层；（3）数据... 查看详情

如何测试webservice和websocket接口

您好：WebSocket是html5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如Chrome，Safari，Firefox，Opera，IE等等，对该协议支持最早的应该是chrome，从chrome12就已经开始支持，随着协议草案的不断变化，各个浏览器对协议... 查看详情

springboot-websocket

参考技术Awebsocket是一种网络通信协议，类似http协议Http协议有一个缺陷：通信只能由客户端发起在某种场景下，例如，在外卖场景下，骑手位置更新时，服务器端向客户端发送骑手位置。如果使用http协议，那么就只能轮询了，... 查看详情