afcapel/index.html

## index.html
<!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>

## server.js
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`)
	<!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>
	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`)