2011-09-27 83 views
3

我一直在网上搜索简单的WebSocket演示页面。但我找到的例子似乎支持旧的协议,未能在Firefox 6和Chrome 14最新的WebSocket协议演示页面

工作例如:http://html5demos.com/web-socket

我只是想看到一些可行的演示的地方,所以我可以请确保它是我的代码不能通过浏览器实现web套接字。

+0

我使用Chrome 14与内部WebSocket应用程序,它工作正常。虽然你没有明确地问它,也许你可以发布你的代码的一些细节,以便它可以修复。 – pimvdb

+0

其实我现在的主要问题是Firefox。理论上,我应该可以在Firefox中使用相同的JavaScript代码,只需用MozWebSocket代替WebSocket,但它似乎不起作用。这可能是我的服务器有问题,或者是MozWebSocket实现。 –

+1

是的。下面Cameron建议的页面中的javascript使用MozWebSocket if(typeof MozWebSocket!=“undefined”)。我目前正在运行Firefox 7 Beta,它的工作情况很好,以及Cameron在下面提供的文章中给出的其他浏览器。我相信这也适用于您的Chrome 14。 –

回答

2

网站服务器演示目前使用FIREFOX 7 BETA和CHROME DEV(现在是16年)。不使用火狐6,其中使用和旧版本的网络协议草案。 (只是觉得我会提到这一点,因为我看到很多来自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="[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> 
+1

所有的源代码现在可以在:isr.nu/ws/WSJavaScript.zip –

+1

我可能还会提到一个事实,即如果任何人想要修改代码,以便它也在MSIE中运行(现在,它会加载顶部框架只有然后扼流圈),这将是相当不错的。如果您接受Google Frames的自动下载/安装,服务器应与MSIE一起工作。 –

+0

感谢您关于Firefox 6的注意事项。 –

0

是的。以下是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代码,以及一个可以下载它的地方,如果你想要的话。)

+0

Firefox 7.01和8 Beta有一个外来字符问题。它不会影响浏览器体验,只会导致服务器上出现错误。完全不用担心。它继续运行。此外,Firefox不处理关闭时返回的消息。这也不用担心。您只会在浏览器中报告错误。它不会停止运作。如果您运行的是Chrome开发通道14或更高版本,则会注意到它收到“再见”消息,而不是Firefox显示的错误。 –

+0

Firefox 7不再是Beta版。它已经发布。 –