WebSockets

#HTML
#Node.js
#JavaScript

O que são WebSockets?

WebSockets são um protocolo de comunicação que permite a troca bidirecional de dados entre cliente e servidor em tempo real. Diferente do HTTP, que segue o modelo requisição-resposta, o WebSocket estabelece uma conexão persistente que pode ser usada para enviar e receber dados sem a necessidade de reabrir a conexão constantemente.

Características principais dos WebSockets:

Persistência da Conexão: Após estabelecida, a conexão permanece aberta até ser fechada por uma das partes.
Baixa Latência: Ideal para aplicações que requerem atualizações em tempo real.
Bidirecionalidade: Tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento.

O que é Socket.IO?

O Socket.IO é uma biblioteca que facilita a implementação de WebSockets em aplicações Node.js. Ele fornece uma interface simples e abstrata, tratando automaticamente problemas de compatibilidade entre navegadores e gerenciando reconexões.

Socket.IO suporta:

Comunicação em tempo real.
Salas de comunicação (rooms).
Reconexões automáticas.

Exemplo 1: Chat em Tempo Real

Objetivo:

Criar um chat onde os usuários possam enviar e receber mensagens em tempo real.

Configuração do Servidor com Node.js

// Instale as dependências com `npm install express socket.io`
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');


const app = express();
const server = http.createServer(app);
const io = new Server(server);


app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});


// Lógica do Socket.IO
io.on('connection', (socket) => {
console.log('Um usuário se conectou.');


socket.on('chat message', (msg) => {
  io.emit('chat message', msg); // Envia a mensagem para todos os clientes
});


socket.on('disconnect', () => {
  console.log('Um usuário se desconectou.');
});
});


server.listen(3000, () => {
console.log('Servidor rodando em http://localhost:3000');
});

Código do Cliente (index.html)

<!DOCTYPE html>
<html lang="pt-br>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat em Tempo Real</title>
</head>
<body>
<ul id="messages"></ul>
<form id="form">
  <input id="input" autocomplete="off" /><button>Enviar</button>
</form>


<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();


  const form = document.getElementById('form');
  const input = document.getElementById('input');
  const messages = document.getElementById('messages');


  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (input.value) {
      socket.emit('chat message', input.value);
      input.value = '';
    }
  });


  socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    messages.appendChild(item);
  });
</script>
</body>
</html>

Exemplo 2: Contador de Conexões Ativas

Objetivo:

Exibir em tempo real o número de usuários conectados a uma aplicação.

Configuração do Servidor

let onlineUsers = 0;


io.on('connection', (socket) => {
onlineUsers++;
io.emit('user count', onlineUsers);


socket.on('disconnect', () => {
  onlineUsers--;
  io.emit('user count', onlineUsers);
});
});

Código do cliente (index.html):

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usuários Online</title>
</head>
<body>
<h1>Usuários conectados: <span id="count">0</span></h1>


<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();


  const countElement = document.getElementById('count');


  socket.on('user count', (count) => {
    countElement.textContent = count;
  });
</script>
</body>
</html>

Conclusão

O Socket.IO é uma ferramenta poderosa para construir aplicações em tempo real. Neste artigo, vimos como configurar um chat básico e um contador de conexões ativas. Com o WebSocket e o Socket.IO, é possível criar experiências dinâmicas e responsivas, essenciais em sistemas modernos. 🚀

Convido você a brincar de tic-tac-toe, todo o game foi criado utilizando como base os conceitos explicados nesse artigo, compartilhe o link do game com um amigo e divirta-se!

LINK AQUI: https://gabrielimendesnicolodi.github.io/gabiprogamadoraweb/

Se você tiver dúvidas ou precisar de ajuda, deixe um comentário!