Introdução
Aplicações real-time têm se tornado essenciais em muitos aspectos da tecnologia moderna, oferecendo interações instantâneas que melhoram a experiência do usuário. Uma das tecnologias mais populares para criar essas aplicações em JavaScript é o Socket.io, uma biblioteca que facilita o trabalho com WebSockets. Neste artigo, vamos aprender a criar uma aplicação de chat real-time simples usando Socket.io e Node.js.
Configuração do Ambiente
Antes de começarmos, você precisa ter o Node.js instalado em seu sistema. Você pode baixá-lo e instalar a partir de nodejs.org.
Passo 1: Criando o Projeto
Primeiro, crie uma nova pasta para o projeto e inicialize um novo projeto Node.js:
mkdir chat-app
cd chat-app
npm init -y
Passo 2: Instalando Socket.io
Instale o Socket.io e o Express (um framework web para Node.js) através do npm:
npm install socket.io express
Passo 3: Configurando o Servidor
Crie um arquivo chamado server.js e adicione o seguinte código para configurar um servidor HTTP básico com Express e integrá-lo com Socket.io:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('Um usuário se conectou');
socket.on('disconnect', () => {
console.log('Usuário desconectado');
});
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Servidor rodando na porta ${PORT}`);
});
Passo 4: Criando a Interface do Usuário
Crie um arquivo index.html na raiz do projeto para a interface do usuário do chat:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat com Socket.io</title>
<script src="/socket.io/socket.io.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Enviar</button>
</form>
</body>
</html>
Passo 5: Executando a Aplicação
Para executar a aplicação, volte ao terminal e execute o seguinte comando:
node server.js
Agora, abra o navegador e acesse http://localhost:3000. Você deverá ver a interface do chat. Abra outra aba ou janela do navegador no mesmo endereço para simular outro usuário e comece a enviar mensagens.
Conclusão
Parabéns! Você acaba de criar uma aplicação de chat real-time simples usando Socket.io e Node.js. Esse exemplo básico demonstra o poder dos WebSockets para criar aplicações interativas e real-time na web. Explore mais sobre Socket.io e suas funcionalidades para expandir a aplicação, adicionando autenticação, salas de chat privadas, e muito mais.
Top comments (0)