123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- table { border: 0 }
- .commslog-data { font-family: Consolas, Courier New, Courier, monospace; }
- .commslog-server { background-color: red; color: white }
- .commslog-client { background-color: green; color: white }
- </style>
- </head>
- <body>
- <h1>WebSocket Sample Application</h1>
- <p id="stateLabel">Ready to connect...</p>
- <div>
- <label for="connectionUrl">WebSocket Server URL:</label>
- <input id="connectionUrl" />
- <button id="connectButton" type="submit">Connect</button>
- </div>
- <p></p>
- <div>
- <label for="sendMessage">Message to send:</label>
- <input id="sendMessage" disabled />
- <button id="sendButton" type="submit" disabled>Send</button>
- <button id="closeButton" disabled>Close Socket</button>
- </div>
- <h2>Communication Log</h2>
- <table style="width: 800px">
- <thead>
- <tr>
- <td style="width: 100px">From</td>
- <td style="width: 100px">To</td>
- <td>Data</td>
- </tr>
- </thead>
- <tbody id="commsLog">
- </tbody>
- </table>
- <script>
- var connectionUrl = document.getElementById("connectionUrl");
- var connectButton = document.getElementById("connectButton");
- var stateLabel = document.getElementById("stateLabel");
- var sendMessage = document.getElementById("sendMessage");
- var sendButton = document.getElementById("sendButton");
- var commsLog = document.getElementById("commsLog");
- var closeButton = document.getElementById("closeButton");
- var socket;
- var scheme = document.location.protocol === "https:" ? "wss" : "ws";
- var port = document.location.port ? (":" + document.location.port) : "";
- connectionUrl.value = scheme + "://game.bubblesocket"
- function updateState() {
- function disable() {
- sendMessage.disabled = true;
- sendButton.disabled = true;
- closeButton.disabled = true;
- }
- function enable() {
- sendMessage.disabled = false;
- sendButton.disabled = false;
- closeButton.disabled = false;
- }
- connectionUrl.disabled = true;
- connectButton.disabled = true;
- if (!socket) {
- disable();
- } else {
- switch (socket.readyState) {
- case WebSocket.CLOSED:
- stateLabel.innerHTML = "Closed";
- disable();
- connectionUrl.disabled = false;
- connectButton.disabled = false;
- break;
- case WebSocket.CLOSING:
- stateLabel.innerHTML = "Closing...";
- disable();
- break;
- case WebSocket.CONNECTING:
- stateLabel.innerHTML = "Connecting...";
- disable();
- break;
- case WebSocket.OPEN:
- stateLabel.innerHTML = "Open";
- enable();
- break;
- default:
- stateLabel.innerHTML = "Unknown WebSocket State: " + htmlEscape(socket.readyState);
- disable();
- break;
- }
- }
- }
- closeButton.onclick = function () {
- if (!socket || socket.readyState !== WebSocket.OPEN) {
- alert("socket not connected");
- }
- socket.close(1000, "Closing from client");
- };
- sendButton.onclick = function () {
- if (!socket || socket.readyState !== WebSocket.OPEN) {
- alert("socket not connected");
- }
- var data = sendMessage.value;
- socket.send(data);
- commsLog.innerHTML += '<tr>' +
- '<td class="commslog-client">Client</td>' +
- '<td class="commslog-server">Server</td>' +
- '<td class="commslog-data">' + htmlEscape(data) + '</td></tr>';
- };
- connectButton.onclick = function() {
- stateLabel.innerHTML = "Connecting";
- socket = new WebSocket(connectionUrl.value);
- socket.onopen = function (event) {
- updateState();
- commsLog.innerHTML += '<tr>' +
- '<td colspan="3" class="commslog-data">Connection opened</td>' +
- '</tr>';
- };
- socket.onclose = function (event) {
- updateState();
- commsLog.innerHTML += '<tr>' +
- '<td colspan="3" class="commslog-data">Connection closed. Code: ' + htmlEscape(event.code) + '. Reason: ' + htmlEscape(event.reason) + '</td>' +
- '</tr>';
- };
- socket.onerror = updateState;
- socket.onmessage = function (event) {
- event.data.text().then((textData) => {
- commsLog.innerHTML += '<tr>' +
- '<td class="commslog-server">Server</td>' +
- '<td class="commslog-client">Client</td>' +
- '<td class="commslog-data">' + htmlEscape(textData) + '</td></tr>';
- })
- };
- };
- function htmlEscape(str) {
- console.log(str)
- return str.toString()
- .replace(/&/g, '&')
- .replace(/"/g, '"')
- .replace(/'/g, ''')
- .replace(/</g, '<')
- .replace(/>/g, '>');
- }
- </script>
- </body>
- </html>
|