sayhicoelho/buzzr.html

## buzzr.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Buzzr: Fale com desconhecidos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <main class="container">
      <button type="button" class="btn btn-danger float-right btn-sm mt-3 shadow-sm" id="btn-disconnect">
        Desligar
      </button>
      <h1>Buzzr</h1>
      <div class="card mb-2">
        <div class="card-body" id="messages">
          <!-- here wil go the messages -->
        </div>
      </div>
      <div class="message-composer">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Digite uma mensagem" id="input-message" autocomplete="off">
          <div class="input-group-append">
            <button type="button" class="btn btn-primary shadow-sm" id="btn-send">Enviar</button>
          </div>
        </div>
      </div>
    </main>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
      integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I="
      crossorigin="anonymous"
    ></script>

    <script>
      const name = 'Renan'
      const input = document.getElementById('input-message')
      const btnSend = document.getElementById('btn-send')
      const btnDisconnect = document.getElementById('btn-disconnect')
      const messages = document.getElementById('messages')
      const types = {
        message: 'ms',
        typing: 'tp',
        typingStopped: 'st',
        connect: 'ss',
        disconnect: 'bc',
        entered: 'c',
        disconnected: 'i',
        offline: 'pf',
        reconnected: 'po',
      }

      const storedToken = getToken()
      let body = {}
      let socket
      let connected = false

      if (storedToken) {
        body.token = storedToken
      }

      fetch('http://34.197.32.213:3000/authenticate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(body)
      })
        .then(response => response.json())
        .then(({ success, token }) => {
          if (success) {
            storeToken(token)
            initialize()
          } else {
            alert('Something went wrong.')
          }
        })
        .catch(err => {
          alert('Não foi possível completar sua solicitação. Por favor, tente novamente ou contate o webmaster.')
          console.error(err)
        })

      function initialize() {
        socket = io("http://34.197.32.213:3000?token=" + getToken())

        socket.on("connect", e => {
          console.log("Connected!");
          newChat()
        });

        socket.on("message", message => {
          console.log("Message: ", message);
          const { event, data, metadata } = message

          switch (event) {
            case types['message']:
              removeTyping()
              addMessage(true, data, metadata)
              break
            case types['typing']:
              addTyping()
              break
            case types['entered']:
              entered(data)
              break
            case types['disconnected']:
              disconnect()
              break
            case types['typingStopped']:
              removeTyping()
              break
            case types['offline']:
              addServerMessage('Seu parceiro parece estar offline, tentando reconectá-lo...', 'partner-offline')
              break
            case types['reconnected']:
              document.querySelectorAll('.partner-offline').forEach(el => el.remove())
              break
            default:
              console.log('DEFAULT SWITCH CASE MESSAGE HANDLED')
          }
        });

        socket.on("disconnect", e => {
          console.log("Disconnected!");
        });

        input.addEventListener('keydown', e => {
          if (e.keyCode == 13 || e.which == 13 || e.key == 13) {
            sendMessage()
          }
        })

        btnSend.addEventListener('click', sendMessage)
        btnDisconnect.addEventListener('click', sendDisconnect)
      }

      function sendMessage() {
        const metadata = {
          name
        }

        if (input.value.length > 0) {
          emit('message', input.value, metadata)
          addMessage(false, input.value, metadata)
          input.value = ''
        }
      }

      function appendToMessages(html) {
        messages.insertAdjacentHTML('beforeend', html)
      }

      function addMessage(isStranger, message, metadata) {
        const color = isStranger ? 'text-danger' : ''
        const name = metadata && metadata.name != null
          ? metadata.name
          : isStranger
            ? 'Estranho'
            : 'Você'

        const html = `<div class="message">
          <span class="${color} font-weight-bold">${name}:</span>
          ${message}
        </div>`

        appendToMessages(html)
      }

      function newChat() {
        emit('connect')
        clearMessages()
        addServerMessage('Conectando...')
      }

      function sendDisconnect() {
        emit('disconnect')
      }

      function disconnect() {
        if (connected) {
          connected = false
          disableAll()
          addServerMessage('A conversa foi encerrada.')
          addNewChatButton()
        }
      }

      function toggleAll(state) {
        input.disabled = !state
        btnSend.disabled = !state
        btnDisconnect.disabled = !state
      }

      function disableAll() {
        toggleAll(false)
      }

      function enableAll() {
        toggleAll(true)
      }

      function clearMessages() {
        messages.innerHTML = ''
      }

      function addServerMessage(message, className = '') {
        const html = `<div class="message ${className} font-weight-bold">
          ${message}
        </div>`

        appendToMessages(html)
      }

      function addNewChatButton() {
        const html = `<button class="btn btn-light border btn-lg mt-2" onclick="newChat()">
          Novo chat
        </button>`

        appendToMessages(html)
      }

      function storeToken(token) {
        window.localStorage.setItem('token', token)
      }

      function getToken() {
        return window.localStorage.getItem('token')
      }

      function getEventObject(event, data, metadata) {
        return {
          event: types[event],
          data: data || null,
          metadata: metadata || null
        }
      }

      function emit(event, data, metadata) {
        socket.emit('message', getEventObject(event, data, metadata))
      }

      function addTyping() {
        const html = `<span class="font-weight-bold text-muted" id="typing">
          Digitando...
        </span>`

        appendToMessages(html)
      }

      function removeTyping() {
        const typing = document.getElementById('typing')
        typing && typing.remove()
      }

      function entered(data) {
        connected = true

        clearMessages()
        addServerMessage('Você já está falando com alguém. Diga oi!')
        enableAll()

        if (data != null && data.log) {
          const currentUserId = data.youare

          for (let log of data.log) {
            const id = log.u
            const message = log.msg
            const metadata = log.metadata

            addMessage(id != currentUserId, message, metadata)
          }
        }
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Buzzr: Fale com desconhecidos</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	</head>
	<body>
	<main class="container">
	<button type="button" class="btn btn-danger float-right btn-sm mt-3 shadow-sm" id="btn-disconnect">
	Desligar
	</button>
	<h1>Buzzr</h1>
	<div class="card mb-2">
	<div class="card-body" id="messages">
	<!-- here wil go the messages -->
	</div>
	</div>
	<div class="message-composer">
	<div class="input-group">
	<input type="text" class="form-control" placeholder="Digite uma mensagem" id="input-message" autocomplete="off">
	<div class="input-group-append">
	<button type="button" class="btn btn-primary shadow-sm" id="btn-send">Enviar</button>
	</div>
	</div>
	</div>
	</main>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
	integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I="
	crossorigin="anonymous"
	></script>

	<script>
	const name = 'Renan'
	const input = document.getElementById('input-message')
	const btnSend = document.getElementById('btn-send')
	const btnDisconnect = document.getElementById('btn-disconnect')
	const messages = document.getElementById('messages')
	const types = {
	message: 'ms',
	typing: 'tp',
	typingStopped: 'st',
	connect: 'ss',
	disconnect: 'bc',
	entered: 'c',
	disconnected: 'i',
	offline: 'pf',
	reconnected: 'po',
	}

	const storedToken = getToken()
	let body = {}
	let socket
	let connected = false

	if (storedToken) {
	body.token = storedToken
	}

	fetch('http://34.197.32.213:3000/authenticate', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(body)
	})
	.then(response => response.json())
	.then(({ success, token }) => {
	if (success) {
	storeToken(token)
	initialize()
	} else {
	alert('Something went wrong.')
	}
	})
	.catch(err => {
	alert('Não foi possível completar sua solicitação. Por favor, tente novamente ou contate o webmaster.')
	console.error(err)
	})

	function initialize() {
	socket = io("http://34.197.32.213:3000?token=" + getToken())

	socket.on("connect", e => {
	console.log("Connected!");
	newChat()
	});

	socket.on("message", message => {
	console.log("Message: ", message);
	const { event, data, metadata } = message

	switch (event) {
	case types['message']:
	removeTyping()
	addMessage(true, data, metadata)
	break
	case types['typing']:
	addTyping()
	break
	case types['entered']:
	entered(data)
	break
	case types['disconnected']:
	disconnect()
	break
	case types['typingStopped']:
	removeTyping()
	break
	case types['offline']:
	addServerMessage('Seu parceiro parece estar offline, tentando reconectá-lo...', 'partner-offline')
	break
	case types['reconnected']:
	document.querySelectorAll('.partner-offline').forEach(el => el.remove())
	break
	default:
	console.log('DEFAULT SWITCH CASE MESSAGE HANDLED')
	}
	});

	socket.on("disconnect", e => {
	console.log("Disconnected!");
	});

	input.addEventListener('keydown', e => {
	if (e.keyCode == 13 \|\| e.which == 13 \|\| e.key == 13) {
	sendMessage()
	}
	})

	btnSend.addEventListener('click', sendMessage)
	btnDisconnect.addEventListener('click', sendDisconnect)
	}

	function sendMessage() {
	const metadata = {
	name
	}

	if (input.value.length > 0) {
	emit('message', input.value, metadata)
	addMessage(false, input.value, metadata)
	input.value = ''
	}
	}

	function appendToMessages(html) {
	messages.insertAdjacentHTML('beforeend', html)
	}

	function addMessage(isStranger, message, metadata) {
	const color = isStranger ? 'text-danger' : ''
	const name = metadata && metadata.name != null
	? metadata.name
	: isStranger
	? 'Estranho'
	: 'Você'

	const html = `<div class="message">
	<span class="${color} font-weight-bold">${name}:</span>
	${message}
	</div>`

	appendToMessages(html)
	}

	function newChat() {
	emit('connect')
	clearMessages()
	addServerMessage('Conectando...')
	}

	function sendDisconnect() {
	emit('disconnect')
	}

	function disconnect() {
	if (connected) {
	connected = false
	disableAll()
	addServerMessage('A conversa foi encerrada.')
	addNewChatButton()
	}
	}

	function toggleAll(state) {
	input.disabled = !state
	btnSend.disabled = !state
	btnDisconnect.disabled = !state
	}

	function disableAll() {
	toggleAll(false)
	}

	function enableAll() {
	toggleAll(true)
	}

	function clearMessages() {
	messages.innerHTML = ''
	}

	function addServerMessage(message, className = '') {
	const html = `<div class="message ${className} font-weight-bold">
	${message}
	</div>`

	appendToMessages(html)
	}

	function addNewChatButton() {
	const html = `<button class="btn btn-light border btn-lg mt-2" onclick="newChat()">
	Novo chat
	</button>`

	appendToMessages(html)
	}

	function storeToken(token) {
	window.localStorage.setItem('token', token)
	}

	function getToken() {
	return window.localStorage.getItem('token')
	}

	function getEventObject(event, data, metadata) {
	return {
	event: types[event],
	data: data \|\| null,
	metadata: metadata \|\| null
	}
	}

	function emit(event, data, metadata) {
	socket.emit('message', getEventObject(event, data, metadata))
	}

	function addTyping() {
	const html = `<span class="font-weight-bold text-muted" id="typing">
	Digitando...
	</span>`

	appendToMessages(html)
	}

	function removeTyping() {
	const typing = document.getElementById('typing')
	typing && typing.remove()
	}

	function entered(data) {
	connected = true

	clearMessages()
	addServerMessage('Você já está falando com alguém. Diga oi!')
	enableAll()

	if (data != null && data.log) {
	const currentUserId = data.youare

	for (let log of data.log) {
	const id = log.u
	const message = log.msg
	const metadata = log.metadata

	addMessage(id != currentUserId, message, metadata)
	}
	}
	}
	</script>
	</body>
	</html>