| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset=utf-8 http-equiv="Content-Language" content="en"/> |
| <script src="/lws-common.js"></script> |
| <title>Minimal Websocket test app</title> |
| <style type="text/css"> |
| span.title { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; } |
| .browser { font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#ffff00; vertical-align:middle; text-align:center; background:#d0b070; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;} |
| .group2 { vertical-align:middle; |
| text-align:center; |
| background:#f0f0e0; |
| padding:12px; |
| -webkit-border-radius:10px; |
| -moz-border-radius:10px; |
| border-radius:10px; } |
| .explain { vertical-align:middle; |
| text-align:center; |
| background:#f0f0c0; padding:12px; |
| -webkit-border-radius:10px; |
| -moz-border-radius:10px; |
| border-radius:10px; |
| color:#404000; } |
| td.wsstatus { vertical-align:middle; width:200px; height:50px; |
| text-align:center; |
| background:#f0f0c0; padding:6px; |
| -webkit-border-radius:8px; |
| -moz-border-radius:8px; |
| border-radius:8px; |
| color:#404000; } |
| .tdform { vertical-align:middle; width:200px; height:50px; |
| text-align:center; |
| background:#f0f0d0; padding:6px; |
| -webkit-border-radius:8px; |
| -moz-border-radius:8px; margin:10px; |
| border-radius:8px; |
| border: 1px solid black; |
| border-collapse: collapse;font-size:18pt; font: Arial; font-weight:normal; text-align:center; color:#000000; |
| color:#404000; } |
| |
| td.l { vertical-align:middle; |
| text-align:center; |
| background:#d0d0b0; |
| padding:3px; |
| -webkit-border-radius:3px; |
| -moz-border-radius:3px; |
| border-radius:3px; } |
| .content { vertical-align:top; text-align:center; background:#fffff0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } |
| .canvas { vertical-align:top; text-align:center; background:#efefd0; padding:12px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } |
| .tabs { |
| position: relative; |
| min-height: 750px; /* This part sucks */ |
| clear: both; |
| margin: 25px 0; |
| } |
| .tab { |
| float: left; |
| } |
| .tab label { |
| background: #eee; |
| padding: 10px; |
| border: 1px solid #ccc; |
| margin-left: -1px; |
| position: relative; |
| left: 1px; |
| } |
| .tab [type=radio] { |
| display: none; |
| } |
| .content { |
| position: absolute; |
| top: 28px; |
| left: 0; |
| background: white; |
| right: 0; |
| bottom: 0; |
| padding: 20px; |
| border: 1px solid #ccc; |
| } |
| [type=radio]:checked ~ label { |
| background: white; |
| border-bottom: 1px solid white; |
| z-index: 2; |
| } |
| [type=radio]:checked ~ label ~ .content { |
| z-index: 1; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <header></header> |
| <article> |
| |
| <table><tr><td> |
| |
| <table width=600px> |
| <tr> |
| <td valign=middle align=center> |
| <a href="https://libwebsockets.org"> |
| <img src="libwebsockets.org-logo.png"></a></td><td> |
| <section class="browser">Detected Browser: |
| <div id=brow>...</div></section> |
| </td> |
| </tr> |
| |
| </table> |
| </td></tr> |
| <tr><td colspan=2 align=center> |
| Click <a href="leaf.jpg" target="_blank">Here</a> to |
| have the test server send a big picture by http. |
| </td></tr> |
| <tr><td colspan=2> |
| <div class="tabs"> |
| |
| <div class="tab"> |
| <input type="radio" id="tab-1" name="tab-group-1" checked> |
| <label for="tab-1">Dumb Increment Demo</label> |
| |
| <div class="content"> |
| <div id="dumb" class="group2"> |
| <table> |
| <tr> |
| <td id=wsdi_statustd align=center class="wsstatus"> |
| <span id=wsdi_status>Websocket connection not initialized</span></td> |
| <td><span class="title">dumb increment-protocol</span></td> |
| </tr> |
| <tr> |
| <td class="explain" colspan=2> |
| The incrementing number is coming from the server at 20Hz and is individual for |
| each connection to the server... try opening a second browser window. |
| <br/><br/> |
| The button sends a message over the websocket link to ask the server |
| to zero just this connection's number. |
| </td> |
| </tr> |
| <tr> |
| <td align=center><div id=number style="font-size:120%;"> </div></td> |
| <td align=center> |
| <input type=button id=offset value="Reset counter"> |
| <input type=button id=junk value="Send junk"> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab"> |
| <input type="radio" id="tab-2" name="tab-group-1"> |
| <label for="tab-2">Mirror Demo</label> |
| |
| <div class="content"> |
| <div id="mirror" class="group2"> |
| <table> |
| <tr> |
| <td colspan=1 id=wslm_statustd align=center class="wsstatus"> |
| <span id=wslm_status>Websocket connection not initialized</span> |
| </td> |
| <td> |
| <span class="title">lws-mirror-protocol</span> |
| </td> |
| </tr> |
| <tr> |
| <td colspan=2> |
| <div class="explain"> |
| Use the mouse to draw on the canvas below -- all other browser windows open |
| on this page see your drawing in realtime and you can see any of theirs as |
| well. |
| <br/><br/> |
| The lws-mirror protocol doesn't interpret what is being sent to it, it just |
| re-sends it to every other websocket it has a connection with using that |
| protocol, including the guy who sent the packet. |
| <br/><br/> |
| <b>libwebsockets-test-client</b> joins in by spamming circles on to this shared canvas when |
| run. |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td colspan=2>Drawing color: |
| <select id="color"> |
| <option value=#000000>Black</option> |
| <option value=#0000ff>Blue</option> |
| <option value=#20ff20>Green</option> |
| <option value=#802020>Dark Red</option> |
| </select> |
| </tr> |
| <tr> |
| <td colspan=2 width=500 height=320> |
| <div id="wslm_drawing" style="background:white"></div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab"> |
| <input type="radio" id="tab-3" name="tab-group-1"> |
| <label for="tab-3">Close Testing</label> |
| |
| <div class="content"> |
| <div id="ot" class="group2"> |
| <table> |
| <tr> |
| <td> |
| |
| </td></tr> |
| <tr><td id=ot_statustd align=center class="wsstatus"> |
| <span id=ot_status>Websocket connection not initialized</span> |
| </td> |
| <td colspan=2><span class="title">Open and close testing</span></td> |
| </tr> |
| <tr> |
| <td class="explain" colspan=3 style="padding:3"> |
| To help with open and close testing, you can open and close a connection by hand using |
| the buttons.<br> |
| "<b>Close</b>" closes the connection from the browser with code 3000 |
| and reason 'Bye!".<br> |
| "<b>Request Server Close</b>" sends a message asking the server to |
| initiate the close, which it does with code 1001 and reason "Seeya". |
| </td></tr> |
| <tr> |
| <td align=center><input type=button id=ot_open_btn value="Open"></td> |
| <td align=center><input type=button id=ot_close_btn disabled value="Close" ></td> |
| <td align=center><input type=button id=ot_req_close_btn disabled value="Request Server Close" ></td> |
| </tr> |
| |
| </table> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab"> |
| <input type="radio" id="tab-4" name="tab-group-1"> |
| <label for="tab-4">Server info</label> |
| |
| <div class="content"> |
| <div id="ot" class="group2"> |
| <table> |
| <tr> |
| <td id=s_statustd align=center class="wsstatus"> |
| <div id=s_status>Websocket connection not initialized</div> |
| </td> |
| <td colspan=1> |
| <span class="title">Server Info</span> |
| </td> |
| </tr><tr> |
| <td class="explain" colspan=2> |
| This information is sent by the server over a ws[s] link and updated live |
| whenever the information changes server-side. |
| </td></tr> |
| <tr> |
| <td align=center colspan=2><div id=servinfo></div></td> |
| </tr> |
| <tr> |
| <td align=center colspan=2><div id=conninfo style="border : solid 2px #e0d040; padding : 4px; width : 500px; height : 350px; overflow : auto; "></</div></td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab"> |
| <input type="radio" id="tab-5" name="tab-group-1"> |
| <label for="tab-5">POST</label> |
| |
| <div class="content"> |
| <div id="ot" class="group2"> |
| <table width=100%> |
| <tr> |
| <td colspan=1> |
| <span class="title">POST Form testing</span> |
| </td> |
| </tr><tr> |
| <td class="explain" colspan=2> |
| This tests POST handling in lws. |
| </td></tr> |
| <tr> |
| <td align=center colspan=2 class=tdform><div id=postinfo style=form> |
| FORM 1: send with urlencoded POST body args<br> |
| <form action="formtest" method="post"> |
| <span style="font-size:12pt;">Some text: </span> |
| <input type="text" name="text" value="Give me some text"><br> |
| <input type="submit" name="send" value="Send the form"> |
| </form> |
| </div></td> |
| </tr> |
| |
| <script nonce="lwscaro"> |
| function check_file() |
| { |
| var f = document.getElementById('file').files[0]; |
| var max_len = 100000; |
| var dis = 0; |
| |
| if (f) { |
| if (f.size >= max_len) { |
| dis = 1; |
| document.getElementById('file_info').innerHTML = |
| "<span style=\"color:red;font-weight:bold\">File larger than "+max_len+"</span>"; |
| } else |
| document.getElementById('file_info').innerHTML = |
| "File length "+f.size; |
| } else |
| dis = 1; |
| |
| document.getElementById('upload').disabled = dis; |
| } |
| </script> |
| |
| <tr> |
| <td align=center colspan=2 class=tdform><div id=postinfo style=form> |
| FORM 2: send with multipart/form-data<br> |
| (can handle file upload, test limited to 100KB)<br> |
| <form name=multipart action="formtest" method="post" enctype="multipart/form-data"> |
| <span style="font-size:12pt;">Some text: </span> |
| <input type="text" name="text" value="Give me some text"> |
| <br> |
| <input type="file" name="file" id="file" size="20"> <span id=file_info style="font-size:12pt;"></span><br> |
| <input type="submit" id="upload" name="upload" disabled=1 value="Upload"> |
| </form> |
| </div></td> |
| </tr> |
| |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </td></tr></table> |
| |
| Looking for support? <a href="https://libwebsockets.org">https://libwebsockets.org</a>, <a href="https://github.com/warmcat/libwebsockets">https://github.com/warmcat/libwebsockets</a></a><br/> |
| Join the mailing list: <a href="https://libwebsockets.org/mailman/listinfo/libwebsockets">https://libwebsockets.org/mailman/listinfo/libwebsockets</a> |
| |
| </article> |
| |
| <script nonce="lwscaro"> |
| |
| document.getElementById('file').onchange = check_file; |
| document.getElementById('offset').onclick = reset; |
| document.getElementById('junk').onclick = junk; |
| document.getElementById('color').onclick = update_color; |
| document.getElementById('ot_open_btn').onclick = ot_open; |
| document.getElementById('ot_close_btn').onclick = ot_close; |
| document.getElementById('ot_req_close_btn').onclick = ot_req_close; |
| |
| /* |
| * We display untrusted stuff in html context... reject anything |
| * that has HTML stuff in it |
| */ |
| |
| function san(s) |
| { |
| if (s.search("<") != -1) |
| return "invalid string"; |
| |
| return s; |
| } |
| |
| lws_gray_out(true,{'zindex':'499'}); |
| |
| /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */ |
| |
| var BrowserDetect = { |
| init: function () { |
| this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; |
| this.version = this.searchVersion(navigator.userAgent) |
| || this.searchVersion(navigator.appVersion) |
| || "an unknown version"; |
| this.OS = this.searchString(this.dataOS) || "an unknown OS"; |
| }, |
| searchString: function (data) { |
| for (var i=0;i<data.length;i++) { |
| var dataString = data[i].string; |
| var dataProp = data[i].prop; |
| this.versionSearchString = data[i].versionSearch || data[i].identity; |
| if (dataString) { |
| if (dataString.indexOf(data[i].subString) != -1) |
| return data[i].identity; |
| } |
| else if (dataProp) |
| return data[i].identity; |
| } |
| }, |
| searchVersion: function (dataString) { |
| var index = dataString.indexOf(this.versionSearchString); |
| if (index == -1) return; |
| return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); |
| }, |
| dataBrowser: [ |
| { |
| string: navigator.userAgent, |
| subString: "Chrome", |
| identity: "Chrome" |
| }, |
| { string: navigator.userAgent, |
| subString: "OmniWeb", |
| versionSearch: "OmniWeb/", |
| identity: "OmniWeb" |
| }, |
| { |
| string: navigator.vendor, |
| subString: "Apple", |
| identity: "Safari", |
| versionSearch: "Version" |
| }, |
| { |
| prop: window.opera, |
| identity: "Opera", |
| versionSearch: "Version" |
| }, |
| { |
| string: navigator.vendor, |
| subString: "iCab", |
| identity: "iCab" |
| }, |
| { |
| string: navigator.vendor, |
| subString: "KDE", |
| identity: "Konqueror" |
| }, |
| { |
| string: navigator.userAgent, |
| subString: "Firefox", |
| identity: "Firefox" |
| }, |
| { |
| string: navigator.vendor, |
| subString: "Camino", |
| identity: "Camino" |
| }, |
| { // for newer Netscapes (6+) |
| string: navigator.userAgent, |
| subString: "Netscape", |
| identity: "Netscape" |
| }, |
| { |
| string: navigator.userAgent, |
| subString: "MSIE", |
| identity: "Explorer", |
| versionSearch: "MSIE" |
| }, |
| { |
| string: navigator.userAgent, |
| subString: "Gecko", |
| identity: "Mozilla", |
| versionSearch: "rv" |
| }, |
| { // for older Netscapes (4-) |
| string: navigator.userAgent, |
| subString: "Mozilla", |
| identity: "Netscape", |
| versionSearch: "Mozilla" |
| } |
| ], |
| dataOS : [ |
| { |
| string: navigator.platform, |
| subString: "Win", |
| identity: "Windows" |
| }, |
| { |
| string: navigator.platform, |
| subString: "Mac", |
| identity: "Mac" |
| }, |
| { |
| string: navigator.userAgent, |
| subString: "iPhone", |
| identity: "iPhone/iPod" |
| }, |
| { |
| string: navigator.platform, |
| subString: "Linux", |
| identity: "Linux" |
| } |
| ] |
| |
| }; |
| BrowserDetect.init(); |
| |
| document.getElementById("brow").textContent = " " + BrowserDetect.browser + " " |
| + BrowserDetect.version +" " + BrowserDetect.OS +" "; |
| |
| var pos = 0; |
| |
| function get_appropriate_ws_url() |
| { |
| var pcol; |
| var u = document.URL; |
| |
| /* |
| * We open the websocket encrypted if this page came on an |
| * https:// url itself, otherwise unencrypted |
| */ |
| |
| if (u.substring(0, 5) == "https") { |
| pcol = "wss://"; |
| u = u.substr(8); |
| } else { |
| pcol = "ws://"; |
| if (u.substring(0, 4) == "http") |
| u = u.substr(7); |
| } |
| |
| u = u.split('/'); |
| |
| /* + "/xxx" bit is for IE10 workaround */ |
| |
| return pcol + u[0] + "/xxx"; |
| } |
| |
| |
| document.getElementById("number").textContent = get_appropriate_ws_url(); |
| |
| /* dumb increment protocol */ |
| |
| var socket_di; |
| |
| if (typeof MozWebSocket != "undefined") { |
| socket_di = new MozWebSocket(get_appropriate_ws_url(), |
| "dumb-increment-protocol"); |
| } else { |
| socket_di = new WebSocket(get_appropriate_ws_url(), |
| "dumb-increment-protocol"); |
| } |
| |
| |
| try { |
| socket_di.onopen = function() { |
| document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40"; |
| document.getElementById("wsdi_status").innerHTML = |
| " <b>websocket connection opened</b><br>" + |
| san(socket_di.extensions); |
| } |
| |
| socket_di.onmessage =function got_packet(msg) { |
| document.getElementById("number").textContent = msg.data + "\n"; |
| } |
| |
| socket_di.onclose = function(){ |
| document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040"; |
| document.getElementById("wsdi_status").textContent = " websocket connection CLOSED "; |
| } |
| } catch(exception) { |
| alert('<p>Error' + exception); |
| } |
| |
| var socket_status, jso, s; |
| |
| if (typeof MozWebSocket != "undefined") { |
| socket_status = new MozWebSocket(get_appropriate_ws_url(), |
| "lws-status"); |
| } else { |
| socket_status = new WebSocket(get_appropriate_ws_url(), |
| "lws-status"); |
| } |
| |
| |
| try { |
| socket_status.onopen = function() { |
| document.getElementById("s_statustd").style.backgroundColor = "#40ff40"; |
| document.getElementById("s_status").innerHTML = |
| " <b>websocket connection opened</b><br>" + |
| san(socket_status.extensions); |
| } |
| |
| socket_status.onmessage =function got_packet(msg) { |
| var s; |
| |
| jso = JSON.parse(msg.data); |
| |
| document.getElementById("servinfo").innerHTML = |
| "<table><tr><td class=l>Build info</td><td>"+ |
| san(jso.version) + "</td></tr>" + |
| "<tr><td class=l>Server info</td><td>" + |
| san(jso.hostname) + "</td></tr>" + |
| "</table>"; |
| s="<table>"; |
| var n; |
| for (n = 0; n < jso.conns.length; n++) { |
| var d = new Date(parseInt(jso.conns[n].time) * 1000); |
| |
| s = s + "<tr><td class=l>client " + (n + 1) + |
| "</td><td><b>" + san(jso.conns[n].peer) + |
| "</b><br>" + san(d.toString()) + |
| "<br>" + san(jso.conns[n].ua) + |
| "</td></tr>"; |
| } |
| s = s + "</table>"; |
| |
| document.getElementById("conninfo").innerHTML = s; |
| } |
| |
| socket_status.onclose = function(){ |
| document.getElementById("s_statustd").style.backgroundColor = "#ff4040"; |
| document.getElementById("s_status").textContent = " websocket connection CLOSED "; |
| } |
| } catch(exception) { |
| alert('<p>Error' + exception); |
| } |
| |
| function reset() { |
| socket_di.send("reset\n"); |
| } |
| |
| |
| function junk() { |
| for(var word = ''; word.length < 9000; word += 'a'){} |
| socket_di.send(word); |
| } |
| |
| var socket_ot; |
| |
| function ot_open() { |
| if (typeof MozWebSocket != "undefined") { |
| socket_ot = new MozWebSocket(get_appropriate_ws_url(), |
| "dumb-increment-protocol"); |
| } else { |
| socket_ot = new WebSocket(get_appropriate_ws_url(), |
| "dumb-increment-protocol"); |
| } |
| try { |
| socket_ot.onopen = function() { |
| document.getElementById("ot_statustd").style.backgroundColor = "#40ff40"; |
| document.getElementById("ot_status").innerHTML = " <b>websocket connection opened</b><br>" + san(socket_di.extensions); |
| document.getElementById("ot_open_btn").disabled = true; |
| document.getElementById("ot_close_btn").disabled = false; |
| document.getElementById("ot_req_close_btn").disabled = false; |
| } |
| |
| socket_ot.onclose = function(e){ |
| document.getElementById("ot_statustd").style.backgroundColor = "#ff4040"; |
| document.getElementById("ot_status").textContent = " websocket connection CLOSED, code: " + e.code + |
| ", reason: " + e.reason; |
| document.getElementById("ot_open_btn").disabled = false; |
| document.getElementById("ot_close_btn").disabled = true; |
| document.getElementById("ot_req_close_btn").disabled = true; |
| } |
| } catch(exception) { |
| alert('<p>Error' + exception); |
| } |
| } |
| |
| /* browser will close the ws in a controlled way */ |
| function ot_close() { |
| socket_ot.close(3000, "Bye!"); |
| } |
| |
| /* we ask the server to close the ws in a controlled way */ |
| function ot_req_close() { |
| socket_ot.send("closeme\n"); |
| } |
| |
| /* lws-mirror protocol */ |
| |
| var down = 0; |
| var no_last = 1; |
| var last_x = 0, last_y = 0; |
| var ctx; |
| var socket_lm; |
| var color = "#000000"; |
| |
| if (typeof MozWebSocket != "undefined") { |
| socket_lm = new MozWebSocket(get_appropriate_ws_url(), |
| "lws-mirror-protocol"); |
| } else { |
| socket_lm = new WebSocket(get_appropriate_ws_url(), |
| "lws-mirror-protocol"); |
| } |
| |
| |
| try { |
| socket_lm.onopen = function() { |
| document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40"; |
| document.getElementById("wslm_status").innerHTML = |
| " <b>websocket connection opened</b><br>" + |
| san(socket_lm.extensions); |
| lws_gray_out(false); |
| } |
| |
| socket_lm.onmessage =function got_packet(msg) { |
| j = msg.data.split(';'); |
| f = 0; |
| while (f < j.length - 1) { |
| i = j[f].split(' '); |
| if (i[0] == 'd') { |
| ctx.strokeStyle = i[1]; |
| ctx.beginPath(); |
| ctx.moveTo(+(i[2]), +(i[3])); |
| ctx.lineTo(+(i[4]), +(i[5])); |
| ctx.stroke(); |
| } |
| if (i[0] == 'c') { |
| ctx.strokeStyle = i[1]; |
| ctx.beginPath(); |
| ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true); |
| ctx.stroke(); |
| } |
| |
| f++; |
| } |
| } |
| |
| socket_lm.onclose = function(){ |
| document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040"; |
| document.getElementById("wslm_status").textContent = " websocket connection CLOSED "; |
| lws_gray_out(true,{'zindex':'499'}); |
| } |
| } catch(exception) { |
| alert('<p>Error' + exception); |
| } |
| |
| var canvas = document.createElement('canvas'); |
| canvas.height = 300; |
| canvas.width = 480; |
| ctx = canvas.getContext("2d"); |
| |
| document.getElementById('wslm_drawing').appendChild(canvas); |
| |
| canvas.addEventListener('mousemove', ev_mousemove, false); |
| canvas.addEventListener('mousedown', ev_mousedown, false); |
| canvas.addEventListener('mouseup', ev_mouseup, false); |
| |
| offsetX = offsetY = 0; |
| element = canvas; |
| if (element.offsetParent) { |
| do { |
| offsetX += element.offsetLeft; |
| offsetY += element.offsetTop; |
| } while ((element = element.offsetParent)); |
| } |
| |
| function update_color() { |
| color = document.getElementById("color").value; |
| } |
| |
| function ev_mousedown (ev) { |
| down = 1; |
| } |
| |
| function ev_mouseup(ev) { |
| down = 0; |
| no_last = 1; |
| } |
| |
| function ev_mousemove (ev) { |
| var x, y; |
| |
| if (ev.offsetX) { |
| x = ev.offsetX; |
| y = ev.offsetY; |
| } else { |
| x = ev.layerX - offsetX; |
| y = ev.layerY - offsetY; |
| |
| } |
| |
| if (!down) |
| return; |
| if (no_last) { |
| no_last = 0; |
| last_x = x; |
| last_y = y; |
| return; |
| } |
| socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';'); |
| |
| last_x = x; |
| last_y = y; |
| } |
| |
| |
| </script> |
| |
| </body> |
| </html> |