Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-websocket

Package Overview
Dependencies
Maintainers
2
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-websocket

An Angular WebSocket service for connecting client applications to servers.

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.1K
decreased by-3.57%
Maintainers
2
Weekly downloads
 
Created
Source

Angular Websocket

Angular Websocket Join Slack Join the chat at https://gitter.im/AngularClass/angular-websocket gdi2290/angular-websocket API Documentation

Travis Bower npm Dependency Status devDependency Status NPM

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://rawgit.com/gdi2290/angular-websocket/v1.0.9/angular-websocket.js
  • CDN for production https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.9/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

nameargumentsdescription
$websocket
constructor
url:StringCreates and opens a WebSocket instance.
var ws = $websocket('ws://foo');
senddata:String,Object returnsAdds data to a queue, and attempts to send if socket is ready. Accepts string or object, and will stringify objects before sending to socket.
onMessagecallback:Function
options{filter:String,RegExp, autoApply:Boolean=true}
Register a callback to be fired on every message received from the websocket, or optionally just when the message's data property matches the filter provided in the options object. Each message handled will safely call $rootScope.$digest() unless autoApply is set to `false in the options. Callback gets called with a MessageEvent object.
onOpencallback:FunctionFunction to be executed each time a socket connection is opened for this instance.
onClosecallback:FunctionFunction to be executed each time a socket connection is closed for this instance.
onErrorcallback:FunctionFunction to be executed each time a socket connection has an Error for this instance.
closeforce:Boolean:optionalClose the underlying socket, as long as no data is still being sent from the client. Optionally force close, even if data is still being sent, by passing true as the force parameter. To check if data is being sent, read the value of socket.bufferedAmount.

Properties

nametypedescription
socketwindow.WebSocketWebSocket instance.
sendQueueArrayQueue of send calls to be made on socket when socket is able to receive data. List is populated by calls to the send method, but this array can be spliced if data needs to be manually removed before it's been sent to a socket. Data is removed from the array after it's been sent to the socket.
onOpenCallbacksArrayList of callbacks to be executed when the socket is opened, initially or on re-connection after broken connection. Callbacks should be added to this list through the onOpen method.
onMessageCallbacksArrayList of callbacks to be executed when a message is received from the socket. Callbacks should be added via the onMessage method.
onErrorCallbacksArrayList of callbacks to be executed when an error is received from the socket. Callbacks should be added via the onError method.
onCloseCallbacksArrayList of callbacks to be executed when the socket is closed. Callbacks should be added via the onClose method.
readyStateNumber:readonlyReturns either the readyState value from the underlying WebSocket instance, or a proprietary value representing the internal state of the lib, e.g. if the lib is in a state of re-connecting.
initialTimeoutNumberThe initial timeout, should be set at the outer limits of expected response time for the service. For example, if your service responds in 1ms on average but in 10ms for 99% of requests, then set to 10ms.
maxTimeoutNumberShould be as low as possible to keep your customers happy, but high enough that the system can definitely handle requests from all clients at that sustained rate.

CancelablePromise

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

Methods

nameargumentsdescription
cancelAlias to deferred.reject(), allows preventing an unsent message from being sent to socket for any arbitrary reason.
thenresolve:Function, reject:FunctionResolves when message has been passed to socket, presuming the socket has a readyState of 1. Rejects if the socket is hopelessly disconnected now or in the future (i.e. the library is no longer attempting to reconnect). All messages are immediately rejected when the library has determined that re-establishing a connection is unlikely.

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

nameargumentsdescription
flushExecutes all pending requests
expectConnecturl:StringSpecify the url of an expected WebSocket connection
expectCloseExpect "close" to be called on the WebSocket
expectSendmsg:StringExpectation of send to be called, with required message
verifyNoOutstandingExpectationMakes sure all expectations have been satisfied, should be called in afterEach
verifyNoOutstandingRequestMakes sure no requests are pending, should be called in afterEach

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

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 ##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development form the best. Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com

License

MIT

Keywords

FAQs

Package last updated on 01 Aug 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc