81 lines
1.8 KiB
HTML
81 lines
1.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
# WebSockets Chat App
|
||
|
|
<div id="chat-log">
|
||
|
|
|
||
|
|
<input type="text" id="message">
|
||
|
|
<button id="disconnect">Disconnect</button>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$( document ).ready(function() {
|
||
|
|
console.log( "ready!" );
|
||
|
|
});
|
||
|
|
// where our WebSockets logic will go later
|
||
|
|
var socket, host;
|
||
|
|
host = "ws://77.253.200.27:3301";
|
||
|
|
|
||
|
|
function connect() {
|
||
|
|
try {
|
||
|
|
socket = new WebSocket(host);
|
||
|
|
|
||
|
|
addMessage("Socket State: " + socket.readyState);
|
||
|
|
|
||
|
|
socket.onopen = function() {
|
||
|
|
addMessage("Socket Status: " + socket.readyState + " (open)");
|
||
|
|
}
|
||
|
|
|
||
|
|
socket.onclose = function() {
|
||
|
|
addMessage("Socket Status: " + socket.readyState + " (closed)");
|
||
|
|
}
|
||
|
|
|
||
|
|
socket.onmessage = function(msg) {
|
||
|
|
console.log(msg.data);
|
||
|
|
addMessage("Received: " + msg.data);
|
||
|
|
}
|
||
|
|
} catch(exception) {
|
||
|
|
addMessage("Error: " + exception);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function addMessage(msg) {
|
||
|
|
$("#chat-log").append("<p>" + msg + "</p>");
|
||
|
|
}
|
||
|
|
|
||
|
|
function send() {
|
||
|
|
var text = $("#message").val();
|
||
|
|
if (text == '') {
|
||
|
|
addMessage("Please Enter a Message");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
socket.send(text);
|
||
|
|
addMessage("Sent: " + text)
|
||
|
|
} catch(exception) {
|
||
|
|
addMessage("Failed To Send")
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#message").val('');
|
||
|
|
}
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
connect();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#message').keypress(function(event) {
|
||
|
|
if (event.keyCode == '13') { send(); }
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#disconnect").click(function() {
|
||
|
|
socket.close()
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|