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