moonbridge
diff example_chat.html @ 121:4997e742c81c
Added multiuser chat to example
author | bsw |
---|---|
date | Sat Apr 11 00:10:45 2015 +0200 (2015-04-11) |
parents | |
children |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/example_chat.html Sat Apr 11 00:10:45 2015 +0200 1.3 @@ -0,0 +1,134 @@ 1.4 +<html lang="en"> 1.5 + <head> 1.6 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 1.7 + <link href="example_webpage.css" rel="stylesheet" type="text/css"> 1.8 + <title>Moonbridge Network Server for Lua Applications – Example Application</title> 1.9 + </head> 1.10 + <body> 1.11 + <h1>Moonbridge Network Server for Lua – Example Application</h1> 1.12 + <h2>Multiuser chat</h2> 1.13 + <div id="status">Connecting to server...</div> 1.14 + <div id="chat"> 1.15 + </div> 1.16 + <form action="#" onsubmit="chatSend(); return false;"> 1.17 + Message: <textarea id="msg" name="message" cols="80" rows="3"></textarea><br /> 1.18 + Name: <input type="text" name="name" id="name"> 1.19 + <input type="submit"> 1.20 + Current server time: <span id="time">...</span> 1.21 + </form> 1.22 + 1.23 + <script> 1.24 + 1.25 + function xmlhttprpc() { 1.26 + var req; 1.27 + try { 1.28 + req = new XMLHttpRequest(); 1.29 + } catch(e) { try { 1.30 + req = new ActiveXObject("Microsoft.XMLHTTP"); 1.31 + } catch(e) { try { 1.32 + req = new ActiveXObject("Msxml2.XMLHTTP"); 1.33 + } catch(e) { } } } 1.34 + 1.35 + return req; 1.36 + } 1.37 + 1.38 + var chatName; 1.39 + var chatSession; 1.40 + 1.41 + function chatPrint(name, msg) { 1.42 + var chatEl = document.getElementById("chat"); 1.43 + var el = document.createElement("div"); 1.44 + el.className = "line"; 1.45 + var nameEl = document.createElement("span"); 1.46 + nameEl.className = "name"; 1.47 + var msgEl = document.createElement("span"); 1.48 + msgEl.className = "msg"; 1.49 + nameEl.innerHTML = name; 1.50 + msgEl.innerHTML = msg; 1.51 + el.appendChild(nameEl); 1.52 + el.appendChild(msgEl); 1.53 + chatEl.appendChild(el); 1.54 + } 1.55 + 1.56 + function chatSetSession(session) { 1.57 + chatSession = session; 1.58 + document.getElementById("status").innerHTML = "connected"; 1.59 + document.getElementById("msg").focus(); 1.60 + } 1.61 + 1.62 + function chatSetName(name) { 1.63 + var nameEl = document.getElementById("name"); 1.64 + nameEl.value = name; 1.65 + chatName = name; 1.66 + document.getElementById("msg").focus(); 1.67 + } 1.68 + 1.69 + function chatSetTime(time) { 1.70 + var timeEl = document.getElementById("time"); 1.71 + timeEl.innerHTML = time; 1.72 + } 1.73 + 1.74 + function chatSend() { 1.75 + var req = xmlhttprpc(); 1.76 + req.open('POST', 'chat_send', true); 1.77 + req.onreadystatechange = function() { console.log(req.responseText);}; 1.78 + var name = document.getElementById("name").value; 1.79 + var msg = document.getElementById("msg").value; 1.80 + var datagram = "SESSION:" + chatSession + "\n" 1.81 + if (name != chatName) { 1.82 + datagram += "NAME:" + name + "\n"; 1.83 + } 1.84 + datagram += "MSG:" + msg.replace(/\n/g, "<br />") + "\n"; 1.85 + req.send(datagram); 1.86 + document.getElementById("msg").value = ""; 1.87 + } 1.88 + 1.89 + function chat() { 1.90 + 1.91 + document.getElementById("msg").focus(); 1.92 + 1.93 + var req = xmlhttprpc(); 1.94 + req.open('GET', 'chat', true); 1.95 + 1.96 + var processedChars = 0; 1.97 + 1.98 + req.onreadystatechange = function () { 1.99 + 1.100 + if (req.readyState == 3 || req.readyStateChange == 4) { 1.101 + var re = new RegExp("([^\r\n]+)\r?\n", "g") 1.102 + var unprocessedResponseText = req.responseText.substring(processedChars); 1.103 + while ((line = re.exec(unprocessedResponseText)) !== null) { 1.104 + var line = line[1]; 1.105 + processedChars += line.length + 1; 1.106 + var parts = line.split(":"); 1.107 + var command = parts[0]; 1.108 + var arg = parts.slice(1).join(':'); 1.109 + if (command == "MULTIUSERCHAT") { 1.110 + } else if (command == "SESSION") { 1.111 + chatSetSession(arg); 1.112 + } else if (command == "NAME") { 1.113 + chatSetName(arg); 1.114 + } else if (command == "TIME") { 1.115 + chatSetTime(arg); 1.116 + } else if (command == "MSG") { 1.117 + var parts = arg.split(" "); 1.118 + var from = parts[0]; 1.119 + var msg = parts.slice(1).join(" "); 1.120 + chatPrint(from, msg); 1.121 + } else { 1.122 + chatPrint("SERVER" + arg) 1.123 + } 1.124 + } 1.125 + } 1.126 + 1.127 + 1.128 + } 1.129 + req.send(); 1.130 + } 1.131 + 1.132 + chat(); 1.133 + 1.134 + </script> 1.135 + 1.136 + </body> 1.137 +</html>