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