Embarking on your ABLY journey!

Incorporating https://github.com/ably/ably-js into my project allowed me to utilize typescript effectively. Presently, my code updates the currentBid information in the mongodb document alongside the respective auctionId. The goal is to link the auctionId with the correct currentBid value using ABLY. To achieve this, I assigned the channel name to the auctionId with the currentBid value as the data input. Below is the snippet of my code. Upon execution, the message 'publish succeeded' appears in the ably Your app statistics summary and registers the message counter accordingly.

Upon bidding on the channel.subscribe, the innerHTML displays a JSON object on the screen. My challenge lies in associating the correct auctionId. How can I query the channels I am publishing?

The innerHTML output is as follows: If the currentBid stands at $205.00 and I place a bid of $15.00, the channel.subscribe function outputs:

The message.data value remains at $205.00
The value does not update to $220.00

channel.publish( this.auctionId, this.currentBid);


channel.subscribe(this.auctionId, function (message) {
      document.getElementById('currentBid').innerHTML = JSON.stringify(message.data);

    });

https://i.sstatic.net/NmdHH.png

Answer №1

It appears that you are updating the bid price on the 'feed' channel under the event name 'currentBid'. Subscribers to this channel will receive the new bid price in the data object, which is $15 in your example. To reflect this change on your front-end, add the new bid price to the previous price and display the updated information in your HTML.

If you want to debug the published messages, utilize the dev console on your app dashboard. Subscribe to the channel and event names to view logs of all messages being published to that channel.

https://i.sstatic.net/hkiud.png

P.S. Avoid sharing your API key publicly for security reasons. Consider using dummy text instead in the future :)

Full disclosure - I serve as the Developer Advocate for Ably Realtime.

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

What is the correct placement for the "require("firebase/firestore");" code in my Angular 4 project?

After doing thorough research on the internet and carefully reading through the Firestore documentation, I am facing difficulties in converting my partially built Angular (4) project. Following the instructions in the "Get Started with Cloud Firestore" gu ...

Optimal practices for checking the status of your request

In my Node.js backend, I used to include a boolean value in my response to indicate successful operations: if(req.body.user.username == null || req.body.user.username == '' || req.body.user.password == null || req.body.user.password == '&ap ...

What is the best way to combine index signatures with established properties?

Imagine a scenario where an interface has certain defined properties with specific types, but can also include additional properties with unknown keys and various other types. Here is an example: interface Bar { size: number; [key: string]: boolean | s ...

Monitor changes in input display within ngIf statements

Within my code, I am utilizing an input element within a conditional statement of *ngIf: <div *ngIf='display'> <input number="number" /> </div> My goal is to be able to detect the visibility state of the input element insi ...

Mismatch in Angular context

I am facing an issue with my Angular server not responding to http://localhost:8449/spreadsheet-upload. I have set a base href='/spreadsheet-upload" and routes that start with that. My goal is to prefix all references to my server with the hostna ...

Utilizing Typescript to inject dependencies and receive arguments within a class

I am currently using InversifyJS with the container. My goal is to inject the templateEngine and provide args (such as host, port, etc...) in the constructor. const container = new Container(); container.bind<MailerInterface>(TYPES.Mailer).to(NodeM ...

Trouble with importing React JSX from a separate file when working with Typescript

This problem bears some resemblance to How to import React JSX correctly from a separate file in Typescript 1.6. Everything seems to be working smoothly when all the code is contained within a single file. However, as soon as I move the component to anoth ...

What is the method for obtaining the total row of an ngFor loop within an HTML file?

I am trying to figure out how to retrieve the total number of rows in an ngFor loop and display it above. Any suggestions? <p>Total row: "I need to display the number of rows here"</p> <table class="table" > &l ...

Is it possible to indicate the base type for a generic function?

Is it possible to define the generic type T as an Object rather than a primitive type like number or string? For example, this clone function should only accept Objects as input. It will destructure the input object o, set its prototype back to that of th ...

There was an issue with Angular 2.0 at :0:0, which was caused by a response with status: 0 from the URL: null

I am a beginner in Angular 2.0 and I am currently working on creating a sample application using @angular\cli. To serve the application on my local machine, I use the command ng serve --open, which opens it at localhost:4200. Now, I have developed a ...

Ensure that you are completely logged out of all browser tabs when one tab has been successfully logged out

Just started working with Angular 4 and have built an application with a login page and home page. Upon successful login, I navigate to the home page. I noticed that if my application is open in multiple tabs and I log out from one tab, clicking on any ot ...

Running NG BUILD from Gulp can be done using either child-process.spawn or by disabling all output in child-process.exec

Have you come across a similar question like this Call "ng build" from inside a gulp task? I have found a way to successfully build Angular using Gulp in order to prevent overflowing the output buffer. Here's how I achieved it: const child ...

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

What is the best way to establish communication between sibling components in an Angular 2+ application?

I am working with 3 components that need to communicate with one another. Initially attempted using services, but they did not resolve my issue. Seeking assistance for a solution. ...

Why does the playwright's onEnd() results not include the duration as specified in the documentation? What am I overlooking?

The built-in onEnd method can have a results object that is accessible within the function. According to the documentation here, this object should include the property duration, which represents the time in milliseconds. However, when I attempt to access ...

UI components displaying varying data retrieved from Redux, despite having identical user interfaces

Currently, I have a component that receives data from the Redux store using useSelector. The UI remains the same, but I need to change where the data is coming from by passing the selector through props. My first question is: Is it acceptable to pass the ...

Creating a method that generates an object containing both a getter and setter functionality, which is determined by a string parameter

I'm struggling to come up with the correct typing for a function that creates an object with setter and getter properties. I believe using template string literals might be the way to go, but I'm having trouble figuring out the right combination ...

Troubleshooting Observable data in Angular 2/Typescript - A Comprehensive Guide

After going through the Angular 2 tutorial, I managed to create a search feature that asynchronously displays a list of heroes. <div *ngFor="let hero of heroes | async"> {{hero.name}} </div> In my component, I have an observable array of ...

Global registration of router directives with Angular router RC3 is required

I'm trying to avoid registering the Router_Directives for each individual component. Instead, I would like to apply it globally similar to how I did before: import { RouterConfig ,Router, ActivatedRoute, ROUTE_PROVIDERS} from '@angular/router&a ...

What is the method for obtaining the union type of interface values (including string enums)?

How can I achieve the following ? Given : enum FooEnum1 { Foo = "foo", }; enum FooEnum2 { Foo = 1, }; interface FooInterface { foo1 : FooEnum1, foo2 : FooEnum2, foo3 : string, foo4 : number, }; I am interested in cre ...