Last active
December 20, 2021 12:00
-
-
Save afcapel/7a1bb589c65f6cad23c6be1b15d90c8c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> | |
| <script> | |
| const STATES = [ | |
| "CONNECTING", | |
| "OPEN", | |
| "CLOSING", | |
| "CLOSED", | |
| ] | |
| window.addEventListener("load", () => { | |
| const output = document.getElementById("output") | |
| const input = document.getElementById("input") | |
| const connectBtn = document.getElementById("connect") | |
| const sendBtn = document.getElementById("send") | |
| const log = (message) => { | |
| const timestamp = new Date().toISOString().split(/[A-Z]/)[1] | |
| const msg = `${timestamp}: ${message}` | |
| console.log(msg) | |
| output.innerHTML = `${output.innerHTML} <p>${timestamp}: ${message}</p>` | |
| output.scroll(0, output.scrollHeight) | |
| } | |
| let ws | |
| const sendInput = (event) => { | |
| event.preventDefault() | |
| ws.send(input.value) | |
| log("Sent: " + new Blob([input.value]).size + " bytes") | |
| } | |
| const connect = () => { | |
| ws = new WebSocket(`ws://${window.location.hostname}:8080/`) | |
| ws.onopen = (event) => { | |
| log("Websocket opened") | |
| } | |
| ws.onclose = (event) => { | |
| log("Websocket closed") | |
| } | |
| ws.onmessage = (msg) => { | |
| log("Received: " + msg.data.size + " bytes") | |
| } | |
| ws.onerror = (event) => { | |
| log("Error: " + event) | |
| } | |
| sendBtn.addEventListener("click", sendInput) | |
| } | |
| const disconnect = () => { | |
| log(`Disconnecting. Websocket state ${STATES[ws.readyState]}`) | |
| ws.close() | |
| sendBtn.removeEventListener("click", sendInput) | |
| } | |
| connectBtn.addEventListener("click", (event) => { | |
| event.preventDefault() | |
| log("Connecting...") | |
| connect() | |
| }) | |
| connect() | |
| requestAnimationFrame(() => { | |
| disconnect() | |
| requestAnimationFrame(() => { | |
| log("Reconnecting...") | |
| connect() | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Test Safari web connection issue</h1> | |
| <p>Click "Send" to send a message to the server, . | |
| </p> | |
| <form> | |
| <p> | |
| <label for="input">Message:</label><br/> | |
| <textarea id="input"> | |
| All work and no play makes Jack a dull boy | |
| All work and no play makes Jack a dull boy | |
| All work and no play makes Jack a dull boy | |
| </textarea> | |
| </p> | |
| <p> | |
| <button id="connect">Reconnect</button> | |
| <button id="send">Send</button> | |
| </p> | |
| </form> | |
| <div id="output" style="max-height: 30vh; overflow-y: scroll;"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const http = require('http') | |
| const fs = require('fs') | |
| const ws = require('ws') | |
| const wss = new ws.WebSocketServer({ port: 8080, perMessageDeflate: true }) | |
| wss.on('connection', (ws) => { | |
| ws.on('message', (data) => { | |
| console.log(`received ${data.length} bytes`) | |
| ws.send(data, { compress: true }) | |
| }) | |
| }) | |
| const httpServer = http.createServer((req, res) => { | |
| res.writeHead(200, { 'content-type': 'text/html' }) | |
| fs.createReadStream('./index.html').pipe(res) | |
| }) | |
| const port = process.env.PORT || 8001 | |
| httpServer.listen(port) | |
| console.log(`Visit http://localhost:8001`) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment