test-apps/test.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4  <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
   5  <link rel="stylesheet" type="text/css" href="test.css"/>
   6  <script type='text/javascript' src="/lws-common.js"></script>
   7  <script type='text/javascript' src='test.js'></script>
   8  <title>Minimal Websocket test app</title>
   9 </head>
  10
  11 <body>
  12 <header></header>
  13 <article>
  14
  15 <table><tr><td>
  16
  17 <table width=600px>
  18  <tr>
  19   <td valign=middle align=center>
  20    <a href="https://libwebsockets.org">
  21     <img src="libwebsockets.org-logo.svg"></a></td><td>
  22         <section class="browser">
  23         <div id=brow>...</div></section>
  24   </td>
  25   <td width="64" height="64" id="wstransport"></td>
  26   <td width="64" height="64" id="transport"></td>
  27  </tr>
  28
  29 </table>
  30 </td></tr>
  31 <tr><td colspan=2 align=center>
  32 Click <a href="leaf.jpg" target="_blank">Here</a> to
  33 have the test server send a big picture by http.
  34 </td></tr>
  35 <tr><td colspan=2>
  36 <div class="tabs">
  37
  38    <div class="tab">
  39        <input type="radio" id="tab-1" name="tab-group-1" checked>
  40        <label for="tab-1">Dumb Increment Demo</label>
  41
  42        <div class="content">
  43         <div id="dumb" class="group2">
  44          <table>
  45           <tr>
  46            <td id=wsdi_statustd align=center class="wsstatus">
  47              <span id=wsdi_status>Websocket connection not initialized
  48                 </span></td>
  49            <td><span class="title">dumb increment-protocol</span></td>
  50            </tr>
  51            <tr>
  52            <td class="explain" colspan=2>
  53 The incrementing number is coming from the server at 20Hz and is individual for
  54 each connection to the server... try opening a second browser window.
  55 <br/><br/>
  56 The button sends a message over the websocket link to ask the server
  57 to zero just this connection's number.
  58            </td>
  59           </tr>
  60            <tr>
  61             <td align=center><div id=number class="bigger"> </div></td>
  62             <td align=center>
  63              <input type=button id=offset value="Reset counter">
  64              <input type=button id=junk value="Send junk">
  65             </td>
  66             </tr>
  67          </table>
  68         </div>
  69        </div>
  70    </div>
  71
  72    <div class="tab">
  73     <input type="radio" id="tab-2" name="tab-group-1">
  74     <label for="tab-2">Mirror Demo</label>
  75
  76     <div class="content">
  77      <div id="mirror" class="group2">
  78       <table>
  79        <tr>
  80          <td colspan=1 id=wslm_statustd align=center class="wsstatus">
  81          <span id=wslm_status>Websocket connection not initialized</span>
  82         </td>
  83         <td>
  84          <span class="title">lws-mirror-protocol</span>
  85         </td>
  86        </tr>
  87        <tr>
  88        <td colspan=2>
  89          <div class="explain">
  90 Use the mouse to draw on the canvas below -- all other browser windows open
  91 on this page see your drawing in realtime and you can see any of theirs as
  92 well.
  93 <br/><br/>
  94 The lws-mirror protocol doesn't interpret what is being sent to it, it just
  95 re-sends it to every other websocket it has a connection with using that
  96 protocol, including the guy who sent the packet.
  97 <br/><br/>
  98 <b>libwebsockets-test-client</b> joins in by spamming circles on to this
  99 shared canvas when run.
 100          </div>
 101         </td>
 102        </tr>
 103        <tr>
 104         <td colspan=2>Drawing color:
 105           <select id="color">
 106                 <option value=#000000>Black</option>
 107                 <option value=#0000ff>Blue</option>
 108                 <option value=#20ff20>Green</option>
 109                 <option value=#802020>Dark Red</option>
 110           </select>
 111        </tr>
 112        <tr>
 113          <td colspan=2 width=500 height=320>
 114                 <div id="wslm_drawing" class="bgw"></div>
 115         </td>
 116        </tr>
 117       </table>
 118      </div>
 119     </div>
 120    </div>
 121
 122     <div class="tab">
 123        <input type="radio" id="tab-3" name="tab-group-1">
 124        <label for="tab-3">Close Testing</label>
 125
 126        <div class="content">
 127 <div id="ot" class="group2">
 128       <table>
 129        <tr>
 130         <td>
 131
 132                 </td></tr>
 133                 <tr><td id=ot_statustd align=center class="wsstatus">
 134                  <span id=ot_status>Websocket connection not initialized</span>
 135                 </td>
 136                 <td colspan=2><span class="title">Open and close testing
 137                                 </span></td>
 138                 </tr>
 139                 <tr>
 140 <td class="explain" colspan=3 >
 141 To help with open and close testing, you can open and close a connection by
 142 hand using the buttons.<br>
 143  "<b>Close</b>" closes the connection from the browser with code 3000
 144   and reason 'Bye!".<br>
 145  "<b>Request Server Close</b>" sends a message asking the server to
 146 initiate the close, which it does with code 1001 and reason "Seeya".
 147 </td></tr>
 148         <tr>
 149         <td align=center>
 150           <input type="button" id="ot_open_btn" value="Open"></td>
 151         <td align=center>
 152           <input type="button" id="ot_close_btn" disabled value="Close" ></td>
 153         <td align=center>
 154           <input type="button" id="ot_req_close_btn" disabled
 155                  value="Request Server Close" ></td>
 156         </tr>
 157
 158 </table>
 159
 160 </div>
 161        </div>
 162    </div>
 163
 164     <div class="tab">
 165        <input type="radio" id="tab-4" name="tab-group-1">
 166        <label for="tab-4">Server info</label>
 167
 168        <div class="content">
 169 <div id="ot" class="group2">
 170       <table>
 171        <tr>
 172         <td id=s_statustd align=center class="wsstatus">
 173          <div id=s_status>Websocket connection not initialized</div>
 174         </td>
 175                 <td colspan=1>
 176         <span class="title">Server Info</span>
 177                 <input type=button id=pmd value="Test pmd">
 178
 179         </td>
 180         </tr><tr>
 181 <td class="explain" colspan=2>
 182 This information is sent by the server over a ws[s] link and updated live
 183 whenever the information changes server-side.
 184 </td></tr>
 185         <tr>
 186         <td align=center colspan=2><div id=servinfo></div></td>
 187         </tr>
 188         <tr>
 189         <td align=center colspan=2><div id=conninfo class="conninfo"></div></td>
 190         </tr>
 191 </table>
 192 </div>
 193        </div>
 194    </div>
 195
 196     <div class="tab">
 197        <input type="radio" id="tab-5" name="tab-group-1">
 198        <label for="tab-5">POST</label>
 199
 200        <div class="content">
 201 <div id="ot" class="group2">
 202       <table width=100%>
 203        <tr>
 204                 <td colspan=1>
 205 <span class="title">POST Form testing</span>
 206         </td>
 207         </tr><tr>
 208 <td class="explain" colspan=2>
 209 This tests POST handling in lws.
 210 </td></tr>
 211         <tr>
 212         <td align=center colspan=2 class=tdform><div id=postinfo>
 213         FORM 1: send with urlencoded POST body args<br>
 214         <form action="formtest" method="post">
 215  <span class="f12">Some text: </span>
 216   <input type="text" name="text" value="Give me some text"><br>
 217   <input type="submit" name="send" value="Send the form">
 218         </form>
 219         </div></td>
 220         </tr>
 221
 222
 223         <tr>
 224         <td align=center colspan=2 class=tdform><div id=postinfo >
 225         FORM 2: send with multipart/form-data<br>
 226         (can handle file upload, test limited to 100KB)<br>
 227         <form name=multipart action="formtest" method="post"
 228               enctype="multipart/form-data">
 229   <span class="f12">Some text: </span>
 230   <input type="text" name="text" value="Give me some text">
 231 <br>
 232   <input type="file" name="file" id="file" size="20">&nbsp;
 233    <span id=file_info class="f12"></span><br>
 234     <input type="submit" id="upload" name="upload" disabled=1 value="Upload">
 235         </form>
 236         </div></td>
 237         </tr>
 238
 239 </table>
 240 </div>
 241        </div>
 242    </div>
 243
 244 </div>
 245 </td></tr></table>
 246
 247 Looking for support?
 248 <a href="https://libwebsockets.org">https://libwebsockets.org</a>,
 249 <a href="https://github.com/warmcat/libwebsockets">
 250         https://github.com/warmcat/libwebsockets</a></a><br/>
 251 Join the mailing list:
 252 <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">
 253         https://libwebsockets.org/mailman/listinfo/libwebsockets</a>
 254
 255 </article>
 256
 257 </body>
 258 </html>