Squashed 'src/cpp/websocketpp/' content from commit 1ec36a4

git-subtree-dir: src/cpp/websocketpp git-subtree-split: 1ec36a47468a23f01754fa3a086874e13a4d52d9
2025-12-06 17:27:55 +00:00 · 2013-05-03 16:47:44 -07:00
commit b1e689fed3
255 changed files with 50215 additions and 0 deletions
--- a/examples/chat_client/chat_client.html
+++ b/examples/chat_client/chat_client.html
@@ -0,0 +1,177 @@
+<!doctype html>
+<html>
+<head>
+<script type="text/javascript" src="vendor/jquery-1.6.3.min.js"></script>
+</head>
+<body>
+
+<script type="text/javascript">
+var ws;
+var url;
+
+$(document).ready(init);
+
+function init() {
+    $(document).keypress(function(event) {
+        if ( event.which == 13 ) {
+            event.preventDefault();
+            send();
+        }
+    });
+}
+
+function connect() {
+    url = $("#server_url").val();
+    console.log(url);
+    
+    if ("WebSocket" in window) {
+        ws = new WebSocket(url);
+    } else if ("MozWebSocket" in window) {
+        ws = new MozWebSocket(url);
+    } else {
+        chat_message("This Browser does not support WebSockets");
+        return;
+    }
+    ws.onopen = function(e) {
+        chat_message("A connection to "+url+" has been opened.");
+        
+        $("#server_url").attr("disabled",true);
+        $("#toggle_connect").html("Disconnect");
+    };
+    
+    ws.onerror = function(e) {
+        chat_message("An error occured, see console log for more details.");
+        console.log(e);
+    };
+    
+    ws.onclose = function(e) {
+        chat_message("The connection to "+url+" was closed.");
+    };
+    
+    ws.onmessage = function(e) {
+        var message = JSON.parse(e.data);
+        
+        if (message.type == "msg") {
+            chat_message(message.value,message.sender);
+        } else if (message.type == "participants") {
+            var o = "<ul>";
+            for (var p in message.value) {
+                o += "<li>"+message.value[p]+"</li>";
+            }
+            o += "</ul>";
+            $("#participants").html(o);
+        }
+    };
+}
+
+function chat_message(message,sender) {
+    if (arguments.length == 1) {
+        sender = "";
+    }
+    
+    var style;
+    
+    if (sender == "") {
+        style = "client";
+    } else if (sender == "server") {
+        style = "server";
+        sender = "["+sender+"]";
+    } else {
+        style = "message";
+        sender = "["+sender+"]";
+    }
+    
+    $("#messages").append("<span class='"+style+"'><span class='sender'>"+sender+"</span> <span class='msg'>"+message+"</span></span><br />");
+    $("#messages").prop({ scrollTop: $("#messages").prop("scrollHeight")  });
+}
+
+function disconnect() {
+    ws.close();
+    $("#server_url").removeAttr("disabled");
+    $("#toggle_connect").html("Connect");
+    $("#participants").html("");
+}
+
+function toggle_connect() {
+    if ($("#server_url").attr("disabled") != "disabled") {
+        connect();
+    } else {
+        disconnect();
+    }
+}
+
+function send() {
+    if (ws === undefined || ws.readyState != 1) {
+        chat_message("Websocket is not avaliable for writing");
+        return;
+    }
+    
+    ws.send($("#msg").val());
+    $("#msg").val("");
+}
+
+
+
+
+</script>
+
+<style>
+body,html {
+    margin: 0px;
+    padding: 0px;
+    height: 100%;
+    background-color: #999;
+    font-family: sans-serif;
+    font-size: 14px;
+}
+
+h3 {
+
+}
+
+#controls {
+    padding: 4px;
+    float:right;
+    width: 300px;
+    
+}
+
+input {
+    width: 200px;
+}
+
+#messages {
+    height: 100%;
+    overflow: auto;
+    background-color: black;
+}
+
+#messages .client {
+    color: #ccc;
+}
+
+#messages .server {
+    color: yellow;
+}
+
+#messages .message {
+    color: white;
+}
+
+</style>
+
+<div id="controls">
+    <div id="server">
+    <input type="text" name="server_url" id="server_url" value="ws://thor-websocket.zaphoyd.net:9000/chat" />
+    <button id="toggle_connect" onclick="toggle_connect();">Connect</button>
+    </div>
+
+    <div id="message_input"><input type="text" name="msg" id="msg" value="Hello World!" />
+    <button onclick="send();">Send</button></div>
+    <h3>Chat Participants</h3>
+    <div id="participants"></div>
+</div>
+<div id="messages"></div>
+
+</body>
+</html>