aula8 (1)

Prévia do material em texto

8ºAula
Implementação III
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
• construir o lado do servidor e do cliente de um chat.
Olá, 
Esta é a última aula da disciplina Programação para 
Dispositivos Móveis. Na aula anterior, uma aplicação 
com armazenamento local e remoto foi exemplificada, 
demonstrando a facilidade de manutenção em aplicações, cuja 
lógica de interface fica separada da lógica de gerenciamento de 
dados.
Para encerrar nossa disciplina, será criada uma aplicação 
que se conectará a um servidor broadcast através do socket.
Bons estudos!
48Programação para Dispositivos Móveis
Seções de estudo
1– Módulo socket.io Lado do Servidor
2– Módulo socket.io Lado do Cliente
1- Módulo socket.io Lado do Servidor
Aplicações que trocam informações em tempo real 
estão cada vez mais presentes no cotidiano, sejam trocas de 
mensagens simples como chats ou em trocas de dados mais 
complexos como nos jogos on-line.
A forma de se conseguir criar uma aplicação com essas 
características é utilizando os Sockets, com ele é possível criar 
uma comunicação baseada em eventos, bidirecional, e em 
tempo real.
Para funcionar corretamente duas abordagens devem 
ser desenvolvidas, representadas na Figura 1, o lado do 
servidor que funcionará como um broadcast que retransmite 
a mensagem enviada por um cliente para todos os outros, e 
o lado do cliente que envia e recebe mensagens do servidor.
 
 
Figura 1 – Funcionamento servidor broadcast. Fonte: Acervo pessoal.
O lado do servidor será desenvolvido em Node.js 
utilizando os módulos express e Socket.io, o primeiro é 
responsável por criar o servidor HTTP. Os módulos devem 
ser instalados e importados dentro do arquivo do servidor.
npm install socket.io --save
npm install express --save
const express = require(“express”);
const http = require(“http”);
const socketIo = require(“socket.
io”);
Deve-se então defi nir a porta que será escutada pelo 
servidor, executar todas as funções para criação do servidor 
http e socket, e colocar o servidor para escutar a porta 
escolhida.
const port = process.env.PORT || 
5000;
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
server.listen(port, () => console.
log(`Listening on port ${port}`));
O módulo socket.io é baseado em eventos, o primeiro 
evento que pode acontecer com o socket (variável io no 
código acima) é o de conexão (connection);
io.on(“connection”, socket => {
 console.log(“a user connected :D”);
});
O resultado dessa conexão é o objeto socket que contém 
as informações da ligação entre o cliente e servidor. A partir 
desse objeto podem ser criadas as funções que escutaram os 
eventos que receberam as mensagens. O código abaixo será 
criado dentro da função quando o cliente se conectar ao 
servidor.
socket.on(“message”, msg => {
 console.log(msg);
 });
Nesse exemplo, quando o cliente enviar uma mensagem 
com a chave “message” essa função é então executada. 
Quando é necessário enviar uma mensagem para todos 
os clientes conectados o objeto io deve passar a chave que o 
cliente irá tratar seguido da mensagem que será enviada.
io.emit(“message”, msg);
Essa função envia para todos os clientes, se o servidor 
for retransmitir a mensagem de um cliente ela, nesse caso, 
irá também para o próprio cliente que enviou. Para enviar a 
mensagem somente para os outros clientes pode-se utilizar a 
função abaixo, dentro de uma conexão específi ca.
socket.broadcast.emit(“message”, 
msg);
Na documentação do módulo é possível encontrar todas 
as funções que podem ser utilizadas.
O código completo para um servidor broadcast é bem 
simples e pode ser executado localmente no Node.js ou 
utilizar algum servidor (Heroku por exemplo) para subir seu 
código.
const express = require(“express”);
const http = require(“http”);
const socketIo = require(“socket.
io”);
const port = process.env.PORT || 
5000;
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
server.listen(port, () => console.
log(`Listening on port ${port}`));
io.on(“connection”, socket => {
49
 console.log(“Usuário conectado!”);
 socket.on(“message”, msg => {
 console.log(msg);
 io.emit(“message”, msg);
 });
});
2- Módulo socket.io Lado do Cliente
Com o servidor desenvolvido e rodando, agora é preciso 
criar o lado do cliente. Utilizando o template básico do React 
Native a primeira coisa a se fazer é instalar e importar o 
módulo socket.io-client.
npm install socket.io-client
import io from “socket.io-client”;
Para iniciar a conexão com o servidor através do módulo 
socket, deve se passar para o objeto io o endereço da máquina 
em que o servidor http + websocket está rodando.
const ENDPOINT = 
“http://192.168.25.4:5000”;
const socket = io(ENDPOINT);
A interface com o usuário contará com uma InputText 
que onde a mensagem será digitada, dois botões: um para 
enviar a mensagem para o servidor e outro para limpar as 
mensagens que já foram recebidas e as mensagens em si. Tanto 
a mensagem digitada na caixa de texto quanto as mensagens 
recebidas serão armazenadas nos estados do React Native.
const [message, setMessage] = 
useState(“”);
 const [messages, setMessages] = 
useState([]);
Para receber as mensagens dentro do useEffect que 
nesse caso será executado somente uma vez (no início da 
execução do app) através do módulo socket as mensagens que 
são recebidas são incluídas no array do estado das mensagens.
useEffect(() => {
 socket.on(“chat message”, message 
=> {
 setMessages(oldArray => [...
oldArray, { id: new Date().getTime(), 
message: message }]);
 });
 }, []);
As mensagens serão mapeadas para serem exibidas 
sempre que forem recebidas, já que, ao chegar a mensagem, 
irá atualizar o estado das mensagens e consequentemente a 
renderização da interface será chamada novamente.
 menssages.map(message => { return 
<Text style={styles.messageText} 
key={message.id}>{message.message}</
Text> })}
Os eventos dos botões e do textInput são tratados pelas 
funções handleButtonSendPress, handleButtonErasePress e 
handleChangeText. Na primeira, quando o botão de enviar 
é pressionado a mensagem é enviada através do socket e o 
conteúdo do textInput é limpo. No segundo, o estado das 
mensagens recebidas é setado com um array vazio, para que 
as mensagens sejam “apagadas”. E no último o estado da 
mensagem é alterado sempre que o texto do input for alterado.
function handleButtonSendPress() {
 socket.emit(‘chat message’, 
message);
 setMessage(“”);
 };
 function handleButtonErasePress() 
{
 setMessages([]);
 };
 function 
handleChangeText(chatMessage){
 setMessage(chatMessage);
 }
A interface com o usuário e os estilos são apresentados 
abaixo, que irão renderizar a tela da Figura 2.
return (
 <View style={styles.container}>
 <StatusBar style=”light” />
 <TextInput
 style={{ marginTop: 50, 
marginLeft: 30, marginRight: 30, height: 
40, borderWidth: 2, backgroundColor: 
“white” }}
 autoCorrect={false}
 value={message}
 onChangeText={handleChangeText}
 />
 <View style={styles.
buttonsContainer}>
 <TouchableOpacity 
s t y l e = { s t y l e s . b u t t o n } 
onPress={handleButtonSendPress}>
 <Text style={styles.
buttonText}>Enviar</Text>
 </TouchableOpacity>
 <TouchableOpacity 
s t y l e = { s t y l e s . b u t t o n } 
onPress={handleButtonErasePress}>
 <Text style={styles.
buttonText}>Limpar</Text>
 </TouchableOpacity>
 </View>
 {messages.map(message => { 
return <Text style={styles.messageText} 
key={message.id}>{message.message}</
Text> })}
 </View>
 );
const styles = StyleSheet.create({
50Programação para Dispositivos Móveis
 container: {
 height: 400,
 fl ex: 1,
 backgroundColor: ‘#ccc’,
 alignContent: ‘center’
 },
 buttonsContainer: {
 fl exDirection: ‘row-reverse’,
 borderBottomWidth: 1,
 borderBottomColor:‘#CCC’,
 paddingBottom: 10,
 marginLeft: 30,
 marginTop: 10
 },
 button: {
 marginLeft: 10,
 height: 60,
 backgroundColor: ‘#036FFC’,
 borderRadius: 10,
 paddingHorizontal: 24,
 fontSize: 16,
 alignItems: ‘center’,
 justifyContent: ‘center’,
 elevation: 20,
 shadowOpacity: 20,
 shadowColor: ‘#ccc’,
 },
 buttonText: {
 color: ‘#fff’,
 fontWeight: ‘bold’,
 },
 messageText: {
 padding: 10,
 marginTop: 10,
 marginLeft: 30,
 marginRight: 30,
 fontSize: 16,
 backgroundColor: ‘#FFF’,
 borderRadius: 10
 }
});
Figura 2 – Aplicativo Chat.Fonte: Acervo pessoal.
Da maneira como foi desenvolvido, a aplicação envia a 
mensagem para o servidor, que retorna para todos os clientes 
(inclusive quem enviou), quando essa mensagem é recebida 
de volta, ela é então incluída em um array que mapeia e exibe 
as mensagens que vieram do servidor.
E assim encerramos nossas aulas, com uma aplicação 
prática de um chat com React Native.
Chegamos ao fi nal da oitava e última aula. Vamos 
recordar?
Retomando a aula
1– Módulo socket.io Lado do Servidor
Na seção 1 foi exemplifi cada a criação do lado do servidor 
utilizando o socket.io, esse servidor funciona em broadcast 
o que signifi ca que toda mensagem que ele receber será 
reenviada para todos os clientes que estiverem conectados. 
2– Módulo socket.io Lado do Cliente
Na última seção foi demonstrado desde a lógica por trás 
da comunicação (recebimento e envio de mensagens) até a 
interface e estilos da aplicação.
KRISS. In: Buiding Chat App with React Native 
and Socket.io, 2019. Disponível em: https://kriss.
io/buiding-chat-app-with-react-native-and-socketio-
cjzi03e3e005bdes19yy89z7d/. Acesso em: 26 jun. 2020.
GAGLIARDI, V. In: Socket.IO, React and Node.
js: Going Real-Time, 2020. Disponível em: https://www.
valentinog.com/blog/socket-react/. Acesso em: 26 jun. 
2020.
Vale a pena acessar
PINHO, D. M.; ESCUDELARIO, B. React Native 
Desenvolvimento de aplicativos mobile com React. Editora Casa do 
Código, São Paulo, 2020.
EISENMAN, B. Learning React Native: Building Native 
Mobile Apps with JavaScript. O’Reilly Media, 2015.
BODUCH, A. React and React Native. Packt Publishing, 
2017.
LEBENSOLD, J. React Native Cookbook: Bringing the 
Web to Native Platforms. O’Reilly Media, 2018.
Vale a pena ler
Vale a pena
51
Referências
BODUCH, A. React and React Native. Packt Publishing, 
2017.
EISENMAN, B. Learning React Native: Building Native 
Mobile Apps with JavaScript. O’Reilly Media, 2015.
LEBENSOLD, J. React Native Cookbook: Bringing the 
Web to Native Platforms. O’Reilly Media, 2018.
PINHO, D. M.; ESCUDELARIO, B. React Native 
Desenvolvimento de aplicativos mobile com React. Editora Casa do 
Código, São Paulo, 2020.
Minhas anotações