Inform registered customers by utilizing AngularJS (angular-websocket-service) and Spring Boot to implement Websockets notifications

Exploring the world of AngularJS and FullStack development is an exciting journey for me. The architectural setup of my current app is already in place and ideally should not be altered (for security reasons). I've been able to send messages to the server using angular-websocket-service. Below is a snippet of the frontend service code:

proxiMiamApp.service('WebSocketService', function ($websocket) {
var wsEndpoint = {};

this.openWsEndpoint = function () {
    wsEndpoint = $websocket.connect("ws://localhost:9000/proximiamHandler");
    console.log(wsEndpoint);
    return wsEndpoint;
}

this.sendMessage = function(){
    if($.isEmptyObject(this.wsEndpoint)){
        this.openWsEndpoint();
    }

    eventUser = {

        idEvent : '1',
        idUser : '49'
    };

    wsEndpoint.register('/eventUser', function(){

        console.log('Register OK!');
    });
    console.log('Ready!');
    wsEndpoint.emit('/eventUser',eventUser);


}});

On the backend, I am utilizing an implementation of the WebSocketHandler interface:

@Controller
public class ProximiamHandler implements WebSocketHandler {

@Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
    System.out.println("afterConntectionEstablished called");
}

@Override
public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {

    System.out.println("handleMessage called");
    // My code here...

}

@Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
    System.out.println("handleTransportError called");
}

@Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
    System.out.println("afterConnectionClosed called");
}

@Override
public boolean supportsPartialMessages() {
    return true;
}}

The WebSocketHandler implementation is invoked through Spring's WebSocketConfigurer

@Configuration
@EnableWebSocket
@Controller
public class WebSocketConfig implements WebSocketConfigurer {

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(myHandler(), "/proximiamHandler").setAllowedOrigins("*");
}

@Bean
public WebSocketHandler myHandler() {
    return new ProximiamHandler();
}}

I have a few questions:

  1. Is it possible to notify subscribed clients with this architecture?
  2. If so, what is the process for doing so?
  3. Can the server respond to subscribed clients with an Object or String?

Thank you in advance for your guidance.

Answer №1

Is it possible to send notifications to subscribed clients using this setup? => Affirmative.

If so, how can I go about it? => Utilize the Spring web socket APIs by preserving the 'WebSocketSession' provided to you through the "afterConnectionEstablished" callback. Use the sendMessage() function of the Web socket session to dispatch notifications to the client.

Can the server send any data back to the subscribed clients? (like an Object or a String) => You have the option to format your data in either JSON or XML and encapsulate it with "WebSocketMessage" before sending it to the client.

I don't have experience with Spring, but I'm sharing these insights based on my familiarity with web sockets. I hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to creating a React Hooks counter that relies on the functionality of both a start and stop button

I am looking to create a counter that starts incrementing when the start button is clicked and stops when the stop button is pressed. Additionally, I want the counter to reset to 1 when it reaches a certain value, for example 10. I have tried using setInte ...

Dynamically load scripts in angularJs

Having multiple libraries and dependencies in my angularjs application is posing a challenge as I want to load them all using just one script, given that three apps are utilizing these dependencies. Currently, I have this custom script: var initDependenci ...

Transfer data between two input fields dynamically using AngularJS

I want to connect one model to two inputs. The first input is visible and is used to set the value of the model. <input type="text" ng-model="ttl" class="form-control input-sm"/> The second input is hidden and used for a form. I need to maintain th ...

Pre-rendering Vue.js for SEO with prerender-spa-plugin becomes unresponsive during the npm run build process

My current issue arises when attempting to execute the command npm run build while utilizing the pre-rendering plugin in my webpack configuration. I incorporated some advanced options in webpack such as: `captureAfterDocumentEvent: 'fetch-done' ...

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Is there any way to display an image by default instead of options? Code: <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple"> <opti ...

Retrieve value from array input

Is there a way to extract input text values from an array using JavaScript? Here is the code snippet: Item : <input id="t_item" name="t_item[]" type="text" class="teks3"> Cost : <input id="t_cost" name="t_cost[]" type="text" class="teks3"> &l ...

Angular fire generator error: Peer validation failure

Whenever I try to execute npm install -g grunt-cli, I encounter the following error message npm ERR! peerinvalid The package generator-angular does not meet the peerDependencies requirements of its siblings! npm ERR! peerinvalid Peer <a href="/cdn-cg ...

Error with infiniteCarousel in Internet Explorer versions 7 and 8 when using jQuery

Hello everyone! I've run into a little issue with some jQuery code I'm using. It was working fine before, but after making several changes and improvements, I can't seem to figure out what the problem is. I keep getting JS errors in both IE7 ...

How can I implement a Component to show the details of a blog post when clicked in Next.js?

Can someone help me figure out how to display individual blog post details in a modal when clicked on in a blog website, where the posts are stored in a Component rather than pages? The file structure is set up like this: Component |_ Posts.js |_ PostDet ...

The document inside the database is displayed in italicized text when it is stored in Firebase

try { // establish a new collection named 'pactLists' const pactListsCollection = collection(db, "pactLists"); // used for storing records of created pacts by users. // generate a unique id for the pact and set it as the invite c ...

A guide on extracting the date selected from materializecss datepicker with the help of angularjs

HTML coding: Commencement Date Using angularJs: $scope.add=function(){ alert($scope.vacation.commencementDate); } ...

Updating State and Modifying URL in ReactJS when Input Changes

I am currently attempting to modify the state and URL onChange within a <Input type='select'> element, utilizing reactstrap. import React, {Component} from 'react' import { Input, } from 'reactstrap' export default ...

Sending a XML file from a Vue application to an ASP.NET Core backend using axios

I'm encountering difficulties when trying to upload an xml file using axios to my asp .net server. Below is the code snippet I am using on the vue side to retrieve and upload the xml file: uploadXmlFile(file: any) { const rawFile = new XMLHttpRequ ...

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

I am working on a project that involves fetching JSON API data and displaying it in an HTML table, but only for values above 10. Below is the code snippet along with my JavaScript. I specifically want to exclude negative values and only display positive v ...

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

The page you are trying to access does not support the HTTP request method 'GET'. Please try a different method to access the page

I have been attempting to incorporate AJAX for asynchronous communication with the server. However, I keep encountering the following error message. Any insights on how to resolve this issue? org.springframework.web.servlet.PageNotFound.handleHttpReques ...

Issue with NPM peer dependencies enforcement

Forgive me if this question seems basic - I am new to Meteor... I am creating an application using meteor 1.3.1 and following the Socially tutorial for guidance as it aligns closely with my needs. However, I am encountering a persistent error in my consol ...

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

Angular.js model that is updated by checkboxes

In my project, I have created a model that is linked to several other models. For instance, let's consider a scenario similar to a Stack Overflow question associated with tags. Before making a POST or PUT request, the final Object may appear like this ...

Struggling with AngularJs as I attempt to retrieve my Twitter timeline. It's been a challenge

Currently, I am using the code below to fetch tweets for a timeline. This snippet was originally taken from an AngularJS tutorial and worked perfectly with Twitter's search API. angular.module( 'Twitter', [ 'ngResource' ]); func ...