Desenvolvimento de Aplicação em Rede

Prévia do material em texto

UNIVERSIDADE PAULISTA 
CURSO DE CIÊNCIA DA COMPUTAÇÃO 
Aluno: 
João Paulo Soares de Brito – D9642A5 
 
 
 
 
 
 
 
 
 
 
 
 
 
(Ferramenta para Comunicação em Rede) 
APS 
BRASÍLIA – DF, 2022 
 
 
Aluno: 
João Paulo Soares de Brito – D9642A5 
APS 
APS (Atividade Pratica Supervisionada) 
do curso Ciência da Compuação, 
Campus Universidade Paulista – DF. 
 
 
 
 
 
 
 
BRASÍLIA – DF, 2022 
 
 
Sumário 
Objetivo do trabalho 5 
Introdução 6 
Fundamentos da comunicação de dados em rede 9 
3.1 Sentido de Transmissão 10 
3.2 Modos de Transmissão 10 
Sincronização 11 
Meios Físicos de Transmissão 12 
Plano de desenvolvimento da aplicação 14 
4.1 Softwares utilizados no processo de desenvolvimento do projeto 14 
4.1.1 Astah Community 14 
4.1.2 Visual Studio Code 14 
4.1.3 Spring Tools Suite 15 
4.1.4 Maven 15 
4.2 Protocolos WebSocket e STOMP 16 
4.2.1 WebSocket 16 
4.2.2 STOMP 16 
4.2.3 Spring Boot 17 
Interface com o Usuário 17 
HTML5 17 
4.3.2 CSS3 18 
4.3.3 JavaScript 18 
Modelagem do sistema 18 
4.4.1 Diagrama de atividades 19 
4.4.2 Diagrama de caso de uso 19 
4.4.2.1 Especificação do caso de uso 20 
4.4.3 Diagrama de Classes 20 
Projeto (estrutura) do programa 21 
Relatório com as linhas de código 25 
Referências: 31 
 
 
1. Objetivo do trabalho 
Antes mesmo do serviço de mensagens do Windows Live Messenger, outros 
programas como o ICQ e mIRC marcaram a experiências dos brasileiros que ainda 
começavam a aprender a interagir com a internet após o início de sua comercialização 
no Brasil entre 1994 e 1995. Desse modo, criar o nosso próprio bate papo instantâneo 
através da programação é um grande aprendizado, pois entenderemos como funciona 
por trás de tudo. 
O trabalho apresentado tem como objetivo principal desenvolver uma aplicação 
na linguagem de programação orientada a objetos, Java. E, também, aprimorar e 
aprofundar os nossos conhecimentos nessa linguagem utilizando as técnicas de 
comunicação de dados em rede. 
O trabalho acadêmico é responsável direto pela aplicação prática da teoria 
aprendida dentro da sala de aula. A aplicação técnica dos códigos ligeiramente 
abstratos visto em sala com explicações técnicas e às vezes complicadas na primeira 
observação. A possibilidade de aplicação traz a motivação necessária para a 
realização do trabalho supervisionado. Optamos por desenvolver o trabalho na 
linguagem JAVA por se tratar de uma linguagem altamente conhecida e poderosa para 
desenvolver qualquer tipo de sistema. 
A Linguagem JAVA nos pareceu a mais adequada por ser muito utilizada no 
mercado de trabalho uma vez que é uma linguagem Orientada Objeto. No trabalho 
desenvolveremos uma comunicação entre computadores utilizando componentes 
derivados da teoria de Sockets de Berkeley apresentado na disciplina de Rede de 
Computadores. 
Desde a antiguidade foi notado que a comunicação é essencial para nossa 
sobrevivência e desenvolvimento, com isso foram criadas diversas técnicas para 
realizar tal feito, desde meios físicos como a escrita, até verbalizações, chegando ao 
conjunto de ambos que é realizado através da internet. 
Vamos conhecer neste trabalho como é realizada uma comunicação através de um 
sistema desenvolvido especialmente com o objetivo de tornar a troca de informações 
de maneira mais rápida e prática. 
 
 
2. Introdução 
Em grande parte do mundo, a Internet está se tornando o principal meio de 
comunicação nos negócios. As ferramentas de comunicação da Internet economizam 
dinheiro de várias maneiras. E-mail, mensagens instantâneas e redes sociais são 
gratuitos. Existem muitos tipos diferentes de ferramentas de comunicação pela 
Internet, como e-mail, VoIP, fóruns, chat online e redes sociais, entre outros. Usar as 
mais recentes ferramentas e métodos de comunicação pela Internet é essencial para 
trazer sua empresa para a era moderna da comunicação e do marketing. O 
computador pessoal foi originalmente usado como um dispositivo de computação 
independente. Um programa foi instalado no computador e usado para fazer 
processamento de texto ou processamento de números. No entanto, com o advento 
da rede e das redes locais, os computadores podem trabalhar juntos para resolver 
problemas. Computadores de ponta foram instalados como servidores, e os usuários 
na rede local podiam executar aplicativos e compartilhar informações entre 
departamentos e organizações. Isso é chamado de computação cliente-servidor. 
Assim como as organizações criam sites da Web para fornecer acesso global a 
informações sobre seus negócios, também criam páginas da Web internas para 
fornecer informações sobre a organização aos funcionários. Esse conjunto interno de 
páginas da Web é chamado de intranet. As páginas da Web na intranet não são 
acessíveis a quem está fora da empresa; na verdade, essas páginas apareceriam 
como “não encontradas” se um funcionário tentasse acessá-las de fora da rede da 
empresa. Às vezes, uma organização deseja poder colaborar com seus clientes ou 
fornecedores e, ao mesmo tempo, manter a segurança de estar dentro de sua própria 
rede. Em casos como esse, uma empresa pode querer criar uma extranet , que é uma 
parte da rede da empresa que pode ser disponibilizada com segurança para quem 
está fora da empresa. As extranets podem ser usadas para permitir que os clientes 
façam login e verifiquem o status de seus pedidos ou para que os fornecedores 
verifiquem os níveis de estoque de seus clientes. 
As ferramentas de comunicação baseadas em rede funcionam como 
impulsionadores significativos para a eficiência em organizações de quase todos os 
tamanhos. Da mesma forma, as empresas usam software de mensagem instantânea 
 
 
para colaborar e trocar ideias rapidamente ou como uma forma de obter respostas 
eficientes a perguntas curtas sem a necessidade de se encontrar pessoalmente ou 
conectar-se por telefone. Os serviços de videoconferência permitem que os 
funcionários participem virtualmente de reuniões sem sair de suas mesas, e a 
videoconferência possibilita fazer conferências com funcionários separados por 
centenas de quilômetros. O proprietário ou líder de uma empresa com funcionários 
remotos pode usar a videoconferência para fornecer notícias importantes e análises 
de desempenho com um toque mais pessoal. As redes de mídia social oferecem às 
empresas um canal de marketing relativamente novo. Ao postar anúncios e ofertas 
especiais em sites de mídia social, as empresas podem alcançar rapidamente 
centenas ou até milhares de clientes. Com redes de distribuição de anúncios baseadas 
em rede, as empresas fazem com que os clientes que procuram determinados 
produtos ou serviços vejam mensagens de marketing direcionadas, aumentando a 
eficiência de seu orçamento de publicidade. Comunicação de voz temos a telefonia 
pela Internet a mais populares é o Skype. Com o Skype e outras ferramentas de 
telefonia de Internet semelhantes, você pode conduzir conversas de voz gratuitas 
entre dois computadores. O Skype também pode ser usado para videoconferência, 
chamadas de webcam, mensagens instantâneas e envio de mensagens SMS. 
Comunicação via e-mail ainda é uma ferramenta essencial que todo negócio deveria 
ter. Apesar disso, com o aumento das mensagens por meio de sites de redes sociais 
e mensagens instantâneas, o e-mail não é tão importante quanto costumava ser. 
Os fóruns, como o e-mail, também existem desde o surgimento da Internet. Os 
fóruns fornecem um local para trocar mensagens e participar de conversas. As 
principais diferenças das mensagens instantâneas são que os fóruns geralmente são 
públicos e as comunicações não são em tempo real. Os fóruns e seus pôsteres e 
leitores regulares formam comunidades que podem ser valiosas para o seu negócio. 
Muitas empresas e indivíduos anunciam seus sites com assinaturas que são 
automaticamente anexadas a todas as postagens feitas em um fórum. 
Os fóruns,como o e-mail, também existem desde o surgimento da Internet. Os 
fóruns fornecem um local para trocar mensagens e participar de conversas. As 
principais diferenças das mensagens instantâneas são que os fóruns geralmente são 
 
 
públicos e as comunicações não são em tempo real. Os fóruns e seus pôsteres e 
leitores regulares formam comunidades que podem ser valiosas para o seu negócio. 
Muitas empresas e indivíduos anunciam seus sites com assinaturas que são 
automaticamente anexadas a todas as postagens feitas em um fórum. 
Com a evolução dos celular para os smartphone, o desejo de acesso à Internet 
nesses dispositivos fez com que as redes de dados fossem incluídas como parte da 
rede de telefonia móvel. Embora as conexões de Internet estivessem tecnicamente 
disponíveis antes, foi realmente com o lançamento das redes 3G em 2001 (2002 nos 
Estados Unidos) que smartphones e outros dispositivos celulares puderam acessar 
dados da Internet. Essa nova capacidade impulsionou o mercado de smartphones 
novos e mais poderosos, como o iPhone, lançado em 2007. Em 2011, as operadoras 
sem fio começaram a oferecer velocidades de dados 4G, dando às redes celulares as 
mesmas velocidades que os clientes estavam acostumados a obter através de sua 
conexão doméstica . Conforme as tecnologias de telefonia móvel evoluíram, 
provedores em diferentes países escolheram diferentes padrões de comunicação para 
suas redes de telefonia móvel. Cada padrão tem seus prós e contras, mas o ponto 
principal é que os telefones que usam um padrão não podem alternar facilmente para 
o outro. Nos EUA, isso não é um grande problema, porque as redes móveis existem 
para oferecer suporte a ambos os padrões. Mas quando você viajar para outros 
países, descobrirá que a maioria deles usa redes GSM, com a única grande exceção 
sendo o Japão, que padronizou o CDMA. 
Embora o Bluetooth geralmente não seja usado para conectar um dispositivo à 
Internet, é uma importante tecnologia sem fio que habilitou muitas funcionalidades que 
são usadas todos os dias. Quando criado em 1994 pela Ericsson, o objetivo era 
substituir as conexões com fio entre os dispositivos. Hoje, é o método padrão para 
conectar dispositivos próximos sem fio. O Bluetooth tem um alcance de 
aproximadamente 300 pés e consome muito pouca energia, o que o torna uma escolha 
excelente para diversos fins. Algumas aplicações de Bluetooth incluem: conectar uma 
impressora a um computador pessoal, conectar um telefone celular e fone de ouvido, 
conectar um teclado e mouse sem fio a um computador e conectar um controle remoto 
para uma apresentação feita em um computador pessoal. 
 
 
3. Fundamentos da comunicação de dados em rede 
Hoje, com um simples comando, seja ele um clique ou uma palavra digitada, as 
empresas, organizações e seus membros participantes, podem comunicar-se e ter 
acesso a relatórios ou informações de suas atividades de forma simultânea, 
independentemente de sua localização geográfica. Isso se dá ao grande avanço das 
redes de computadores modernos e seus diversos recursos em um curto período de 
tempo. Com o passar dos anos os computadores tornaram-se cada vez mais 
descentralizados, garantindo assim, uma comunicação cada vez mais ágil e eficiente, 
e quando se fala em eficiência, três princípios básicos se destacam na área da 
comunicação dados, são eles: 
Entrega: O sistema deve entregar corretamente os dados ao usuário ou 
dispositivo de destino. 
Confiabilidade: O sistema deve garantir que os dados não foram modificados 
ou corrompidos antes da entrega ao destinatário. 
Tempo de atraso: O sistema deve entregar dados de forma quase simultânea, 
isto é, sem perda de tempo significativa. 
Em tempos passados, talvez, o maior objetivo para se ter um computador em 
casa fosse utilizar aplicativos de texto e os jogos. Mas, esse pensamento mudou de 
forma drástica com a chegada da internet, que com sua chegada, revolucionou, entre 
outras áreas, a forma de comunicação remota. A internet possibilitou a criação de 
diversas redes sociais, aplicativos de mensagens, videochamadas e etc. Mas, para 
que tais comunicações sejam realizadas, dependem de processos, que por sua vez, 
são compostos de elementos básicos, que toda comunicação de dados em rede deve 
ter: 
Mensagem: É o objeto utilizado na comunicação, ou seja, a informação a ser 
transmitida. Pode ser representada por um texto, imagem, vídeo, áudio, figuras, 
números, ou qualquer combinação entre esses elementos. 
Transmissor: É aquele que envia a mensagem de dados. Pode ser um 
computador, celular, câmera de vídeo ou qualquer outro dispositivo que possa enviar 
elementos que compõe uma mensagem já citados anteriormente. 
Receptor: É o dispositivo que recebe a mensagem. Pode ser um computador, 
celular, câmera de vídeo e assim por diante. 
 
 
Meio de transmissão: É ou meio por onde se encaminha a mensagem, 
podendo ser físico ou não. 
Protocolo: É um conjunto de regras que regem a comunicação e transferência 
de dados entre dois sistemas computacionais. 
Quanto ao que se refere a transmissão de dados, a comunicação pode ser 
realizada de diferentes formas, definindo-se por: Sentido de Transmissão, Modo de 
Transmissão e Sincronização. 
3.1 Sentido de Transmissão 
O sentido de transmissão ou sentido de trocas pode ser feito de três formas 
diferentes: 
Simplex: A comunicação simplex é aquela em que existe apenas um 
transmissor e um receptor. Nesse caso, a comunicação é unidirecional, ou seja, 
apenas um dos dois dispositivos no link é capaz de transmitir e outro, por sua vez, só 
será capaz de receber. Um bom exemplo deste tipo de comunicação é a TV e o rádio 
AM e FM. 
Half-duplex: Neste modo, cada estação pode transmitir e receber dados, mas 
não ao mesmo tempo. Enquanto um dispositivo está transmitindo o outro está 
recebendo e vice-versa. Neste tipo de transmissão, toda a capacidade do canal fica 
por conta do dispositivo que estiver transmitindo. Como exemplo deste tipo de 
transmissão, temos o WalkTalking. 
Full-duplex: Neste modo, ambas as estações podem transmitir e receber de 
forma simultânea. Como exemplo temos o telefone celular, onde é possível falar e 
ouvir ao mesmo tempo. 
3.2 Modos de Transmissão 
O modo de transmissão trata da quantidade de bits que podem ser transmitidos 
simultaneamente pelo canal de comunicação. 
Transmissão em modo Paralelo: A transmissão paralela tem como 
característica vários bits caminhando juntos através de fi os independentes, sendo 
 
 
mais rápida, já que os bits são transmitidos de forma simultânea. Sua desvantagem 
está no custo, pois é cara a transmissão de bits simultâneos por longas distâncias, 
são exigidos cabos complexos que incluem vários condutores, o que o torna sensível 
às interferências eletromagnéticas. Exemplos: LPT1, LPT2, IDE, SCSI, PCI. 
Transmissão em modo Série: A transmissão serial consiste no envio de bits, 
sendo que um por vez, pois com isso, é possível atingir facilmente distâncias maiores. 
Os cabos são mais simples e baratos, o que facilita a sua construção com blindagem 
eletromagnética e com isso a redução das interferências que são captadas. 
Antigamente, um dos problemas da transmissão serial era a lentidão, só que hoje, ela 
está extremamente rápida e não possui problemas de sincronismo e interferências, 
como os encontrados em transmissões paralelas. A transmissão serial já é tão 
eficiente que está substituindo os dispositivos que utilizam transmissão paralela. 
Exemplos: USB, Sata, PCI-Express. 
3.3 Sincronização 
Transmissão Assíncrona: Na transmissão Assíncrona os dados são enviados 
um a um sem um controle de tempo entre um e outro. O tempo de transmissão 
decorrido de dois bits pode ser variado pelo equipamento de transmissão. Nesse tipo 
de transmissão, um bit especial é inserido no início e no fim da transmissão de um 
caractere e assim permite que o receptor entenda o que foi realmente transmitido.A 
principal desvantagem desse tipo de transmissão é a má utilização do canal, pois os 
caracteres são transmitidos irregularmente, além de um alto overhead (os bits de 
controle que são adicionados no início e no fim do caractere), o que ocasiona uma 
baixa eficiência na transmissão dos dados. 
Transmissão Síncrona: Na transmissão síncrona, os bits de um caractere são 
enviados imediatamente após o anterior, não existem os bits de controle no início e 
no fim do caractere e nem irregularidades nos instantes de transmissão. A transmissão 
síncrona é estabelecida através de uma cadência fixa para a transmissão dos bits de 
todo um conjunto de caracteres, um bloco. Resumindo, o transmissor e o receptor 
comunicam-se, sincronizam suas ações, e preparam-se para receber a comunicação, 
já sabendo da taxa de transmissão e o tamanho dos dados ordenados e conhecidos. 
 
 
A comunicação síncrona é mais cara que a assíncrona, pois necessita de um relógio 
no hardware para permitir o seu sincronismo e é muito utilizada em redes com altas 
taxas de transmissão. 
3.4 Meios Físicos de Transmissão 
Os meios físicos de transmissão podem ser classificados em dois tipos: os 
meios guiados onde o sinal percorre através de meios sólidos (cabos coaxiais, par 
trançado, fibra ótica), e os meios guiados, onde o sinal se propaga na atmosfera (Via 
rádio, via satélite). 
Entre os meios físicos mais utilizados pode-se destacar cinco, são eles: 
Cabo par Trançado: Este meio de transmissão é o mais utilizado peças redes 
telefônicas. Esse tipo de cabo é constituído por dois fios de cobre enrolados afim de 
reduzir interferências 
Cabo Coaxial: Outro meio de transmissão guiado, o cabo coaxial possui uma 
blindagem melhor se comparado ao par trançado, além de poder se estender por 
distancias maiores em maior velocidade. É constituído por dois condutores de cobre 
com isolamento e blindagem especial. 
Fibra Óptica: A fibra óptica é um meio de transmissão guiado que emite pulsos 
de luz, cada pulso representa um bit. A fibra possui muitas vantagens quando 
comparada aos outros tipos de cabo, entre elas, pode-se destacar sua velocidade que 
alcança a casa das dezenas de gigabits por segundo, além de ser imune a 
interferências. O centro da fibra é constituído por um núcleo de vidro por onde é 
emitida a luza. Esse núcleo é revestido por uma camada de vidro com refração inferior 
ao núcleo. 
Transmissão via Rádio: A transmissão via rádio pode ser bastante atraente 
por não precisar de cabos físicos, por percorrer longas distancias e atravessar paredes 
e obstáculos. Além de ser considerado um sinal omnidirecional, isto é, pode se 
propagar em todas as direções, desse modo, transmissor e receptor não precisam 
estar alinhados fisicamente. 
Transmissão via satélite: Os sinais via satélite são ligados por estações 
(transmissores-receptores), que recebem as transmissões em uma determinada faixa 
de frequência, geram novamente o sinal através de repetidores e transmitem 
novamente o sinal em uma outra faixa de frequência. 
 
 
4. Plano de desenvolvimento da aplicação 
Para o desenvolvimento da aplicação foi utilizado dois notebooks da 
fabricante DELL, um com o processador Intel® Core™ i5 – 7200 CPU @ 2.50 – 2.70 
GHz, com memoria principal de 8 GB, e SSD de 240 GB sobre um sistema operacional 
Windows 10 PRO 64x, outro com o processador Intel® Core™ i7 1165G7 CPU @ 
4.7GHz, com memoria principal de 16GB, e SSD de 560GB sobre o sistema 
operacional Linux Mint - Cinnamon, e outro computador da fabricante Lenovo com 
processador Intel® Core™ i5-1035G1 CPU 2.6 GHz, com memoria principal de 8GB, 
e SSD de 480GB sobre o sistema operacional Windows 10 Home Single Language 
x64. 
4.1 Softwares utilizados no processo de desenvolvimento do projeto 
4.1.1 Astah Community 
O programa Astah é uma ferramenta UML (Unified Modeling Language). Esta 
ferramenta nos permite visualizar a essência das ideias do projeto, criando de maneira 
rápida e simples diagramas para facilitar o entendimento sobre o sistema. 
No projeto foi utilizado para fazer os diagramas de: Classes, Atividades e Caso 
de Uso. 
4.1.2 Visual Studio Code 
O Visual Studio Code é um editor de texto multiplataforma criado pela Microsoft 
para o desenvolvimento de diversas aplicações. Esse poderoso editor nos permite 
criar aplicações com mais produtividade, dentre as principais vantagens temos: 
● IntelliSense: Fornece completações e preenchimento automático 
inteligentes com base em tipos de variáveis, definições de funções e 
módulos importados; 
● Depuração: ela permite debugar aplicativos em execução com pontos 
de interrupção, pilhas de chamadas e com auxilio de um console 
interativo; 
● Comandos Git integrados: é facilmente trabalhar com o Git diretamente 
do editor; 
 
 
● Extensível e personalizável: é possível instalar extensões para adicionar 
novos idiomas, temas, depuradores e para se conectar a serviços 
adicionais. As extensões são executadas em processos separados, 
garantindo que não tornem seu editor mais lento; 
● Implantação na nuvem: juntamente com o Microsoft Azure, é possível 
implantar e hospedar seus sites na nuvem, com uma grande facilidade; 
No projeto foi utilizado para a criação do front-end utilizando das linguagens 
Javascript e CSS3. 
4.1.3 Spring Tools Suite 
A IDE Spring Tools Suite é feito sob medida para desenvolver aplicativos 
robustos usando o Framework Spring Boot, ele incorpora tecnologias 
modernas que torna possível executar processos separados, tornando o 
desempenho do desenvolvimento do projeto mais produtivo. Principais 
vantagens para o uso dessa IDE: 
● Navegação Inteligente: é possível compreender e navegar rapidamente 
pelo código-fonte se tornando essencial para codificação; 
● Edição Inteligente: o preenchimento de código é uma parte crítica para 
desenvolvimento do código-fonte, e essa ide fornece grandes opção 
quando se trata da edição do código; 
● Informações a tempo de execução: Spring Tools enqiquece o código-
fonte com informações detalhadas do aplicativo em tempo de execução; 
No sistema utilizamos o Spring Tools Suite para o desenvolvimento do back-
end utilizando o Framework Spring Boot com a linguagem Java. 
4.1.4 Maven 
O Maven é uma ferramenta que agiliza a produção de projetos Java, ele é 
responsável pelo gerenciamento de dependências e build. 
No projeto foi utilizado para gerenciar as dependências do Websocket. 
 
 
4.2 Protocolos WebSocket e STOMP 
4.2.1 WebSocket 
É um protocolo que torna possível a comunicação bidirecional entre o 
navegador web e um servidor, utilizado de uma conexão TCP. Ele permite a criação 
de “túnel” para transportar de forma continua informações entre um navegador e um 
servidor de uma aplicação. WebSocket é compatível com a maioria dos navegadores 
da web modernos e, para navegadores que não o suportam, temos bibliotecas que 
fornecem alternativas para outras técnicas, como cometa e long-polling (chamada 
seletiva). 
Inicialmente, o HTTP é usado apenas para o handshake – cada uma das aplicações 
vão “negociando” como eles iram trabalhar -, depois que isso acontece a conexão 
HTTP é alterada para uma conexão TCP/IP recém-aberta para ser usada por um 
WebSocket. 
O WebSocket é um protocolo de nível muito baixo que atua sobre o TCP, ele 
transforma um fluxo de bytes em um fluxo de mensagens e não muito mais que isso. 
Diante disso, cabe aos aplicativos interpretar o significado de uma mensagem. Como 
em um mensagem não se é fornecida nenhuma informação adicional sobre como será 
gerido ou processado, dificilmente é possível implementar aplicativos complexos sem 
escrever código adicional. 
Por esta razão, o WebSocket permite o uso de subprotocolos que iram operar 
em um nível de aplicação superior para fazer com que os aplicativos definam um 
formato de mensagem que o cliente e o servidor possam entender, no caso do projeto 
foi utilizado o: STOMP.4.2.2 STOMP 
STOMP é um protocolo de mensagens simples orientadas a texto criado para 
linguagens de script como Ruby, Python e Perl com o intuito de fornecer a troca de 
mensagens entre clientes e corretores em um formato de conexão interoperável. 
Analogamente, o STOMP é chamado de HTTP para web, ele atua fornecendo um 
 
 
cabeçalho e corpo para a mensagem contendo comandos muito uteis para gerenciar 
a comunicação e, por outro lado, implementar soluções com recursos mais 
sofisticados, como reconhecimento de mensagens. 
4.2.3 Spring Boot 
Um dos projetos do “ecossistema” Spring, o framework Spring Boot surgiu para 
substituir as complexas configurações do antigo Spring Framework que fazia com que 
o desenvolvedor perdesse muito tempo nas configurações e não focasse o bastante 
na regra de negócio. Diante disso surgiu o Spring Boot tendo como principal ideia a 
de "simplesmente executar”, o que acabou sendo uma “mão na roda” para os 
programadores Java. 
O Spring Boot trouxe agilidade, e possibilita focar nas funcionalidades da 
aplicação com o mínimo de configuração o que torna isso possível é que o Spring Boot 
simplesmente analisa o projeto e automaticamente o configura. 
A estrutura do Spring Boot acelera o desenvolvimento de aplicativos que 
utilizam do WebSocket fazendo que sua implementação do lado do servidor fique uma 
tarefa mais simples pois para isso são necessárias poucas configurações. 
4.3 Interface com o Usuário 
A interface com o usuário é uma parte essencial para o desenvolvimento de 
uma aplicação, visando sempre facilitar a usabilidade e a experiência do usuário. A 
ideia de uma boa interface com o usuário não é apenas a de focar na estética, mas 
também na eficiência e na acessibilidade de uma aplicação. Diante disso, o projeto foi 
desenvolvido pensando da objetividade, com o pretendendo de ser o mais simples 
possível. 
Para criação da interface com usuário foi utilizado HTML5, CSS3 e o 
JavaScript. 
4.3.1 HTML5 
O HTML5, ou Hypertext Markup Language, é uma linguagem de marcação de 
hipertexto para apresentar e estruturar o conteúdo na web. A linguagem possui tags 
 
 
que facilitam o entendimento do desenvolvedor e do browser, além de fornecer 
ferramentas para o css e o javascript fazerem seu trabalho da melhor forma possível 
fazendo com que o site ou aplicação trabalhe de forma leve e funcional. 
4.3.2 CSS3 
CSS, sigla para Cascading Style Sheets, traduzindo Folha de Estilo em 
Cascatas. O CSS é usado juntamente com as linguagens de marcação HTML ou 
XHTML. O CSS separa o conteúdo da representação visual do site, ele define estilos 
para um projeto web utilizando de efeitos de transição, modificando a estrutura da 
aplicação. 
4.3.3 JavaScript 
É uma linguagem de programação que permite a você implementar itens 
complexos em páginas web, ele é responsável por fazer algo a mais do que 
simplesmente mostrar a página com os conteúdos estáticos. Esse dinamismo do 
Javascript o faz ser uma das linguagens mais utilizadas mundialmente, antigamente 
visto como apenas um linguagens front-end, hoje podemos ver aplicações rodando 
também no back-end (usando o Node.js) e também full stack. 
No projeto foi utilizado além do JavasScript puro, foi utilizado a biblioteca 
SockJS que tem como objetivo fornecer um objeto do tipo WebSocket. 
O SockJS oferece uma API Javascript coerente para vários navegadores que 
cria um canal de comunicação full duplex de baixa latência entre o navegador e o 
servidor da web.O SockJS deve funcionar para todos os navegadores modernos e em 
ambientes que não suportam o protocolo WebSocket - por exemplo, por trás de 
proxies corporativos restritivos. 
4.4 Modelagem do sistema 
A modelagem de sistema é um dos processos mais importantes para a criação 
de um projeto de software, é uma maneira de criar modelos abstratos apresentando 
diferentes visões e perspectivas para a concepção de um sistema. Para se modelar 
 
 
um sistema é necessário usar algum tipo de notação gráfica para representá-lo, é a 
notação mais utilizada atualmente é (UML) Unified Modeling Language. 
A Linguagem de modelagem unificada (UML) estabelece uma linguagem visual 
comum no complexo mundo do desenvolvimento de software, sendo também de fácil 
compreendimento por usuários do mundo dos negócios. 
4.4.1 Diagrama de atividades 
O diagrama de atividades é um dos digramas considerados de comportamento, 
isso porque ele tem a função de descrever o que é necessário acontecer no sistema 
modelado. Esse diagrama ajuda a unir as pessoas das áreas de negócios e de 
desenvolvimento de uma organização para entender o processo e o comportamento 
do sistema. 
 
4.4.2 Diagrama de caso de uso 
O diagrama de caso de uso tem como objetivo demonstrar as diferentes 
maneiras que o usuário pode interagir com o sistema. Este diagrama resume os 
detalhes dos usuários da aplicação (chamados de atores) e as interações com o 
sistema, um bom diagrama de caso de uso ajuda a equipe de desenvolvedores a 
Imagem 1 – Diagrama de atividades 
Fonte: Própria, 2021. 
 
 
representar e discutir os cenários em que o sistema interage com as pessoas, o 
escopo do sistema e as metas que a aplicação ajuda os atores a atingir. 
Imagem 2 – Diagrama de caso de uso 
 
4.4.2.1 Especificação do caso de uso 
1. [IN] O usuário informa seu nome; 
2. [OUT] O sistema informa exibirá o chat para o usuário se comunicar com outros 
usuários; 
3. [OUT] (Exceção) caso o usuário não preencha o nome o sistema lançará uma 
mensagem informando que o preenchimento é obrigatório; 
4.4.3 Diagrama de Classes 
Um dos diagramas mais importante para o desenvolvimento de um sistema, o 
diagrama de classes tem o intuito de mapear de forma clara a estrutura de um projeto, 
determinando suas classes, enumerações, atributos e relações entre os objetos. 
Fonte: Própria, 2021. 
 
 
 
5. Projeto (estrutura) do programa 
O projeto consiste em uma aplicação que envia mensagens entre um 
navegador e um servidor WebSocket, usando o sistema de mensagens STOMP com 
Spring para criar um aplicativo web interativo. A seguir a descrição da estrutura do 
programa e o seu funcionamento. 
A classe “WebSocketConfig” é usada para habilitar o servidor WebSocket. 
Implementamos “WebSocketMessageBrokerConfigurer” interface e fornece algumas 
implementações para seus métodos para configurar a conexão do websocket. No 
primeiro método, é registrado um endpoint de websocket que os clientes usarão para 
se conectar ao nosso servidor de websocket.No segundo método, é configurado um 
agente de mensagens que será usado para repassar as mensagens de um cliente 
para outro. Veja o trecho de código a seguir: 
Imagem 3 – Diagrama de classes 
Fonte: Própria, 2021. 
https://en.wikipedia.org/wiki/Streaming_Text_Oriented_Messaging_Protocol
 
 
@Configuration 
@EnableWebSocketMessageBroker 
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { 
@Override 
// registramos um endpoint de websocket que os clientes usarão para se 
conectar ao nosso servidor de websocket. 
public void registerStompEndpoints(StompEndpointRegistry registry) { 
registry.addEndpoint("/ws").withSockJS(); 
} 
@Override 
// configurando um agente de mensagens que será usado para rotear 
mensagens de um cliente para outro. 
public void configureMessageBroker(MessageBrokerRegistry registry) { 
registry.setApplicationDestinationPrefixes("/app"); 
registry.enableSimpleBroker("/topic"); 
} 
} 
As mensagens podem ser passadas por um “@Controller”. O “ChatController” 
é mapeado para lidar com mensagens para o destino “/chat.sendMessage” e também 
adicionar novos clientes ao servidor , como mostra a seguinte codigo: 
 
 
 
As principais funções de conexão quando falamos na parte do cliente são: 
● A função connect() usa o SockJS stomp cliente para se conectar ao /ws ponto 
de extremidade que nós configurado no Spring. Após a conexão bem sucedida,o cliente assina o destino /topic/public e informa o nome do usuário ao servidor, 
enviando uma mensagem ao destino /app/chat.addUser ; 
● A função sendMessage(event) responsável por enviar as mensagens ao 
servidor; 
● A função onMessageReceived() responsável por receber as novas mensagens 
do servidor; 
@Controller 
public class ChatController { 
//Método responsável por repassar as mensagens feitas pelos clientes para 
os outros clientes. 
@MessageMapping ( "/chat.sendMessage" ) 
@SendTo ( "/topic/public" ) 
public ChatMessage sendMessage ( @Payload ChatMessage chatMessage) { 
return chatMessage; 
} 
//Método responsável por adicionar novos clientes na sessão 
@MessageMapping ( "/chat.addUser" ) 
@SendTo ( "/topic/public" ) 
public ChatMessage addUser ( @Payload ChatMessage chatMessage, 
SimpMessageHeaderAccessor headerAccessor) { 
headerAccessor.getSessionAttributes().put( "username" , 
chatMessage.getSender()); 
return chatMessage; 
} 
} 
 
 
O software funciona de maneira simples, o usuário inicia em uma página onde 
estabelece primeiro uma conexão HTTP com o servidor e depois poderá informar o 
nome para fazer a conexão com o servidor de websocket bidirecional, enviando um 
Upgrade cabeçalho. O serviço aceitará mensagens que contenham um nome em uma 
mensagem cujo corpo seja um objeto JSON para fazer essa conexão. Veja a imagem 
da tela inicial a seguir. 
 
A seguir a imagem do header retornado como resposta da requisição. 
 
Ao submeter o formulário o servidor recebe a requisição e retorna como 
resposta o tópico em que o usuário será inscrito e também redireciona o usuário para 
a página correspondente a esse tópico. Veja a imagem da página do chat. 
Imagem 4 – Tela inicial. 
Fonte: Própria, 2021. 
Imagem 5 – Header. 
Fonte: Própria, 2021 . 
 
 
 
Imagem 6 - Página do chat. 
Fonte: Própria, 2021. 
 
 
6. Relatório com as linhas de código 
import org.springframework.context.annotation.Configuration; 
import org.springframework.messaging.simp.config.MessageBrokerRegistry; 
import 
org.springframework.web.socket.config.annotation.EnableWebSocketMessageBro 
ker; 
import org.springframework.web.socket.config.annotation.StompEndpointRegistry; 
import 
org.springframework.web.socket.config.annotation.WebSocketMessageBrokerCon 
figurer; 
@Configuration 
@EnableWebSocketMessageBroker 
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { 
@Override 
// registramos um endpoint de websocket que os clientes usarão para se 
conectar ao nosso servidor de websocket. public void 
registerStompEndpoints(StompEndpointRegistry registry) { 
registry.addEndpoint("/ws").withSockJS(); 
} 
@Override 
// configurando um agente de mensagens que será usado para rotear 
mensagens de um cliente para outro. public void 
configureMessageBroker(MessageBrokerRegistry registry) { 
registry.setApplicationDestinationPrefixes("/app"); 
registry.enableSimpleBroker("/topic"); 
} 
} 
import com.message.demo.entities.ChatMessage; 
import 
org.springframework.messaging.handler.annotation.MessageMapping; 
import org.springframework.messaging.handler.annotation.Payload; import 
org.springframework.messaging.handler.annotation.SendTo; import 
org.springframework.messaging.simp.SimpMessageHeaderAccessor; 
import org.springframework.stereotype.Controller; 
@Controller 
public class ChatController { 
@MessageMapping("/chat.sendMessage") 
@SendTo("/topic/public") // adiciona mensagem ao topico 
public ChatMessage sendMessage(@Payload ChatMessage 
chatMessage) { 
return chatMessage; 
} 
 
 
 
@MessageMapping("/chat.addUser") 
@SendTo("/topic/public") 
public ChatMessage addUser(@Payload ChatMessage chatMessage, 
SimpMessageHeaderAccessor headerAccessor) { 
// Adiciona nome na sessão 
headerAccessor.getSessionAttributes().put("username", 
chatMessage.getSender()); 
return chatMessage; 
} 
} 
// entidade que representa uma ação do usuario 
public class ChatMessage { 
private MessageType type; 
private String content; 
private String sender; 
public enum MessageType { 
CHAT, 
JOIN, 
LEAVE 
} 
public MessageType getType() { 
return type; 
} 
public void setType(MessageType type) { 
this.type = type; 
} 
public String getContent() { 
return content; 
} 
public void setContent(String content) { 
this.content = content; 
} 
public String getSender() { 
return sender; 
} 
public void setSender(String sender) { 
this.sender = sender; 
} 
 
 
} 
 
import org.springframework.boot.SpringApplication; 
import org.springframework.boot.autoconfigure.SpringBootApplication; 
//Responsavel por inicializar o Spring e suas configurações 
@SpringBootApplication public 
class MessageApplication { 
public static void main(String[] args) { 
SpringApplication.run(MessageApplication.class, args); 
} 
} 
 
 
var usernamePage = document.querySelector('#username-page'); 
var chatPage = document.querySelector('#chat-page'); var 
usernameForm = document.querySelector('#usernameForm'); var 
messageForm = document.querySelector('#messageForm'); var 
messageInput = document.querySelector('#message'); var 
messageArea = document.querySelector('#messageArea'); var 
connectingElement = document.querySelector('.connecting'); 
var stompClient = null; 
var username = null; 
var colors = [ 
'#2196F3', '#32c787', '#00BCD4', '#ff5652', 
'#ffc107', '#ff85af', '#FF9800', '#39bbb0' 
]; 
function connect(event) { username = 
document.querySelector('#name').value.trim(); 
if(username) { 
usernamePage.classList.add('hidden'); 
chatPage.classList.remove('hidden'); 
var socket = new SockJS('/ws'); 
stompClient = Stomp.over(socket); 
stompClient.connect({}, onConnected, onError); 
} 
event.preventDefault(); 
} 
//conecta ao servidor function onConnected() { 
stompClient.subscribe('/topic/public', onMessageReceived); 
stompClient.send("/app/chat.addUser", 
 
 
 
{}, 
JSON.stringify({sender: username, type: 'JOIN'}) 
) 
connectingElement.classList.add('hidden'); 
} 
function onError(error) { connectingElement.textContent = 'Could not 
connect to WebSocket server. 
Please refresh this page to try again!'; 
connectingElement.style.color = 'red'; 
} 
//envia nova mensagem 
function sendMessage(event) { 
var messageContent = 
messageInput.value.trim(); if(messageContent && 
stompClient) { var chatMessage = { sender: 
username, content: messageInput.value, 
type: 'CHAT' 
}; 
stompClient.send("/app/chat.sendMessage", {}, 
JSON.stringify(chatMessage)); messageInput.value = ''; 
} 
event.preventDefault(); 
} 
//recebe novas mensagens 
function onMessageReceived(payload) { 
var message = JSON.parse(payload.body); var 
messageElement = document.createElement('li'); 
if(message.type === 'JOIN') { messageElement.classList.add('event-
message'); message.content = message.sender + ' Entrou!'; 
} else if (message.type === 'LEAVE') { 
messageElement.classList.add('event-message'); 
message.content = message.sender + ' Saiu!'; 
} else { messageElement.classList.add('chat-
message'); 
var avatarElement = document.createElement('i'); 
var avatarText = document.createTextNode(message.sender[0]); 
avatarElement.appendChild(avatarText); 
avatarElement.style['background-color'] = getAvatarColor(message.sender); 
messageElement.appendChild(avatarElement); 
 
 
 
var usernameElement = document.createElement('span'); var 
usernameText = document.createTextNode(message.sender); 
usernameElement.appendChild(usernameText); 
messageElement.appendChild(usernameElement); 
} 
var textElement = document.createElement('p'); 
var messageText = document.createTextNode(message.content); 
textElement.appendChild(messageText); 
messageElement.appendChild(textElement); 
messageArea.appendChild(messageElement); 
messageArea.scrollTop = messageArea.scrollHeight; 
} 
function getAvatarColor(messageSender) { 
var hash = 0; 
for (var i = 0; i < messageSender.length;i++) { hash 
= 31 * hash + messageSender.charCodeAt(i); 
} 
var index = Math.abs(hash % colors.length); 
return colors[index]; 
} 
usernameForm.addEventListener('submit', connect, true) 
messageForm.addEventListener('submit', sendMessage, true) 
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0"> 
<title>Chat</title> 
<link rel="stylesheet" href="/css/main.css" /> 
</head> 
<body> 
<noscript> 
<h2>Sorry! Your browser doesn't support Javascript</h2> 
</noscript> 
<div id="username-page"> 
<div class="username-page-container"> 
<h1 class="title">Digite seu nome</h1> 
<form id="usernameForm" name="usernameForm"> 
<div class="form-group"> 
 
 
 
<input type="text" id="name" placeholder="nome" autocomplete="off" 
class="form-control" /> 
</div> 
<div class="form-group"> 
<button type="submit" class="accent username-submit">Entrar</button> 
</div> 
</form> 
</div> 
</div> 
<div id="chat-page" class="hidden"> 
<div class="chat-container"> 
<div class="chat-header"> 
<h2>Chat</h2> 
</div> 
<div class="connecting"> 
Connecting... 
</div> 
<ul id="messageArea"> 
</ul> 
<form id="messageForm" name="messageForm"> 
<div class="form-group"> 
<div class="input-group clearfix"> 
<input type="text" id="message" placeholder="Digite uma 
mensagem..." autocomplete="off" class="form-control"/> 
<button type="submit" class="primary">Enviar</button> 
</div> 
</div> 
</form> 
</div> 
</div> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script 
> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script> 
<script src="/js/main.js"></script> 
</body> 
</html> 
7. Referências: 
 
 
● https://smallbusiness.chron.com/block-undesired-skype-messages-51046.html 
● COMER, Douglas E.. Internet Working with TCP/IP. 4a. Ed. Prentice Hall, 2000. 
● FOROUZAN, Behrouz A. Comunicação de dados e redes de computadores. 
3a. ed. Porto Alegre: Bookman, 2006. 
● STALLINGS, William. Data and computer communications. 8a. ed. Upper 
Saddle River, NJ : Prentice Hall, 2006. 
● STALLINGS, William. Redes e sistemas de comunicação de dados. 5ª. ed. 
Rio de Janeiro: Elsevier, 2005. 
https://smallbusiness.chron.com/block-undesired-skype-messages-51046.html
https://smallbusiness.chron.com/block-undesired-skype-messages-51046.html
 
 
 
NOME: João Paulo Soares de Brito TURMA: CC6P30 RA: D9642A5 
CURSO: Ciência da Computação CAMPUS: Brasília SEMESTRE: 6 TURNO: Noturno 
CÓDIGO DA ATIVIDADE: 77B2 SEMESTRE: 6 ANO GRADE: 2021/1 
 HORAS 
DATA DA 
ATIVIDADE 
DESCRIÇÃO DA ATIVIDADE 
TOTAL DE 
HORAS 
ASSINATURA DO ALUNO ATRIBUÍDAS 
(1) 
ASSINATURA DO 
PROFESSOR 
04/03/2021 Estudo e pesquisa 5h 
11/03/2021 Reunir para desenvolver o trabalho 2h 
18/03/2021 Escolha do tema 4h 
10/04/2021 
Pesquisa sobre as principais técnicas de comunicação 
de dados em rede 6h 
 
19/04/2021 Escolha dos algoritmos adotados no projeto 9h 
22/04/2021 Criação do diagrama de classe e avaliação do projeto 10h 
26/04/2021 Desenvolvimento do código em java 18h 
27/04/2021 Desenvolvimento do código em javaScript 22h 
13/05/2021 Formatação do trabalho em ABNT 7h 
20/05/2021 Finalização 2h