image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image

GN

Gabrieli Nicolodi26/11/2024 11:31
Compartilhe

WebSockets

    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:

    1. Persistência da Conexão: Após estabelecida, a conexão permanece aberta até ser fechada por uma das partes.
    2. Baixa Latência: Ideal para aplicações que requerem atualizações em tempo real.
    3. 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!

    Compartilhe
    Comentários (0)