Angular Websocket

Status: Looking for feedback about new API changes

An AngularJS 1.x WebSocket service for connecting client applications to servers.

How do I add this to my project?

You can download angular-websocket by:

• (prefered) Using bower and running bower install angular-websocket --save
• Using npm and running npm install angular-websocket --save
• Downloading it manually by clicking here to download development unminified version
• CDN for development https://cdn.rawgit.com/AngularClass/angular-websocket/v2.0.0/dist/angular-websocket.js
• CDN for production https://cdn.rawgit.com/AngularClass/angular-websocket/v2.0.0/dist/angular-websocket.min.js

Usage

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="bower_components/angular-websocket/angular-websocket.js"></script>
  <section ng-controller="SomeController">
    <ul ng-repeat="data in MyData.collection track by $index" >
      <li> {{ data }} </li>
    </ul>
  </section>
  <script>
    angular.module('YOUR_APP', [
      'ngWebSocket' // you may also use 'angular-websocket' if you prefer
    ])
    //                          WebSocket works as well
    .factory('MyData', function($websocket) {
      // Open a WebSocket connection
      var dataStream = $websocket('ws://website.com/data');

      var collection = [];

      dataStream.onMessage(function(message) {
        collection.push(JSON.parse(message.data));
      });

      var methods = {
        collection: collection,
        get: function() {
          dataStream.send(JSON.stringify({ action: 'get' }));
        }
      };

      return methods;
    })
    .controller('SomeController', function ($scope, MyData) {
      $scope.MyData = MyData;
    });
  </script>

API

Factory: $websocket (in module ngWebSocket)

returns instance of $Websocket

Methods

Properties

CancelablePromise

This type is returned from the send() instance method of $websocket, inherits from $q.defer().promise.

Methods

Service: $websocketBackend (in module ngWebSocketMock)

Similar to httpBackend mock in AngularJS's ngMock module. You can use ngWebSocketMock to mock a websocket server in order to test your applications:

    var $websocketBackend;

    beforeEach(angular.mock.module('ngWebSocket', 'ngWebSocketMock');

    beforeEach(inject(function (_$websocketBackend_) {
      $websocketBackend = _$websocketBackend_;

      $websocketBackend.mock();
      $websocketBackend.expectConnect('ws://localhost:8080/api');
      $websocketBackend.expectSend({data: JSON.stringify({test: true})});
    }));

Methods

Frequently asked questions

• Q.: What if the browser doesn't support WebSockets?
• A.: This module will not help; it does not have a fallback story for browsers that do not support WebSockets. Please check your browser target support here and to include fallback support.

Development

$ npm install
$ bower install

Changelog

Changelog

Unit Tests

$ npm test Run karma in Chrome, Firefox, and Safari

Manual Tests

In the project root directory open index.html in the example folder or browserify example

Distribute

$ npm run dist Builds files with uglifyjs

Support, Questions, or Feedback

Contact us anytime for anything about this repo or Angular 2

• Slack: AngularClass
• Gitter: angularclass/angular-websocket
• Twitter: @AngularClass

TODO

• Allow JSON if object is sent
• Allow more control over $digest cycle per WebSocket instance
• Add Angular interceptors
• Add .on(event)
• Include more examples of patterns for realtime Angular apps
• Allow for optional configuration object in $websocket constructor
• Add W3C Websocket support
• Add socket.io support
• Add SockJS support
• Add Faye support
• Add PubNub support

enjoy — AngularClass

##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development form the best. Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]

License

MIT