Atualmente, os aplicativos Apache Cordova são escritos principalmente em JavaScript, o que facilita a integração com bibliotecas como o Socket.IO para comunicação em tempo real. Vamos percorrer um exemplo prático de como usar o Socket.IO em um projeto Cordova.
Primeiro, prepare um servidor simples usando Node.js e Socket.IO. Crie um arquivo de servidor com o seguinte código:
var server = require('http').createServer();
var io = require('socket.io')(server);
io.sockets.on('connection', function (socket) {
console.log('socket connected');
socket.on('disconnect', function () {
console.log('socket disconnected');
});
socket.emit('text', 'wow. such event. very real time.');
});
server.listen(3000);
Este servidor aceita conexões de clientes Socket.IO e emite um evento chamado text com uma mensagem de exemplo.
Agora, crie um novo projeto Cordova para começar a implementação. Execute o comando abaixo no terminal:
cordova create socket.io-example socket.io.example socket.io-example
Isso criará um projeto básico com uma estrutura inicial. Navegue até a pasta do projeto com cd socket.io-example. Em seguida, adicione uma plataforma de build, como iOS ou Android. Para iOS, execute:
cordova platform add ios
Se você estiver no OS X, pode construir e executar o aplicativo no emulador iOS. Para outras plataformas, adapte os comandos conforme necessário. Após adicionar a plataforma, execute o emulador para verificar se o template está funcionando:
cordova emulate ios
O emulador será aberto, exibindo a aplicação padrão do Cordova.
Agora, vamos integrar o Socket.IO ao projeto. Abra o arquivo www/index.html no diretório do projeto. Adicione o script do Socket.IO via CDN, inserindo-o antes do js/index.js:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script type="text/javascript" src="js/index.js"></script>
Em seguida, modifique a lógica do aplicativo para lidar com a conexão Socket.IO. Adicione código após a chamada app.initialize() para garantir que o dispositivo esteja pronto. Substitua a seção de script existente por:
<script type="text/javascript">
app.initialize();
document.addEventListener('deviceready', function() {
var socket = io.connect('http://localhost:3000'); // Conecta ao servidor Socket.IO
socket.on('connect', function() {
socket.on('text', function(text) {
alert(text); // Exibe a mensagem recebida em uma caixa de alerta
});
});
});
</script>
Neste exemplo, o aplicativo se conecta ao servidor Socket.IO em localhost:3000. Ajuste a URL conforme a configuração do seu servidor. Quando o evento deviceready for disparado, a conexão é estabelecida e, ao receber o evento text, uma caixa de alerta exibirá a mensagem.
Após salvar as alterações, execute novamente o emulador com cordova emulate ios. O aplicativo se conectará ao servidor e mostrará a mensagem em tempo real. Este exemplo básico demonstra como integrar o Socket.IO em aplicativos Cordova para habilitar comunicação em tempo real. Explore mais funcionalidades do Socket.IO para expandir suas aplicações híbridas.