Twitter API v2 Data Stream with Angular and NestJS (Nx)
This project is to showcase how to consume the Twitter API v2 data-stream endpoints using Angular and NestJS managed by a Nx workspace with Akita State Management solution.
The application hasn't been deployed yet but a recorded demo can be found here:
An Angular application with Twitter API v2 to stream real time tweets on 3 big frontend frameworks: Angular, React, and Vue.
Initially, I thought Twitter API would return geolocation for the tweets. However, that would be a huge privacy flaw. Twitter API does indeed return geolocation for tweets ONLY IF the users turn on Location, allow Twitter to access the device's location service, and actually tag their tweets with a location.
To workaround this, I use random-location which is a JavaScript library that will generate random coordinates based on a Center Point and the Radius. For tweets that do not have Geolocation information, I generate a random coordinate for that tweet from the Center of the US.
The above diagram might be a little confusing which I will also point out a couple of main things:
tweetData
event from Socket.Subscription
:
Subscription
, do nothingIncomingMessage
as a data stream -> convert to RxJS Stream using fromEventPattern
. When there's data from IncomingMessage
(on('data')
), a local ReplaySubject
($tweet
) will push that data
to its stream.tweetData
handler on the BackEnd constructs a record for Map<string, Subscription>
which is used to keep track of each connected Client (Socket client) along with their Subscription
. This Subscription
is from tweet$.subscribe()
which is an Observable
of the ReplaySubject
above. This is to make sure the Subscription
from calling Twitter API is a single subscription but the FrontEnd can create as many subscriptions as possible based on the ReplaySubject
.Axios
does support this type of data with responseType: stream
and transform the response to IncomingMessage
which is a little tricky to work with.I spent around 15-16 hours on this project. The rest of the time was writing up this README and looking up documentations in between. Overall, the project is challenging but super fun to work with.
As you can see here, app.service.ts
takes up the most time because of all the RxJS magic with Twitter API Stream endpoint. Unsubscription logic is handled in app.service.ts
as well.
.env
based on .env.example
npm run start api
to start the backendnpm run start
to start the frontend on port 4200Feel free to use my code on your project. It would be great if you put a reference to this repository.