moonbridge
annotate example_chat.html @ 144:e7fac0918f9c
Added new methods drain_call, drain_yield
author | jbe |
---|---|
date | Sat May 02 14:31:55 2015 +0200 (2015-05-02) |
parents | 4997e742c81c |
children |
rev | line source |
---|---|
bsw@121 | 1 <html lang="en"> |
bsw@121 | 2 <head> |
bsw@121 | 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
bsw@121 | 4 <link href="example_webpage.css" rel="stylesheet" type="text/css"> |
bsw@121 | 5 <title>Moonbridge Network Server for Lua Applications – Example Application</title> |
bsw@121 | 6 </head> |
bsw@121 | 7 <body> |
bsw@121 | 8 <h1>Moonbridge Network Server for Lua – Example Application</h1> |
bsw@121 | 9 <h2>Multiuser chat</h2> |
bsw@121 | 10 <div id="status">Connecting to server...</div> |
bsw@121 | 11 <div id="chat"> |
bsw@121 | 12 </div> |
bsw@121 | 13 <form action="#" onsubmit="chatSend(); return false;"> |
bsw@121 | 14 Message: <textarea id="msg" name="message" cols="80" rows="3"></textarea><br /> |
bsw@121 | 15 Name: <input type="text" name="name" id="name"> |
bsw@121 | 16 <input type="submit"> |
bsw@121 | 17 Current server time: <span id="time">...</span> |
bsw@121 | 18 </form> |
bsw@121 | 19 |
bsw@121 | 20 <script> |
bsw@121 | 21 |
bsw@121 | 22 function xmlhttprpc() { |
bsw@121 | 23 var req; |
bsw@121 | 24 try { |
bsw@121 | 25 req = new XMLHttpRequest(); |
bsw@121 | 26 } catch(e) { try { |
bsw@121 | 27 req = new ActiveXObject("Microsoft.XMLHTTP"); |
bsw@121 | 28 } catch(e) { try { |
bsw@121 | 29 req = new ActiveXObject("Msxml2.XMLHTTP"); |
bsw@121 | 30 } catch(e) { } } } |
bsw@121 | 31 |
bsw@121 | 32 return req; |
bsw@121 | 33 } |
bsw@121 | 34 |
bsw@121 | 35 var chatName; |
bsw@121 | 36 var chatSession; |
bsw@121 | 37 |
bsw@121 | 38 function chatPrint(name, msg) { |
bsw@121 | 39 var chatEl = document.getElementById("chat"); |
bsw@121 | 40 var el = document.createElement("div"); |
bsw@121 | 41 el.className = "line"; |
bsw@121 | 42 var nameEl = document.createElement("span"); |
bsw@121 | 43 nameEl.className = "name"; |
bsw@121 | 44 var msgEl = document.createElement("span"); |
bsw@121 | 45 msgEl.className = "msg"; |
bsw@121 | 46 nameEl.innerHTML = name; |
bsw@121 | 47 msgEl.innerHTML = msg; |
bsw@121 | 48 el.appendChild(nameEl); |
bsw@121 | 49 el.appendChild(msgEl); |
bsw@121 | 50 chatEl.appendChild(el); |
bsw@121 | 51 } |
bsw@121 | 52 |
bsw@121 | 53 function chatSetSession(session) { |
bsw@121 | 54 chatSession = session; |
bsw@121 | 55 document.getElementById("status").innerHTML = "connected"; |
bsw@121 | 56 document.getElementById("msg").focus(); |
bsw@121 | 57 } |
bsw@121 | 58 |
bsw@121 | 59 function chatSetName(name) { |
bsw@121 | 60 var nameEl = document.getElementById("name"); |
bsw@121 | 61 nameEl.value = name; |
bsw@121 | 62 chatName = name; |
bsw@121 | 63 document.getElementById("msg").focus(); |
bsw@121 | 64 } |
bsw@121 | 65 |
bsw@121 | 66 function chatSetTime(time) { |
bsw@121 | 67 var timeEl = document.getElementById("time"); |
bsw@121 | 68 timeEl.innerHTML = time; |
bsw@121 | 69 } |
bsw@121 | 70 |
bsw@121 | 71 function chatSend() { |
bsw@121 | 72 var req = xmlhttprpc(); |
bsw@121 | 73 req.open('POST', 'chat_send', true); |
bsw@121 | 74 req.onreadystatechange = function() { console.log(req.responseText);}; |
bsw@121 | 75 var name = document.getElementById("name").value; |
bsw@121 | 76 var msg = document.getElementById("msg").value; |
bsw@121 | 77 var datagram = "SESSION:" + chatSession + "\n" |
bsw@121 | 78 if (name != chatName) { |
bsw@121 | 79 datagram += "NAME:" + name + "\n"; |
bsw@121 | 80 } |
bsw@121 | 81 datagram += "MSG:" + msg.replace(/\n/g, "<br />") + "\n"; |
bsw@121 | 82 req.send(datagram); |
bsw@121 | 83 document.getElementById("msg").value = ""; |
bsw@121 | 84 } |
bsw@121 | 85 |
bsw@121 | 86 function chat() { |
bsw@121 | 87 |
bsw@121 | 88 document.getElementById("msg").focus(); |
bsw@121 | 89 |
bsw@121 | 90 var req = xmlhttprpc(); |
bsw@121 | 91 req.open('GET', 'chat', true); |
bsw@121 | 92 |
bsw@121 | 93 var processedChars = 0; |
bsw@121 | 94 |
bsw@121 | 95 req.onreadystatechange = function () { |
bsw@121 | 96 |
bsw@121 | 97 if (req.readyState == 3 || req.readyStateChange == 4) { |
bsw@121 | 98 var re = new RegExp("([^\r\n]+)\r?\n", "g") |
bsw@121 | 99 var unprocessedResponseText = req.responseText.substring(processedChars); |
bsw@121 | 100 while ((line = re.exec(unprocessedResponseText)) !== null) { |
bsw@121 | 101 var line = line[1]; |
bsw@121 | 102 processedChars += line.length + 1; |
bsw@121 | 103 var parts = line.split(":"); |
bsw@121 | 104 var command = parts[0]; |
bsw@121 | 105 var arg = parts.slice(1).join(':'); |
bsw@121 | 106 if (command == "MULTIUSERCHAT") { |
bsw@121 | 107 } else if (command == "SESSION") { |
bsw@121 | 108 chatSetSession(arg); |
bsw@121 | 109 } else if (command == "NAME") { |
bsw@121 | 110 chatSetName(arg); |
bsw@121 | 111 } else if (command == "TIME") { |
bsw@121 | 112 chatSetTime(arg); |
bsw@121 | 113 } else if (command == "MSG") { |
bsw@121 | 114 var parts = arg.split(" "); |
bsw@121 | 115 var from = parts[0]; |
bsw@121 | 116 var msg = parts.slice(1).join(" "); |
bsw@121 | 117 chatPrint(from, msg); |
bsw@121 | 118 } else { |
bsw@121 | 119 chatPrint("SERVER" + arg) |
bsw@121 | 120 } |
bsw@121 | 121 } |
bsw@121 | 122 } |
bsw@121 | 123 |
bsw@121 | 124 |
bsw@121 | 125 } |
bsw@121 | 126 req.send(); |
bsw@121 | 127 } |
bsw@121 | 128 |
bsw@121 | 129 chat(); |
bsw@121 | 130 |
bsw@121 | 131 </script> |
bsw@121 | 132 |
bsw@121 | 133 </body> |
bsw@121 | 134 </html> |