index.js

const form = document.querySelector('#message-form')
const messages = document.querySelector('#messages')

if (window.SharedWorker) {
    const worker = new SharedWorker('worker.js')

    worker.port.start()
    worker.port.onmessage = (event) => {
        messages.innerHTML = ''

        event.data.forEach((messageText) => {
            const message = document.createElement('li')
            message.textContent = messageText
            
            messages.appendChild(message)
        })

    }

    form.addEventListener('submit', (event) => {
        event.preventDefault()

        const input = form.querySelector('input[name="message"]')
        const message = input.value
        input.value = ''

        worker.port.postMessage(message)
    })
} else {
    console.error('SharedWorker not supported')
}