mirror of
https://github.com/XRPLF/rippled.git
synced 2025-11-20 19:15:54 +00:00
177 lines
3.6 KiB
HTML
177 lines
3.6 KiB
HTML
<!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> |