60 lines
2.0 KiB
HTML
60 lines
2.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head> <!-- Please copy the following files into here: -->
|
||
|
|
<script src="./Long.min.js"></script> <!-- https://raw.github.com/dcodeIO/Long.js/master/dist/Long.min.js -->
|
||
|
|
<script src="./ByteBufferAB.min.js"></script> <!-- https://raw.github.com/dcodeIO/ByteBuffer.js/master/dist/ByteBufferAB.min.js -->
|
||
|
|
<script src="./ProtoBuf.min.js"></script> <!-- https://raw.github.com/dcodeIO/ProtoBuf.js/master/dist/ProtoBuf.min.js -->
|
||
|
|
<script>
|
||
|
|
if (typeof dcodeIO === 'undefined' || !dcodeIO.ProtoBuf) {
|
||
|
|
throw(new Error("ProtoBuf.js is not present. Please see www/index.html for manual setup instructions."));
|
||
|
|
}
|
||
|
|
// Initialize ProtoBuf.js
|
||
|
|
var ProtoBuf = dcodeIO.ProtoBuf;
|
||
|
|
var Message = ProtoBuf.loadProtoFile("./example.proto").build("Message");
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<textarea id="log" style="width: 100%; height: 200px"></textarea><br />
|
||
|
|
<input type="text" id="text" value="hello world!" /> <button onclick="send()">Send</button>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var log = document.getElementById("log");
|
||
|
|
var text = document.getElementById("text");
|
||
|
|
|
||
|
|
// Connect to our server: node server.js
|
||
|
|
var socket = new WebSocket("ws://localhost:8080/ws");
|
||
|
|
socket.binaryType = "arraybuffer"; // We are talking binary
|
||
|
|
|
||
|
|
function send() {
|
||
|
|
if (socket.readyState == WebSocket.OPEN) {
|
||
|
|
var msg = new Message(text.value);
|
||
|
|
socket.send(msg.toArrayBuffer());
|
||
|
|
log.value += "Sent: "+msg.text+"\n";
|
||
|
|
} else {
|
||
|
|
log.value += "Not connected\n";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
socket.onopen = function() {
|
||
|
|
log.value += "Connected\n";
|
||
|
|
};
|
||
|
|
|
||
|
|
socket.onclose = function() {
|
||
|
|
log.value += "Disconnected\n";
|
||
|
|
};
|
||
|
|
|
||
|
|
socket.onmessage = function(evt) {
|
||
|
|
try {
|
||
|
|
// Decode the Message
|
||
|
|
var msg = Message.decode(evt.data);
|
||
|
|
log.value += "Received: "+msg.text+"\n";
|
||
|
|
} catch (err) {
|
||
|
|
log.value += "Error: "+err+"\n";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
log.value = ""; // Clear log on reload
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|