Last Updated: September 15, 2020
·
47.42K
· wilk

HTML5 Websocket with AngularJS

It's really cool working with AngularJS and with HTML5 Websockets too!
So, how can I use them together?

With ngWebsocket, indeed!

ngWebsocket is a module created following the Angular-style syntax, very easy to import and use in your application.
Follow a brief tutorial, so all aboard, the Angular ship is ready to go!

Installation

You don't have to download a zip from a FTP server, not in 2014, dude.
For front-end libraries, use Bower: it saves time and it's funny, I swear!

So:

bower install ng-websocket

That's it =)

Import

At this point we have to setup our application to include ngWebsocket as a dependency, so let's change the 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>

And then the app.js:

'use strict';

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

Now, you're ready to use it in your application!

Use it

ngWebsocket provides an Angular Provider and a Service.
Let's start with the Service:

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);
  });
});

As you can see, it's really easy to use, just like working with Events!
No pain, just fun =)

Now, go and start using WebSocket in your application!

2 Responses
Add your response

Hi,
Thanks for this code snippet. when i try using this code block , i am getting the below error.
var ws = $websocket.$new('ws://localhost:12345'); == $websocket.$new - undefined.

Can you please let us know how to resolve this?

over 1 year ago ·

'use strict';

angular.module('MyCoolWebApp', ['ngWebsocket'])
.run(function ($websocket) {
var ws = $websocket.$new('ws://localhost:12345'); // instance of ngWebsocket, handled by $websocket service

    ws.$on('$open', function () {
        console.log('Oh my gosh, websocket is really open! Fukken awesome!');

        ws.$emit('ping', 'hi listening websocket server'); // send a message to the websocket server

        var data = {
            level: 1,
            text: 'ngWebsocket rocks!',
            array: ['one', 'two', 'three'],
            nested: {
                level: 2,
                deeper: [{
                    hell: 'yeah'
                }, {
                    so: 'good'
                }]
            }
        };

        ws.$emit('pong', data);
    });

    ws.$on('pong', function (data) {
        console.log('The websocket server has sent the following data:');
        console.log(data);

        ws.$close();
    });

    ws.$on('$close', function () {
        console.log('Noooooooooou, I want to have more fun with ngWebsocket, damn it!');
    });
});
over 1 year ago ·