🥇 HTML5 Websocket com AngularJS

É muito legal trabalhar com AngularJS e com Websockets HTML5 também!
Então, como posso usá-los juntos?

ngWebsocket é um módulo criado seguindo a sintaxe do estilo Angular, muito fácil de importar e usar em sua aplicação.
Siga um breve tutorial, para que todos a bordo, o navio Angular esteja pronto para partir!

Instalação

Você não precisa baixar um zip de um servidor FTP, não em 2014, cara.
Para bibliotecas front-end, use o Bower : economiza tempo e é engraçado, juro!

Então:

bower install ng-websocket

É isso aí =)

Importar

Neste ponto, temos que configurar nosso aplicativo para incluir ngWebsocket como uma dependência, então vamos mudar o index.html :

<html ng-app="MyAwesomeApp">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-websocket/ng-websocket.js"></script>
</head>
</html>

E então o app.js :

'use strict';

angular.module('MyAwesomeApp', ['ngWebsocket']);

Agora você está pronto para usá-lo em seu aplicativo!

Use-o

ngWebsocket fornece um Provedor Angular e um Serviço .
Vamos começar com o serviço:

angular.controller('MyCtrl', function ($websocket) {
  var ws = $websocket.$new('ws://localhost:12345');

  ws.$on('$open', function () {
    ws.$emit('hello', 'world'); // it sends the event 'hello' with data 'world'
  })
  .$on('incoming event', function (message) { // it listents for 'incoming event'
    console.log('something incoming from the server: ' + message);
  });
});

Como você pode ver, é muito fácil de usar, assim como trabalhar com Eventos!
Sem dor, apenas diversão =)

Agora, comece a usar o WebSocket em seu aplicativo!

Instalação

Importar

Use-o

Related Posts