Criando um chat app com Android + Node.js
Graduado em Ciência da Computação
Pós-graduado em Computação Móvel
Suporte, dev, analista, gerente...
11 anos trabalhando com software
- 10 anos com Java e C#
- 5 anos com Android
- desde 2016 com Node.js
Node.js
Socket.io
Android
Referências
DúvidasCronograma
Node.js
Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/
+
Fonte: https://github.com/libuv/libuv e https://developers.google.com/v8/
Fonte: http://www.dotnetcurry.com/nodejs/1143/nodejs-tutorial-series-beginner-experienced-developer
Font
e:ht
tps:
//ww
w.te
chem
pow
er.c
om/b
ench
mar
ks/#
sect
ion=
data
-r13
&hw
=ph&
test
=pla
inte
xt
Fonte: http://www.luiztools.com.br/post/por-que-aprender-nodejs/
Node.js
"...Node.js uses an event-driven, non-blocking I/O model...""...Node is designed to build scalable network applications..."
Cenários de Usos:- APIs e serviços;
- bots e automação;
- mensageria;
- aplicações real-time e colaboração;
- backend de games;
- IoT;
Fonte: https://nodejs.org/en/about/
Node.js
Onde baixo?http://nodejs.org
Como verifico se está funcionando?node
node -v
sudo npm -g express-generator
O que mais vou precisar?Visual Studio Code: https://code.visualstudio.com/download
Node.js
Criando um projeto Express:C:\nodejs> express -e --git chatapi
Executando um projeto Express:C:\nodejs\chatapi> npm start
Acessando um projeto Express:http://localhost:3000
Node.js
Criando a view chat.ejs:<!doctype html>
<html>
<body>
<form action="">
<input id="m" /><button>Send</button>
</form>
<ul id="messages"></ul>
<script src="/javascripts/jquery-3.2.1.min.js"></script>
</body>
</html>
Node.js
Configurando a rota /chat:
router.get('/chat', function(req, res){
res.render('chat', {});
});
Socket.io
Fonte: https://pt.wikipedia.org/wiki/WebSocket
WebSocket é uma tecnologia que permite a comunicação bidirecional por canais full-duplex sobre um único soquete TCP. A API WebSocket é
padronizada pela W3C e o protocolo pela IETF.
Socket.io
Instalando a dependência:$ npm install -S socket.io
Configurando o servidor em bin/www:var io = require('socket.io')(server);
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
Socket.io
Configurando o cliente web:<script src="/socket.io/socket.io.js"></script>
<script src="/javascripts/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
Android
Android
O que vou precisar?Android Studio:
https://developer.android.com/studio/index.html?hl=pt-br
Android 4.0.3
Android
Customizando layout_main.xml: <ListView android:id="@+id/mensagens"
android:layout_width="0dp"
android:layout_height="0dp"></ListView>
<EditText android:id="@+id/txtMensagem"
android:hint="Digite sua mensagem"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<Button android:id="@+id/btnEnviar"
android:text="Enviar"
android:onClick="btnEnviarOnClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Android
Customizando MainActivity.java:
//declarando variáveis locais
EditText txtMensagem = null;
ListView mensagens = null;
ArrayAdapter<String> adapter = null;
Android
Customizando MainActivity.java:
// no onCreate
txtMensagem = (EditText)findViewById(R.id.txtMensagem);
mensagens = (ListView)findViewById(R.id.mensagens);
adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1);
mensagens.setAdapter(adapter);
Android
Customizando MainActivity.java:
//novo método
public void btnEnviarOnClick(View v){
adapter.add(txtMensagem.getText().toString());
adapter.notifyDataSetChanged();
mensagens.smoothScrollToPosition(adapter.getCount() - 1);
}
Android
Customizando build.gradle:
dependencies {
...
compile 'io.socket:socket.io-client:+'
}
Android
Customizando AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET"
/>
Android
Customizando MainActivity.java:
//nova variável local
Socket socket = null;
//novo método
public void waitMessage(){
// a seguir
}
//chamada no onCreate
waitMessage();
Android
Customizando MainActivity.java://waitMessage
socket = IO.socket("http://10.0.2.2:3000");
socket.on("chat message", new Emitter.Listener() {
@Override
public void call(final Object... args) {
MainActivity.this.runOnUiThread(new Runnable() {
@Override
public void run() { adapter.add(args[0].toString()); }
});
}
});
socket.connect();
Android
Customizando MainActivity.java:
//alterando método
public void btnEnviarOnClick(View v){
socket.emit("chat message", txtMensagem.getText().toString());
}
Android
Customizando MainActivity.java:
@Override
protected void onDestroy() {
super.onDestroy();
if (socket != null) socket.disconnect();
}
Referências
Dúvidas?
Obrigado!
Top Related