- <!DOCTYPE HTML>
- <html lang="en-PH">
- <head>
- <meta charset="utf-8">
- <title>Websocket Client</title>
- <style>
- form {
- margin: 2em 0;
- }
-
- fieldset {
- display: contents;
- }
-
- legend {
- position: absolute;
- left: -999999px;
- }
-
- legend ~ div {
- margin: 0.5em 0;
- }
-
- legend ~ div > div {
- display: flex;
- gap: 0.5em;
- }
-
- legend ~ div > div :first-child {
- flex: auto;
- }
-
- legend ~ div > div :first-child > label {
- display: block;
- width: 100%;
- }
-
- legend ~ div > div :first-child > label > input {
- display: block;
- width: 100%;
- box-sizing: border-box;
- }
-
- label {
- position: relative;
- }
-
- label > span {
- position: absolute;
- left: -999999px;
- }
-
- label + input[type="checkbox"] {
- position: absolute;
- left: -999999px;
- }
-
- textarea {
- width: 100%;
- box-sizing: border-box;
- display: block;
- }
- </style>
- </head>
- <body>
- <h1>Websocket Client</h1>
- <form
- id="formConnection"
- >
- <fieldset>
- <legend>Server</legend>
- <div>
- <div>
- <div>
- <label>
- <span>URL</span>
- <input
- type="url"
- name="serverUrl"
- autocomplete="off"
- value="ws://localhost:42069"
- required
- >
- </label>
- </div>
- </div>
- </div>
- <div>
- <div>
- <div>
- <label>
- <span>Username</span>
- <input
- type="text"
- name="username"
- autocomplete="off"
- value="Web"
- required
- >
- </label>
- </div>
- </div>
- </div>
- <button
- type="submit"
- name="connect"
- >
- Connect
- </button>
- </fieldset>
- </form>
- <form
- id="formMessage"
- >
- <fieldset
- name="fieldset"
- disabled
- >
- <legend>Message</legend>
- <div>
- <div>
- <div>
- <label>
- <span>Message</span>
- <input
- type="text"
- value=""
- autocomplete="off"
- name="message"
- placeholder="Type your message"
- >
- </label>
- <input
- type="checkbox"
- name="binary"
- readonly
- tabindex="-1"
- />
- </div>
- <button
- type="submit"
- >
- Send as Text (Enter)
- </button>
- <button
- name="submitBinary"
- type="button"
- >
- Send as Binary (Shift + Enter)
- </button>
- </div>
- </div>
- </fieldset>
- </form>
- <form
- id="formLogs"
- >
- <fieldset>
- <legend>Logs</legend>
- <div>
- <label>
- <span>Logs</span>
- <textarea
- rows="10"
- cols="50"
- name="logs"
- readonly
- ></textarea>
- </label>
- </div>
- <button
- type="submit"
- >
- Clear Logs
- </button>
- </fieldset>
- </form>
- <script src="index.js"></script>
- </body>
- </html>
|