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 &ndash; Example Application</title>
     1.9 +  </head>
    1.10 +  <body>
    1.11 +    <h1>Moonbridge Network Server for Lua &ndash; 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>

Impressum / About Us