jakeg/index.html

## index.html
<!DOCTYPE html>
<title>Live chat</title>
<style>
#chatHistory {
  width: 500px;
  background: black;
  color: white;
  padding: 10px;
  font-size: 16px;
  height: 500px;
}
#newMessage {
display: block;
font-size: 16px;
padding: 10px;
width: 500px;
}
</style>
<h1>Live chat via <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">websockets</a></h1>
<textarea id="chatHistory"></textarea>
<input id="newMessage" placeholder="Send a message...">
<script>
  let username = window.prompt('What is your name?')||'Lazy'
  document.cookie = `username=${username}`
  let ws = new WebSocket(`ws://${location.host}/socket`)
  chatHistory.value = `Welcome to the chat ${username}! 👋\n`
  newMessage.focus()
  ws.onmessage = (e) => {
    console.log('message received', e)
    chatHistory.value += e.data + '\n'
    chatHistory.scrollTop = chatHistory.scrollHeight
  }
  newMessage.onkeyup = (e) => {
    if (e.key === 'Enter' && newMessage.value.length) {
      ws.send(newMessage.value)
      chatHistory.value += `${username} (me): ${newMessage.value}\n`
      newMessage.value = ''
      chatHistory.scrollTop = chatHistory.scrollHeight
    }
  }
</script>

## server.js
let server = Bun.serve({
  fetch(req, server) {
    let cookies = (req.headers.get('cookie')||'').split(';')
    let username = 'Unknown'
    for (let pair of cookies) {
      let [key, value] = pair.split('=')
      if (key === 'username') username = value
    }
    if (server.upgrade(req, { data: { username }})) return
    return new Response(Bun.file('./index.html'))
  },
  websocket: {
    open(ws) {
      let msg = `${ws.data.username} has entered the chat from ${ws.remoteAddress}`
      console.log(msg)
      ws.subscribe('chat')
      ws.publish('chat', msg)
    },
    message(ws, data) {
      let msg = `${ws.data.username}: ${data}`
      console.log(msg)
      ws.publish('chat', msg)
    },
    close(ws) {
      let msg = `${ws.data.username} has left the chat`
      console.log(msg)
      server.publish('chat', msg)
      ws.unsubscribe('chat')
    }
  },
})
console.log(`Chat server listening on ${server.url}`)
	<!DOCTYPE html>
	<title>Live chat</title>
	<style>
	#chatHistory {
	width: 500px;
	background: black;
	color: white;
	padding: 10px;
	font-size: 16px;
	height: 500px;
	}
	#newMessage {
	display: block;
	font-size: 16px;
	padding: 10px;
	width: 500px;
	}
	</style>
	<h1>Live chat via <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">websockets</a></h1>
	<textarea id="chatHistory"></textarea>
	<input id="newMessage" placeholder="Send a message...">
	<script>
	let username = window.prompt('What is your name?')\|\|'Lazy'
	document.cookie = `username=${username}`
	let ws = new WebSocket(`ws://${location.host}/socket`)
	chatHistory.value = `Welcome to the chat ${username}! 👋\n`
	newMessage.focus()
	ws.onmessage = (e) => {
	console.log('message received', e)
	chatHistory.value += e.data + '\n'
	chatHistory.scrollTop = chatHistory.scrollHeight
	}
	newMessage.onkeyup = (e) => {
	if (e.key === 'Enter' && newMessage.value.length) {
	ws.send(newMessage.value)
	chatHistory.value += `${username} (me): ${newMessage.value}\n`
	newMessage.value = ''
	chatHistory.scrollTop = chatHistory.scrollHeight
	}
	}
	</script>
	let server = Bun.serve({
	fetch(req, server) {
	let cookies = (req.headers.get('cookie')\|\|'').split(';')
	let username = 'Unknown'
	for (let pair of cookies) {
	let [key, value] = pair.split('=')
	if (key === 'username') username = value
	}
	if (server.upgrade(req, { data: { username }})) return
	return new Response(Bun.file('./index.html'))
	},
	websocket: {
	open(ws) {
	let msg = `${ws.data.username} has entered the chat from ${ws.remoteAddress}`
	console.log(msg)
	ws.subscribe('chat')
	ws.publish('chat', msg)
	},
	message(ws, data) {
	let msg = `${ws.data.username}: ${data}`
	console.log(msg)
	ws.publish('chat', msg)
	},
	close(ws) {
	let msg = `${ws.data.username} has left the chat`
	console.log(msg)
	server.publish('chat', msg)
	ws.unsubscribe('chat')
	}
	},
	})
	console.log(`Chat server listening on ${server.url}`)