moonbridge

annotate example_chat.html @ 123:20e0d4f51381

Updated chat example
author bsw
date Sat Apr 11 00:20:33 2015 +0200 (2015-04-11)
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 &ndash; Example Application</title>
bsw@121 6 </head>
bsw@121 7 <body>
bsw@121 8 <h1>Moonbridge Network Server for Lua &ndash; 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>

Impressum / About Us