[0001]
[0002]
[0003]
[0004]
[0005]
[0006]
[0007]
[0008]
[0009]
[0010]
[0011]
[0012]
[0013]
[0014]
[0015]
[0016]
[0017]
[0018]
[0019]
[0020]
[0021]
[0022]
[0023]
[0024]
[0025]
[0026]
[0027]
[0028]
[0029]
[0030]
[0031]
[0032]
[0033]
[0034]
[0035]
[0036]
[0037]
[0038]
[0039]
[0040]
[0041]
[0042]
[0043]
[0044]
[0045]
[0046]
[0047]
[0048]
[0049]
[0050]
[0051]
[0052]
[0053]
[0054]
[0055]
[0056]
[0057]
[0058]
[0059]
[0060]
[0061]
[0062]
[0063]
[0064]
[0065]
[0066]
[0067]
[0068]
[0069]
[0070]
[0071]
[0072]
[0073]
[0074]
[0075]
[0076]
[0077]
[0078]
[0079]
[0080]
[0081]
[0082]
[0083]
[0084]
[0085]
[0086]
[0087]
[0088]
[0089]
[0090]
[0091]
[0092]
[0093]
[0094]
[0095]
[0096]
[0097]
[0098]
[0099]
[0100]
[0101]
[0102]
[0103]
[0104]
[0105]
[0106]
[0107]
[0108]
[0109]
[0110]
[0111]
[0112]
[0113]
[0114]
[0115]
[0116]
[0117]
[0118]
[0119]
[0120]
[0121]
[0122]
[0123]
[0124]
[0125]
[0126]
[0127]
[0128]
[0129]
[0130]
[0131]
[0132]
[0133]
[0134]
[0135]
[0136]
[0137]
[0138]
[0139]
[0140]
[0141]
[0142]
[0143]
[0144]
[0145]
[0146]
[0147]
[0148]
[0149]
[0150]
[0151]
[0152]
[0153]
[0154]
[0155]
[0156]
[0157]
[0158]
[0159]
[0160]
[0161]
[0162]
[0163]
[0164]
[0165]
[0166]
[0167]
[0168]
[0169]
[0170]
[0171]
[0172]
[0173]
[0174]
[0175]
[0176]
[0177]
[0178]
[0179]
[0180]
[0181]
[0182]
[0183]
[0184]
[0185]
[0186]
[0187]
[0188]
[0189]
[0190]
[0191]
[0192]
[0193]
[0194]
[0195]
[0196]
[0197]
[0198]
[0199]
[0200]
[0201]
[0202]
[0203]
[0204]
[0205]
[0206]
[0207]
[0208]
[0209]
[0210]
[0211]
[0212]
[0213]
[0214]
[0215]
[0216]
[0217]
[0218]
[0219]
[0220]
[0221]
[0222]
[0223]
[0224]
[0225]
[0226]
<!DOCTYPE html>
<html>
<head>
<!--
Copyright (C) 2010-2013 Mark G.Daniel
This program comes with ABSOLUTELY NO WARRANTY.
This is free software, and you are welcome to redistribute it under the
conditions of the GNU GENERAL PUBLIC LICENSE, version 3, or any later version.
http://www.gnu.org/licenses/gpl.txt
-->
<title>WebSocket Scripting - Echo Demonstration</title>

<style type="text/css">
body { font-family: sans-serif, arial, helvetica; font-size:11pt; }
.demo { font-size:130%; font-weight:bold; text-decoration:underline; text-align:center; }
.application th { text-align:right; vertical-align:top; }
.clientab th { padding:0.2em 0 0.2em 1em; text-align:right; }
.clientab td { padding:0.2em 0 0.2em 1em; text-align:right; font-family:monospace; }
.status { width:99%; margin:1em; }
.echo { width:99%; margin:1em; background-color:whiteSmoke; }
.revealhide { font-weight:bold; }
.documentation { display:none; padding:0 2em 0 2em; }
</style>

<script language="JavaScript">
function testWebSocketSupport()
{
   try {
      var ws = new WebSocket("wss://localhost/");
      if (typeof ws.protocol == "undefined")
         return -1;
      else
         return +1;
   }
   catch (err) {
      return 0;
   }
}
function reportWebSocketSupport()
{
   var level = testWebSocketSupport();
   if (level != 1)
      document.getElementById("nowebsocket").innerHTML =
'<span style="background-color:#ff0000;padding:1px;font-size:120%;">\
This browser does not support WebSocket!\
</span><br /><i>' + navigator.userAgent + '</i>';
}
if (window.addEventListener)
   window.addEventListener("load", reportWebSocketSupport, false);
else
if (window.attachEvent)
   window.attachEvent("onload", reportWebSocketSupport);
</script>

</head>
<body>

<div id="dbug"></div>
<table class="application" cellpadding="5" cellspacing="5" border="0">
<tr><td colspan="2" class="demo">WebSocket Scripting &nbsp;&mdash;&nbsp; Echo Demonstration</td></tr>
<tr><td id="OnNext" colspan="3" style="text-align:center;"></td></tr>
<tr><td id="nowebsocket" colspan="2" style="text-align:center;"></td></tr>
<tr>
<th align="left">Status:</th>
<td id="status" class="status">[closed]</td>
</tr>
<tr>
<th align="left">Echo:</th>
<td id="echo" class="echo"></td>
</tr>
<tr>
<th align="left">This:</th>
<td id="this" class="this">
<input id="thistxt" class="thistxt" type="text" size="80" value=""
onfocus="webSocketOpen()">
</td>
</tr>
<td></td>
<td id="perkey" class="perkey">
<input id="keystr" class="keystr" type="checkbox" value="1"
onchange="thisTxtObj.focus();thisTxtObj.value=''">&nbsp;per-keystroke
</td>
</tr>
</table>

<br>
<div class="revealhide">Description&nbsp;<tt>[<a name="descrip" href="javascript:revealHide('descrip')">+</a>]</tt></div>

<div name="descrip" class="documentation">

<p>This is a demonstrator for the <b>asynchronous, bi-directional</b> network
channel provided by a WebSocket.
<br>This application <b>handles multiple, concurrent clients</b>.</p> 

<p> Enter a string into the <i>This:</i> field and it will be echoed back with
a counter.  Set <i>[x]per-keystroke</I> and each key pressed will be echoed.  A
heart-beat timer is displayed in the status area.</p>

<p>This demonstration is JavaScript-driven at the browser end</p>

<p style="margin-left:2em;"><tt>WASD_ROOT:[SRC.WEBSOCKET]<a target="_blank"
href="ws_echo.html?httpd=content&type=text/plain">WS_ECHO.HTML</a></tt></p>

<p>and uses a WebSocket protocol application (script) at the WASD server end</p>

<p style="margin-left:2em;"><tt>WASD_ROOT:[SRC.WEBSOCKET]<a target="_blank"
href="ws_echo.c">WS_ECHO.C</a></tt></p>

<p>This application uses the VMS string descriptor API of wsLIB (both as an
example and as a test-bench).

<p>All of these interactions can be observed using the WASD WATCH facility;
[x]CGI, [x]DCL and [x]Network Data items.</p>
                                
</div>

<div class="revealhide">Configuration&nbsp;<tt>[<a name="config" href="javascript:revealHide('config')">+</a>]</tt></div>

<div name="config" class="documentation">

<p>The script is a native WebSocket protocol application and so the executable
should only need placing in the script directory.</p>
</div>

<script language="JavaScript">

if (window.location.protocol == "http:")
   var URL = "ws://";
else
   var URL = "wss://";
URL += window.location.host + "/cgiplus-bin/ws_echo"

var ws = null;
var sendMsg = null;
var sendTimer = null;
var webSocketConnected = false;
var webSocketNotSupported = false;
var echoObj = document.getElementById("echo");
var keystrObj = document.getElementById("keystr");
keystrObj.checked = false;
var statusObj = document.getElementById("status");
var thisTxtObj = document.getElementById("thistxt");
var dbugObj = document.getElementById("dbug");

thisTxtObj.onkeypress = thisKeyPress;

function dbugOut (text) { dbugObj.innerHTML = text; }

function thisKeyPress (evt) {
   var ch = String.fromCharCode(evt.charCode);
   if (keystrObj.checked) {
      var ch = String.fromCharCode(evt.charCode);
      ws.send("\x07"+ch);
   }
   // hmmm, Firefox 4.0b2 transmits a 0x00 - suppress!
   if (evt.charCode != 13 && evt.charCode != 0) return true;
   if (thisTxtObj.value.replace(/^\s+|\s+$/g, '').length <= 0) return false;
   if (!keystrObj.checked) ws.send(thisTxtObj.value);
   thisTxtObj.value = "";
   return false;
}

function webSocketOpen () {

   if ("WebSocket" in window) {

      if (ws) return;

      ws = new WebSocket(URL);

      ws.onopen = function(evt) {
         statusObj.innerHTML = "[open]";
         webSocketConnected = true;
      };

      ws.onclose = function(evt) {
         statusObj.innerHTML += "&nbsp;&nbsp;[disconnected]";
         ws = null;
         webSocketConnected = false;
      };

      ws.onmessage = function(evt) { 
         var data = evt.data;
         if (data.substr(0,1) == "\x07")
            statusObj.innerHTML = data.substr(1);
         else
         if (evt.data.substr(0,7) == "OnNext\x07")
            document.getElementById("OnNext").innerHTML =
               "WsLibOnNextRequest()";
         else
            echoObj.innerHTML += data.replace( /\n/g, '<br />\n' );
      };

      statusObj.innerHTML = "[connecting...]";
      echoObj.innerHTML = "";
      thisTxtObj.value = "";
      thisTxtObj.focus();
      keystrObj.checked = false;

   } else {
     if (!webSocketNotSupported) {
        statusObj.innerHTML = "WebSocket not supported!";
        webSocketNotSupported = true;
     }
   }

   return false;
}

function revealHide (name) {
   var nameAry = document.getElementsByName(name);
   var ancObj = nameAry[0];
   var divObj = nameAry[1];
   if (divObj.style.display == "block") {
      ancObj.innerHTML = "+";
      divObj.style.display = "none";
   }
   else {
      ancObj.innerHTML = "-";
      divObj.style.display = "block";
   }
}

</script>
</body>
</html>