Embedded Files
Node.js
Node (ou formalmente Node.js) é um ambiente em tempo de execução open-source (código aberto) e multiplataforma que permite que os desenvolvedores criem todo tipo de aplicativos e ferramentas do lado servidor em JavaScript. Node destina-se a ser usado fora do contexto de um navegador (ou seja executando diretamente no computador ou no servidor). Como tal, o ambiente omite APIs JavaScript específicas do navegador e adiciona suporte para APIs de sistema operacional mais tradicionais, incluindo bibliotecas de sistemas HTTP e arquivos.
Express.js
Express é o framework web mais popular, e é a biblioteca subjacente para uma série de outros frameworks populares de Nodes. Fornece mecanismos para:
Gestão das requisições de diferentes requisições e rotas e URLs.
Combinação com mecanismos de renderização de "view" para gerar respostas inserindo dados em modelos.
Definição das configurações comuns da aplicação web, como a porta a ser usada para conexão e a localização dos modelos que são usados para renderizar a resposta.
Inclusão em qualquer ponto da requisição de um "middleware" para interceptar processar ou pré-processar e tratar à mesma.
Socket.IO
Socket.IO é uma biblioteca JavaScript para aplicativos da web em tempo real. Permite comunicação bidirecional em tempo real entre clientes e servidores da Web. Ele tem duas partes: uma biblioteca do lado do cliente que é executada no navegador e uma biblioteca do lado do servidor para o Node.js.
Podemos conhecer um pouco mais sobre WebSockets em: https://www.youtube.com/watch?v=T4unNrKogSA
Instalando Ferramentas e elementos necessários
Instalar Node.js
Instalar Express.js
https://www.npmjs.com/package/express
npm install express
Instalar Socket.io
npm install socket.io
Iniciando ambiente
Crie o diretório do projeto: mkdir projectWSS
Acesse diretório: cd projectWSS
Crie o arquivo package.json: npm init -y
Instale as dependências: npm install express ejs socket.io
Implementação do servidor
Crie o arquivo server.js, dentro da raiz do diretório do projeto.
O conteúdo server.js, deverá conter:
// Importa express e path
const express = require('express');
const path = require('path');
// Cria nossa aplicação express
const app = express();
// Define e configura o protocolo http
const server = require('http').createServer(app);
// Define e configura o protocolo wss (websocket)
const io = require('socket.io')(server);
// Define nossos diretórios publicos para arquivos frontend
app.use(express.static(path.join(__dirname, 'public')));
// Define onde as views irão ficar (public)
app.set('views', path.join(__dirname, 'public'));
// Define que nossa engine ejs irá exibir elements html
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// Define que o root da aplicação direcione para index.html
app.use('/', (req, res) => {
res.render('index.html');
});
// Inicializa um novo array para armazenar as mensagens
// Poderia utilizar aqui um banco de dados!!! :)
let messages = [];
// 1. A cada nova conexão de um socket no frontend o io.on eh notificado
io.on('connection', socket => {
console.log(`Novo socket conectado: ${socket.id}`);
// 2. A cada nova conexão de socket, é enviado apenas para o socket
// que conectou todas as mensagens já enviadas
socket.emit('previousMessage', messages);
// 3. O evento emitido pelo frontend eh notificado neste socket.on
socket.on('sendMessage', data => {
messages.push(data); // Adiciona o objeto no array - guarda todas as mensagens
// 4. Envia para todos os outros sockets conectados (broadcast) o conteúdo recebido
socket.broadcast.emit('receivedMessage', data);
});
});
// Executa aplicação na porta 3000
server.listen(3000);
Implementação do frontend
Crie um diretório chamado public, na raiz do diretório do projeto
Crie o arquivo index.html, dentro do diretório public
O conteúdo index.html, deverá conter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js" ></script>
</head>
<body>
<form id="chat">
<input type="text" name="username" placeholder="Digite seu usuario">
<input type="text" name="message" placeholder="Digite sua mensagem">
<button type="submit">Enviar</button>
<div class="messages"></div>
</form>
<script type="text/javascript">
// 1. Inicializa uma nova conexão socket
var socket = io('http://localhost:3000');
// Formata o objeto message para ser exibido na tela
function renderMessage(message) {
$('.messages').append('<div class="message"><strong>'
+ message.author +'</strong>: '+ message.message +'</div>');
}
// 2. Recebe todas as mensagens já enviadas no chat
socket.on('previousMessage', function(messages) {
for (message of messages) {
renderMessage(message);
}
});
// 4. Recebe o objeto emitido pelo servidor (broadcast) para ser exibido
socket.on('receivedMessage', function(message) {
renderMessage(message);
});
// A cada vez que o form envia o evento de submit
$('#chat').submit(function(event) {
event.preventDefault();
// Recebe valores do formulario
var author = $('input[name=username]').val();
var message = $('input[name=message]').val();
// Verifica valores e adiciona em um objeto
if (author.length && message.length) {
var messageObject = {
author: author,
message: message,
};
// Exibe conteúdo do objeto na tela
renderMessage(messageObject);
// 3. Envia a mensagem para o server
socket.emit('sendMessage', messageObject);
}
});
</script>
</body>
</html>
Execute sua aplicação
Execute sua aplicação no terminal através do comando: node server.js
Page updated
Google Sites
Report abuse