View
554
Download
3
Category
Preview:
DESCRIPTION
Usando websockets para se comunicar em tempo real entre o navegador e o Android. Por que iríamos querer fazer isso? Uma vez tendo um backend em tempo real pode ser reutilizado para todas as plataformas, mantendo a arquitectura simples, podendo assim adicionar um cliente nativo para um serviço de web existente que já usa websockets, sem ter que mudar coisas no backend. Se tudo der certo controlamos um objeto no navegador pelo smartphone.
Citation preview
Encontros Comunitários GU
Mobile-RS Websockets e Android
Apoio:
jacksonfdam
http://about.me/jacksonfdamhttps://bitbucket.org/jacksonfdamhttps://github.com/jacksonfdamhttp://linkedin.com/in/jacksonfdam@jacksonfdam
GU Mobile RS
Somos um grupo destinado a compartilhar e promover encontros de desenvolvedores mobile no Rio Grande do Sul.
EventosColaboramos para eventos de desenvolvimento.
OficínasRealizamos encontros para por em prática o desenvolvimento de aplicativos móveis em diversas plataformas.
Aplicações real-time
Quando se fala de aplicações real-time, estamos técnicamente falando de conexões bi-direcionais, que na prática, é uma conexão que se mantem aberta (keep-alive) para que os clientes interajam com o servidor em uma única conexão aberta. A grande vantagem disso é de não precisar mais das requisições assíncronas (AJAX) para simular uma “ação quase real-time”, digo quase pois AJAX não é uma conexão bi-direcional capaz de se manter aberta até o término de seu processamento.
Realtime App
• Chat• Stream de atividades• Notificações• Colaboração• Jogos multiplayer• Dados em tempo real• Dashboards• Experiências 2 telas
CometComet é um modelo de aplicação web que tem como principal característica a utilização de uma ligação persistente HTTP que permite ao servidor transmitir dados para o cliente sem que exista um pedido explícito.
Esta técnica é chamada de Tecnologia Push.
O termo Comet representa um grupo de recursos e técnicas utilizados para a interação bilateral.
Fonte:http://en.wikipedia.org/wiki/Comet_%28programming%29
Websockets
É uma tecnologia que permite a comunicação bidirecional por canais full-duplex sobre um único soquete (TCP).
SuporteTodos os browsers mais atuais com exceção do browser Android suportam a ultima especificação do protocolo.• Internet Explorer
10+• Mozilla Firefox 4+• Safari 5+• Google Chrome 4+• Opera 11+
WebSocket Protocol Handshake
Enquanto o protocolo WebSocket em si é desconhecido dos servidores proxy e firewalls, ele possui um handshake HTTP compatível para que os servidores HTTP possam compartilhar seu padrão HTTP e HTTPS portas (80 e 443) com um gateway ou servidor WebSocket.
O protocolo WebSocket define um ws:// e wss:// prefixo para indicar um WebSocket e uma conexão segura WebSocket, respectivamente.
WebSocket Protocol Handshake
Client request
GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13Origin: http://example.com
Server response
HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chat
WebSocket Protocol Handshake
Uma vez que a conexão é estabelecida entre o cliente e o servidor, podemos enviar dados ou estruturas de texto em ambas as direções no modo full-duplex.
WebSocket Example
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
Sintaxe Javascript
WebSocket Example
exampleSocket.onopen = function (event) { exampleSocket.send("Here's some text that the server is urgently awaiting!"); };
Sintaxe Javascript
WebSocket Example
exampleSocket.onmessage = function (event) { console.log(event.data);}
Sintaxe Javascript
E agora?
NODE.JSWTF? Conhecendo a tecnologia
Node.js
Node.js se tornou popular devido a sua facilidade em trabalhar com real-time, simplesmente por que o protocolo WebSockets (Protocolo do HTML5 para conexões bi-direcionais) utiliza-se Javascript também.
• Orientado a eventos• Lado do servidor • JS não bloqueante
Mais em: http://udgwebdev.com/nodejs-para-leigos-introducao/
Node.js
Google V8 Motor• Engine JS Open source do Google (usado no
Google Chrome)• Sem JIT (Just-In-Time), todos JS compilado para
assembler• Otimizações como inlining, elisão de propriedades
em tempo de execução ... • Garbage Collector implementado / melhorado
http://en.wikipedia.org/wiki/Inlininghttp://en.wikipedia.org/wiki/V8_(JavaScript_engine)http://en.wikipedia.org/wiki/Copy_elision
Node.js
CommonJS • Conjunto de especificações para JS fora do
navegador • Node.js implementa algumas especificações
– ex. módulos • Deve haver uma função chamada require• Deve haver uma var chamada exports
Node.js
Módulos • O Node.js fornece alguns módulos principais como
o http, tcp, fs, sys... – procurará o módulo na pasta node_modules
hierarquicamente– se não for encontrado, vai olhar nos caminhos descritos
no NODE_PATH
var http = require ('http');
Node.js
Exemplo de Módulo
var PI = Math.PI; exports.area = function (r) {
return PI * r * r; }; exports.circumference = function (r) { return 2 * PI * r; };
Exemplo de definição em meuModulo.js
var meuModulo = require(‘./meuModulo .js’);
Include do meuModulo.js em outro arquivo
Node.js
Gerenciamento de Dependências
• Node packet manager (npm) • express (rotas)• socket.io (websockets)• ..
Node.js
Package.json
{ "name": ”Fisl 15 Chat", "version": "1.0.0", "description": "Real time chat com Android", "author": ”Jackson F. de A. Mafra", "scripts": { "start": "node app.js" }, "dependencies": { "socket.io": "latest", "express": "latest", "jade": "latest" } }
npm install
Node.js
Webserver em Node.JS
var http = require('http'); http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World, Wellcome to FISL15\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');
node app.js Server running at http://127.0.0.1:1337/
Node.js
Express.js
Uma web framework para node.js inspirada em sinatra
var express = require('express'); var app = express(); app.get('/', function(req, res){
res.send('Hello World'); }); app.listen(3000);
Node.js
Socket.io
É uma camada de abstração para WebSockets com fallback para : • Flash socket• AJAX Long-polling• AJAX multi-part streaming• JSONP polling• iFrame
Node.js
Manipulação Eventos
io.sockets.on('connection', function(socket) {}); //initial connection from client
socket.on('message', function(message) {}) //message handler triggered when message is received
socket.on('disconnect', function() {}) //triggered when socket disconnects
socket.on('custom_event', function(data) {}) //event handler for custom event
Node.js
Enviando Mensagens
messages socket.send(JSON.stringify({user:’jackson', message: 'Welcome to Fisl15'}) ); //sends a message to the connected client
socket.broadcast.send(JSON.stringify({user:’jackson', message: 'Welcome to Fisl15'}) ); //sends a message to all clients except the owner of the socket
Node.js
Emitindo Eventos
socket.emit('user:join', {name: ’jackson'}); //triggers a custom event
socket.broadcast.emit('user:joined', data); //sends a message to all clients except the owner of the socket
Node.js
Anexar informações ao socket
socket.set('nickname', data.name, <optional_callback>);
ANDROIDPreparando o aplicativo cliente
Injeção de Dependência
Injeção de dependência é um padrão de projeto de software que permite a remoção de dependências hard-coded e torna possível para mudá-los, seja em tempo de execução ou em tempo de compilação. [Fonte: Wikipedia]
http://en.wikipedia.org/wiki/Dependency_injection
Injeção de Dependência
A Injeção de Dependências (também conhecida como Inversão de Controle) está presente em diversos frameworks populares como Spring ou Google Guice. Porém, estes últimos foram desenvolvidos pensando na JVM e não em ambientes móveis como o Android. Enquanto o RoboGuice procura melhorar a usabilidade do Guice no Android, o Dagger segue uma abordagem diferente, concentrando-se em funcionalidades simplificadas e melhor desempenho.
http://www.infoq.com/br/news/2012/10/dagger-injecao-android
Injeção de dependência
Injeção de Classes
Dagger
Injeção de views
Butter Knife
Universal
RoboGuiceAndroid Annotations (AA)
Mais em: http://java.dzone.com/articles/how-become-lazy-productive
Criando o projeto
O cliente de chat Android deve ser capaz de enviar e receber mensagens a partir de uma sala de bate-papo.
Inicie o Android Studio e crie um novo projeto chamado FislChat com o package io.github.gumobilers.fislchatCriar uma atividade em branco chamado ChatActivity
Definindo o layout
O fragmento irá conter o layout da nossa aplicação de chat. Abra o fragment_chat.xml (ou o nome que você deu para o layout) e defina:
• Uma ListView que conterá as mensagens de bate-papo (dica: android: stackFromBottom = "true" android: transcriptMode = "alwaysScroll" pode ajudá-lo)
• Um EditText para escrever a mensagem que deseja enviar para a sala de bate-papo
• Um botão para enviar a mensagem• Execute o aplicativo e ver que você começa o layout
desejado
Adicionando o RoboGuice
A instalação do RoboGuice requer que você baixe os seguintes arquivos JAR e adicioná-los ao seu classpath.
http://repo1.maven.org/maven2/org/roboguice/roboguice/2.0/roboguice-2.0.jarhttp://repo1.maven.org/maven2/com/google/inject/guice/3.0/guice-3.0-no_aop.jarhttp://repo1.maven.org/maven2/com/google/code/findbugs/jsr305/1.3.9/jsr305-1.3.9.jar
RoboGuice: Dependency Injection for Android - Michael Burtonhttps://www.youtube.com/watch?v=6wU2vwwiwPE
Adicionando o RoboGuice
Para utilizar RoboGuice para a injeção de dependência, é preciso adicioná-lo como uma dependência do projeto. • Abra o arquivo gradle.build e adicionar a dependência RoboGuice
sob o elemento dependências .• compile 'org.roboguice: roboguice: 3.0b-experimental’ • Certifique-se de que RoboGuice aparece em suas bibliotecas
externas • Nossos componentes Android precisará estender classes específicas
RoboGuice ter DI no lugar. • Edite seu fragmento e estendem-se desde RoboFragment • Edite você Atividade e estendem-se desde RoboFragmentActivity
Huston we have a problem!
Em caso de problemas:No Android Studio clique no botão Sync Project with Gradle File, deixe o AVD Manager fazer o trabalho. Sem restart, sem ./gradlew clean ou ./gradlew build.
Tambem pode ir em Tools-->Android-->Sync Project with Gradle File.
Injetando dependências
Para interagir com os componentes de layout, vamos usar a injeção dependência RoboGuice
• Adicionar um campo privado do tipo ListView e anotá-lo com @InjectView para obter uma referência da lista declarados (ex: @InjectView (R.id.messageList) private mMessageList ListView;)
• Adicionar um campo privado do tipo EditText e anotá-lo com @InjectView para obter a referência da entrada de texto declarado.
• Adicionar um campo privado do tipo Button e anotá-lo com @InjectView para obter a referência do botão declarado.
Adicionando a lógica
A injeção acontece durante o método onViewCreated em seu fragmento, de forma a garantir que as dependências já foram injetadas estaremos interagindo com eles no mesmo ponto.
1. Sobrescrever o método onViewCreated:
@Override public void onViewCreated(View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); }
1. De forma a interagir com o elemento da lista, é preciso fornecer um adaptador. 2. Vamos adicionar um simples ArrayAdapter de String para agora:
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1);mMessageList.setAdapter(adapter);
Injetando um serviço de sistema
Vamos agora fazer o nosso telefone vibrar quando enviar uma mensagem.
Adicionar a permissão Vibrar em seu AndroidManifest.xml
<uses-permission android:name="android.permission.VIBRATE" />
Adicionar um campo particular do tipo Vibrator em seu fragmento e anotá-lo com a JSR-330 anotação @Inject.
Adicionar a lógica para vibrar 1000 milissegundos quando o envio da mensagem
NODE.JSConstruindo o servidor com Node.js e Socket.io
Criando o projeto Node.js
Para ter a estrutura do projeto, vamos contar com o express.js (semelhante ao sinatra). Instale expressar globalmente com o seguinte comando:
npm install –g express
Agora vamos criar um aplicativo baseado expressa chamado fislchat
express fislchat
Criando o projeto Node.js
A seguinte estrutura será criada
create : fislchat create : fislchat/package.json create : fislchat/app.js create : fislchat/public create : fislchat/views create : fislchat/views/layout.jade create : fislchat/views/index.jade create : fislchat/public/images create : fislchat/routes create : fislchat/routes/index.js create : fislchat/routes/user.js create : fislchat/public/stylesheets create : fislchat/public/stylesheets/style.css create : fislchat/public/javascripts
Criando o projeto Node.js
Observe que um arquivo chamado package.json contendo as dependências foi criado. Execute npm install para adicioná-las ao projeto (verifique que a pasta node_modules é criada e contém as dependências).
O app.js é o ponto de entrada para o nosso aplicativo, ele importa os módulos necessários, define algumas rotas e cria o servidor http. Abra e dê uma olhada nisso. Isso deve ser o suficiente para começar a nossa aplicação.
Executar node app ou npm start para iniciar o aplicativo. Verifique se digitando 'http://localhost:3000/' no seu navegador lhe dá a página de boas-vindas.
Adicionando o Socket.io
Até agora, você deve estar familiarizado com packages.json. De forma que para adicionar o suporte ao Socket.io precisamos defini-lo como uma dependência de tal arquivo, abra-o e adicione: "socket.io": "~ 0.9.16".
Execute npm install novamente para buscar a dependência.
Vamos agora criar um módulo que irá encapsular a lógica do socket.io. Crie um arquivo chamado socket.js dentro da pasta rotas.
Este módulo irá usar a dependência socket.io já definida. Importe no módulo :
var socketio = require ('socket.io');
Adicionando o Socket.io
Os módulos contêm lógica privada para a próprio módulo, que encapsulam a lógica, mas lembre-se que eles também podem expô-la usando a convenção CommonJS (com exportações das variáveis). Vamos expor uma função chamada initialize então podemos inicializá-la a partir de outro módulo:
exports.initialize = function(server) { io = socketio.listen(server);}
Nós adicionamos um parâmetro de servidor (este será o servidor http já criado no arquivo app.js) e nós inicializamos socketio, a fim de começar a aceitar conexões. Agora é hora de usar o nosso módulo.
Usando nosso módulo Socket.io
var server = http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port'));});
Abra a app.js e adicione o módulo que acabamos de criar
var io = require (’./routes /socket.js.').
Lembre-se que nós expomos a função initialize esperando um servidor http como parâmetro. Se você rolar no final do arquivo, você vai ver como o servidor http é criado (por padrão escutar no porto 3000).
Permite obter uma referência nesse servidor para que possamos passá-lo para o módulo
Usando nosso módulo Socket.io Agora você pode chamar a função initialize, passando o parâmetro do servidor:
io.initialize (server);
Inicie o aplicativo novamente (app nó) e verificar se você ver algo como
info - socket.io
iniciada no console.
Manipulação de eventos
Agora temos o app já ouvindo as conexões WebSocket , mas precisamos lidar com os eventos ( nova conexão, desconexão , mensagens ...) . Vamos adicionar um listener de conexão dentro do método initialize :io.sockets.on('connection', function(socket) { // All your handlers here, socket will be the connected client});
Manipulação de eventos
Fornecer um handler para o evento 'user : setname ‘.
Este será acionado pelo cliente logo após a conectar. ( Dica : . Lembre socket.on ( 'event' , function ( data) { })
A mensagem recebida será algo semelhante a { ' nickname': ' jackson'} .
Defina o valor para a sessão de socket para que possamos lembrar o nome do usuário e não forçá-lo a ser enviar toda vez ( dica: use socket.set ) .
Transmita uma mensagem como { ‘mensagem: ' jackson entrou !’ } para todos os usuários conectados .
Manipulação de eventos
Forneça um handler para o evento 'user : mensagem’.
Este evento será acionado quando um usuário envia uma mensagem para o chat.
Os dados será um JSON semelhante a este: {' mensagem ': ' Olá '} .
Transmita a mensagem para todos os outros clientes que adicionaram o apelido para ele ( dica: use socket.get(var, function (err, nickname) {}) )
para obter o apelido previamente armazenado ) .
A mensagem resultante deve ser como :{' mensagem ': ' Olá ', ' apelido ': ' jackson'}
Manipulação de eventos
BÔNUS:
Guarde os nomes de usuário em um array var users = []; , armazenar o nome quando se conectar e remova-o quando ele se desconectar.
ANDROIDComunicando o cliente com o socket.io
Incluindo Dependências
Não há nenhum suporte para Socket.io no Android , mas vamos adicionar uma biblioteca a partir de um repositório Maven. Abra o arquivo build.gradle e adicione o seguinte repositório sob o elemento repositórios:
repositories { mavenCentral() maven { url "http://audiobox.keytwo.net" }}
Vamos adicionar agora as duas dependências que requerem
compile 'io.socket:socket.io-client:0.2.1'compile 'com.squareup:otto:1.3.4'
Socket-io: https://github.com/fatshotty/socket.io-java-clientOtto: https://github.com/square/otto
Criando o serviço
De forma a manter a conexão em segundo plano, vamos criar um serviço que irá gerenciar nossos WebSockets. Crie uma classe chamada ChatService que estenda RoboService.
Adicione a definição de serviço no arquivo AndroidManifest.xml, para conhecimento da aplicação: <service android:name=".ChatService" />
Agora que temos o serviço, nós vamos ter que iniciá-lo. Um bom lugar para iniciá-lo, seria de uma classe de aplicação(Application).
Criar e uma classe chamada ChatApplication e inicie o serviço no método onCreate. Você deve ter algo semelhante a isto:
Criando o serviço
public class ChatApplication extends Application {
@Override public void onCreate() { super.onCreate();
// Start the service here } }
Volte para o arquivo AndroidManifest.xml e adicione o nome do aplicativo que você acabou de criar:
<application android:name=".ChatApplication"
Adicionando o evento de
barramentoOtto é um barramento de evento destinado a separar diferentes partes do seu aplicativo enquanto ainda permite que elas se comuniquem de forma eficiente.
http://square.github.io/otto/
Bus bus = new Bus(); //creates the bus (better use dependency injection)
bus.post(new ServerMessage("This is awesome")); //publish the message //synchronous delivery
Publicando
Adicionando o evento de
barramento
@Subscribe public void receiveMessage(ServerMessage serverMessage) {
// TODO: React to the event somehow!
}
Assinando
Adicionando o evento de
barramento
• register(), unregister(), post() • @Subscribe, @Produce• Thread confinement • Testes simples
Otto API
Adicionando o evento de
barramento
Vamos criar um módulo RoboGuice para tornar o singleton Bus e reutilizá-lo em todo o aplicativo. Criar uma classe interna no ChatApplication:
Otto API
Adicionando o evento de
barramento
class ChatModule implements Module { @Override public void configure(Binder binder) { // Figure out how to declare a singleton Bus } }
Agora adicione essa linha logo antes de iniciar o serviço, para que o RoboGuice saiba sobre o nosso módulo:
Otto API
Adicionando o evento de
barramento
RoboGuice.setBaseApplicationInjector(this, RoboGuice.DEFAULT_STAGE, RoboGuice.newDefaultRoboModule(this), new ChatModule());
Agora você está pronto para injetar o Bus tanto no ChatService e ao ChatFragment. Crie um campo privado do tipo Bus e usar a anotação @Inject.
Otto API
Adicionando o evento de
barramento
Uma última coisa, a fim de receber eventos (também se aplica aos produtores), uma instância de classe precisa se registrar com o barramento. Adicione o seguinte código para o ChatFragment
Otto API
Adicionando o evento de
barramento
@Override public void onResume() { super.onResume(); mBus.register(this); }
@Override public void onPause() { super.onPause();
// Always unregister when an object no longer should be on the bus. mBus.unregister(this); }
Adicione o seguinte código para o ChatService
Otto API
Adicionando o evento de
barramento
@Override public void onCreate() { super.onCreate(); mBus.register(this); }
@Override public void onDestroy() { super.onDestroy(); mBus.unregister(this); }
Adicione a permissão INTERNET para o seu AndroidManifest.xml para que possa se conectar ao servidor.
Interagindo com o Servidor com o
Socket.io
<uses-permission android:name="android.permission.INTERNET"/>
Vamos agora abrir um WebSocket com o servidor no ChatService. Crie um campo privado do tipo SocketIO e um método de inicialização (initialize) para inicializar Socket.io:
socket = new SocketIO("http://127.0.0.1:3000/");
socket.connect(new IOCallback() { @Override public void onMessage(JsonElement json, IOAcknowledge ack) { System.out.println("Server said:" + json.toString()); }
@Override public void onMessage(String data, IOAcknowledge ack) { System.out.println("Server said string: " + data); }
@Override public void onError(SocketIOException socketIOException) { System.out.println("an Error occured"); socketIOException.printStackTrace(); }...
Interagindo com o Servidor com o
Socket.io
@Override public void onDisconnect() { System.out.println("Connection terminated."); }
@Override public void onConnect() { System.out.println("Connection established"); }
@Override public void on(String event, IOAcknowledge ack, JsonElement... args) { System.out.println("Server triggered event '" + event + "'"); } });
Interagindo com o Servidor com o
Socket.io
Logo após ter uma conexão bem-sucedida, emite evento de user: setname e enviar uma mensagem como {'apelido': ’jackson'} (você pode codificar o nome de usuário até agora)
Definindo o apelido
• servidor irá enviar mensagens JSON no seguinte formato {’message': ’Ola', 'Apelido': ’jackson'}.
Crie uma classe chamada ServerMessage que representa esse esquema e sobreescreve o método toString (vamos usá-lo para exibir as mensagens na interface do usuário).
Vamos interpretar mensagens sem apelido para ser mensagens do sistema, então isso vai como vamos mostrar mensagens:
As mensagens do sistema -> / / mensagem (ex:, / / jackson entrou na sala) Mensagens do usuário -> apelido: mensagem (ex:, jackson: Chatiado!)
Recebendo mensagens
public String toString() { return nickname != null ? nickname + ": " + message : "//" + message; }
Agora você pode implementar o método onMessage (a versão String), convertendo a mensagem recebida para um ServerMessage com Gson (você tem já como uma dependência, dica: use o método fromJson).
Esta mensagem precisa ser exibida na interface do usuário, mas como queremos ter tudo dissociado, vamos enviá-la para o barramento de evento, para um assinante pode processá-lo. AVISO: Por padrão, toda a interação com uma instância Bus é confinada na Main Thread, mas o serviço está sendo executado em uma Thread diferente. A fim de ser capaz de postar o evento para a Main Thread apartir do ChatService, estaremos usando uma solução de meio hacky.
Recebendo mensagens
private final Handler mHandler = new Handler(Looper.getMainLooper());
public void post(final Object event) { if (Looper.myLooper() == Looper.getMainLooper()) { mBus.post(event); } else { mHandler.post(new Runnable() { @Override public void run() { mBus.post(event); } }); } }
Copie e cole o seguinte método no ChatService e postar a mensagem de usá-lo:
Recebendo mensagens
Temos agora a mensagem publicada para a o barramento, vamos adicionar um assinante para o evento.
O assinante deve ser definido no ChatFragment para que possamos atualizar o adaptador base no evento.
Altere a definição do adaptador de ArrayAdapter <String> para ArrayAdapter <ServerMessage> e atualizá-lo a partir do método de assinantes.
Execute o aplicativo e verificar que as mensagens são recebidas e adicionado à lista.
Recebendo mensagens
Quando pressionar o botão Enviar queremos que as mensagens sejam enviadas para o WebSocket.
Para isso, vamos criar uma classe chamada ClientMessage que representa o esquema a ser enviado ({'mensagem': 'Olá'}).
Usando a instancia de barramento que injetamos, postamos a mensagem e definimos um assinante no ChatService , responsável por enviá-lo para a WS (dica: use Gson novamente para converter de Object para String, toJson)
Enviando mensagens
BROWSERCriando um cliente HTML
Crie um arquivo em seu diretório público chamado chat.html (O Node.js irá servi-la como um recurso estático) e adicione o seguinte esqueleto HTML5:
Construindo o cliente do navegador
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Mobos Chat</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body></body><script src="/socket.io/socket.io.js" ></script><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script></html>
Adicione um input para escrever a mensagem, um botão e um div para exibir as mensagens de bate-papo.Crie um arquivo chamado chat.js dentro da pasta javascript para encapsular a lógica do socket.io
Construindo o cliente do navegador
var socket = io.connect('http://localhost'); socket.on('yourevent', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); });
var socket = io.connect('http://localhost'); socket.on('yourevent', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); });
Obrigado!@jacksonfdam
Recommended