AngularJS combined with the power of WebSockets

Question

AngularJS combined with the power of WebSockets

I am currently working on a project that involves multiple controllers. One of these controllers requires me to establish a web socket connection, while another needs to listen for messages and update the $scope if necessary. Can you please help me by providing an example similar to the one below:

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.testProp = {};
    $scope.testProp2 = '';
    // code to listen for messages here and update $scope.testProp && $scope.testProp2
}]);

app.controller('SearchCtrl', ['$scope', function($scope) {
    // code to open web socket connection here
}]);

P.S. I realize that this issue may seem straightforward, but as someone new to AngularJS and WebSockets, I would greatly appreciate any assistance. Unfortunately, I don't have much time to dive into the documentation at the moment.

javascript angularjs websocket

Answer 1

Answer №1

After exploring various options, I came up with an elegant solution using factories:

app.factory('socket', [function() {
    var messageQueue = [];
    var deferredCallback;
    var socket = {
        ws: new WebSocket(websocket_url),
        send: function(data) {
            data = JSON.stringify(data);
            if (socket.ws.readyState == 1) {
                socket.ws.send(data);
            } else {
                messageQueue.push(data);
            }
        },
        onmessage: function(callback) {
            if (socket.ws.readyState == 1) {
                socket.ws.onmessage = callback;
            } else {
                deferredCallback = callback;
            }
        }
    };
    socket.ws.onopen = function(event) {
        for (var i in messageQueue) {
            socket.ws.send(messageQueue[i]);
        }
        messageQueue = [];
        if (deferredCallback) {
            socket.ws.onmessage = deferredCallback;
            deferredCallback = null;
        }
    };
    return socket;
}]);

Implementation example in controllers:

app.controller('MainCtrl', ['$scope', 'socket', function($scope, socket) {
    socket.onmessage(function(event) {
        // Parse and process incoming event data
    });
}]);

app.controller('SearchCtrl', ['$scope', 'socket', function($scope, socket) {
    socket.send({
        // Data to be sent
    });
}]);

Answer 2

After exploring various options, I came up with an elegant solution using factories:

app.factory('socket', [function() {
    var messageQueue = [];
    var deferredCallback;
    var socket = {
        ws: new WebSocket(websocket_url),
        send: function(data) {
            data = JSON.stringify(data);
            if (socket.ws.readyState == 1) {
                socket.ws.send(data);
            } else {
                messageQueue.push(data);
            }
        },
        onmessage: function(callback) {
            if (socket.ws.readyState == 1) {
                socket.ws.onmessage = callback;
            } else {
                deferredCallback = callback;
            }
        }
    };
    socket.ws.onopen = function(event) {
        for (var i in messageQueue) {
            socket.ws.send(messageQueue[i]);
        }
        messageQueue = [];
        if (deferredCallback) {
            socket.ws.onmessage = deferredCallback;
            deferredCallback = null;
        }
    };
    return socket;
}]);

Implementation example in controllers:

app.controller('MainCtrl', ['$scope', 'socket', function($scope, socket) {
    socket.onmessage(function(event) {
        // Parse and process incoming event data
    });
}]);

app.controller('SearchCtrl', ['$scope', 'socket', function($scope, socket) {
    socket.send({
        // Data to be sent
    });
}]);

Answer 3

Answer №2

Be sure to check out this informative answer : Exploring AngularJS and the Realm of WebSockets

This example delves into the realm of creating a WebSocket service within AngularJS, showcasing its capabilities for handling request/response interactions as well as facilitating publish/subscribe functionality.

Answer 4

Be sure to check out this informative answer : Exploring AngularJS and the Realm of WebSockets

This example delves into the realm of creating a WebSocket service within AngularJS, showcasing its capabilities for handling request/response interactions as well as facilitating publish/subscribe functionality.

AngularJS combined with the power of WebSockets

Answer №1

Answer №2

Similar questions

Is my approach correct in utilizing hierarchical data structure for geospatial/geohash searching in firebase?

What is the best way to transfer a JavaScript variable through a query string from one HTML page to another?

Resolve feature for UI routes fails to function upon refreshing the page

Using React.useMemo does not efficiently avoid unnecessary re-renders

Change the background of the play/stop icon with a jquery toggle

Guide to displaying JSON.stringify data in PHP

`Need help setting the active class for a bootstrap navbar using Angular JS?`

How to Utilize Custom Component Tag Names in CSS with Vue.js 2?

What is the best way to modify the size of a canvas element while maintaining effectiveness?

Exploring the functionality of Radar Chart within a React component

Preventing horizontal swiping while vertically scrolling on mobile devices

What are the steps to utilizing the $document service in AngularJS?

Enhanced dropdown menu with Vue.js

The absence of injection into the Angular view

Consistent outcomes with PHP AJAX

Utilizing Array.from with a XPathResult: A Comprehensive Guide

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

Is it possible to enhance a model's properties in AngularJS using a filter?

Animate CSS with Javascript in reverse direction

How to properly utilize ng-repeat and ng-switch in AngularJS?