Create a WebSocket connection with multiple protocols.

HTML

<div>
  <a href="https://wss-echo-c86k.onrender.com/" target="_blank">Wake Up Server</a>
  <button id="single">Single Protocol</button>
  <button id="multiple">Multiple Protocols</button>
<div>

JavaScript

document.getElementById('single').addEventListener('click', () => {
  const ws = new WebSocket('wss://wss-echo-c86k.onrender.com', 'protocol-1')
  ws.addEventListener('message', (event) => alert(event.data))
  ws.addEventListener('open', () => ws.send('message'))
})

document.getElementById('multiple').addEventListener('click', () => {
  const ws = new WebSocket('wss://wss-echo-c86k.onrender.com', ['protocol-1', 'protocol-2'])
  ws.addEventListener('message', (event) => alert(event.data))
  ws.addEventListener('open', () => ws.send('message'))
})

/*
// Echo Server:

import WebSocket, { WebSocketServer } from 'ws';

const port = process.env.PORT || 8080;

const wss = new WebSocketServer({ port });

wss.on('connection', (ws, req) => {
  const requestedProtocol = req.headers['sec-websocket-protocol'];
  console.log('Client connected, requested protocol:', requestedProtocol);

  ws.on('message', (message) => {
    const received = message.toString()
    console.log('Received:', received);
    ws.send(`${received}, ${requestedProtocol}`);
  });

  ws.on('close', () => console.log('Client disconnected'));
});

console.log(`WebSocket echo server running on ws://localhost:${port}`);
*/