Welcome to another tutorial of PieSocket. Today we are going to learn how to make a live news application with react and node.
Let’s start by making an empty folder
|
1 |
mkdir piesocket-live-news |
Then, initialise NPM
|
1 |
npm init -y |
We will use PieSocket API for real-time updates. Get your API keys from Piesocket Dashboard, select the server region closer to users of your application.
We are going to use NewsAPi. So make an API key on your News-API account.
News API lets you choose what data you wish to fetch. They have following three types
- Only Headlines
- Everything
- Only Sources.
Let’s start with setting up our server side code.
Create a file server.js.
And, install piesocket-nodejs library.
|
1 |
npm i piesocket-nodejs |
Put the following code in server.js the file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
const NewsAPI = require('newsapi'); const PieSocket = require("piesocket-nodejs"); var piesocket = new PieSocket({ clusterId: 'Your-cluster-id', apiKey: 'Your-Api-Key', secret: 'Your-Secret-key' }); const newsapi = new NewsAPI('your-news-api-key'); var counter = 1; setInterval(() => { newsapi.v2.everything({ q: 'technology', sources: 'bbc-news,the-verge', domains: 'bbc.co.uk, techcrunch.com', language: 'en', sortBy: 'relevancy', page: counter, pageSize : 6 }).then(response => { console.log(response); piesocket.publish("live-news", "tech-news" , { articles : response.articles } ); counter += 1; }); }, 5000); |
In news.v2, q is a parameter for the topic of your news.
You can use more or fewer parameters according to your requirement. If you want more details on this head over to news-API Docs.
Every 5 seconds we are going to update our feed with new news topics. Nodejs code publishes the articles through PieSocket’s WebSocket Channels. Let’s write the client-side code to listen to these events.
Run your NodeJS script in the background
|
1 |
node server.js |
Let’s begin with the client-side code. Let’s make a react project using the following command. We are using React in this example but you can chose any frontend library of your choice. Not using a library will work too, you can create this client with VanillaJS.
|
1 2 3 |
npx create-react-app client cd client |
Now install piesocket-js client library (for frontend)
|
1 |
npm i piesocket-js |
Code for your client-side file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import './App.css'; import React, { Component } from 'react'; import PieSocket from 'piesocket-js'; import { useEffect, useState } from 'react'; var piesocket = new PieSocket({ clusterId: 'your-cluster-id', apiKey: 'your-api-key' }); var channel = piesocket.subscribe("live-news"); channel.on('open', function(event){ console.log("PieSocket connected!"); }); function App() { const [news, setNews] = useState([]); useEffect(() => { channel.listen('tech-news', data => { data.articles.map(e => setNews(currentData => [ ...currentData, e]) ) }); }, []); console.log(news); return ( <div className="App"> <h1 className="heading">Live Technology Feed</h1> <hr></hr><hr></hr> <ul className="list-news"> {news.map((n,i) => <li key={1 + Math.random() * (1000 - 1)}><a href={n.url}>{n.title}</a></li>)}</ul> </div> ); } export default App; |
In the code above, we have subscribed to the same channel (as on the backend), and we are listening to the same event to we get the published from backend.
Run your React project with
npm start
The application should look like this:
You can go through the whole code in Github, here.
If you have doubts about any part of this tutorial, feel free to ask in the comment section.
Hope this helps, cheers!
