The End of Release 0.4

Sarika Hanif
Dec 7, 2019 · 4 min read

For release 0.4, I had to tackle one issue in an internal project and one issue in an external project. When I first started searching for an issue in the internal project, I was having a difficult time finding something to work on. After talking with my professor, he mentioned that Telescope needed server sent events and suggested working on it.

At the time, I was unsure what any of that meant, but later found out that it required server-side coding. This was great, because I always wanted to get more involved with the backend. After partnering with another student we both split the work. I worked on server-side she worked on the client.

Initially, I had to learn how to create a route in express. I kept confusing the express.Router() function and var app = express(). After looking at the code, I figured out how to create a route from the admin route. In the index.js file in routes, I added router.use('/feed-updates',sse) to use my route in the sse file. In the app.js, it has app.use('/', router) which looks for all the routes in the route folder. Once my route was running, I had to keep the connection alive with connection: ‘keep-alive’. I also had to set ‘content-type’: ‘text/event-stream’. Then I used my partners client side and tested.

One of the issues that I ran into quickly, was that I was working on an old version of the repository. The old version processed feeds from a text file filled with around 5 or 6 urls, versus the repo that allowed pulling all the urls from the wikifeed (500+). While working on the old version of the repo, my code worked. In hindsight, it was a miracle that it even worked, because it was wrong. I later realized and pulled the latest code and tested my code, it didn’t work. I thought it probably had something to do with the differences in waiting time for the queue to drain, processing 5 urls versus 500+. But there were several mistakes made.

The requirement was that, when the queue was drained I needed to send a message to the client saying that there were updates available. To do this I had to use Bull’s event.

.on(‘drained’, function() {
// Emitted every time the queue has processed all the waiting jobs (even if there can be some delayed jobs not yet processed)
});

I put this before my route.

queue.on('drained', () => {
router.get('/', (req, res) => {
res.status(200).set({
connection: 'keep-alive',
'content-type': 'text/event-stream',
'cache-control': 'no-cache',
});
res.write(`data: ${job.data.url}\n\n`); req.on('close', () => {
res.end();
});
});
}

This was one of the issues. When the application runs, the eventSource in the front-end would look for the endpoint. It wouldn’t find the endpoint, because it wasn’t created, since the queue wasn’t finished draining. Another issue was that if I added the event before the res.write it would pend and crash. This was an issue that both my partner and I couldn’t figure out. Our professor suggested to create an emitter. The code now looked like this.

router.get(‘/’, (req, res) => {
res.status(200).set({
connection: ‘keep-alive’,
‘content-type’: ‘text/event-stream’,
‘cache-control’: ‘no-cache’,
});
const completedHandler = job => {
res.write(`data: ${job.data.url}\n\n`);
};
queue.on(‘completed’, completedHandler);
req.on(‘close’, () => {
queue.off(‘completed’, completedHandler);
res.end();
});
});

Instead of waiting on the queue to drain, it now writes a message when the job is completed. When the connection is closed, the event will stop listening for completed jobs. When combining this with the client-side that my partner did, it works!

On to the external issue!

For my external issue, I came across a repo called discotron. It is a modular Discord bot that supports plugins. I worked on an issue where a css linter was needed. I looked for css linters online and found that stylelint was pretty popular. I got approval for adding stylelint to the project and started working away at it. Before I could actually work on the application, I had to create a new application in the Discord Developer Portal. This is required of the installation script that is run after npm install. The installation process can be found here. After I finished this process, I read through the documentation and found that there are different ways of adding stylelint to the project. I decided to create a stylelintrc.js file. I added stylelint to the project using npm i stylelint — save-dev. I then altered the package.json file under scripts to include “stylelint”: “stylelint dashboard/*.css”. Now I can run stylelint with npm run stylelint. I looked through the main.css file to see what was being used. I then looked through the documentation and added lint rules that I thought were relevant to the project. As the project changes, these rules can be modified to best suit the project. The maintainer mentioned checks using github actions, which I will be researching later.

Now the course has come to an end. Overall, I really enjoyed taking open source. I’ve learned so much in the past few months and enjoyed working on a collaborative project. It was a really neat idea to modernize the planet cdot feed and I feel proud knowing that I contributed to the telescope project. I wish to continue with contributing to open source in the future. Thanks for reading!

✌🏼

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade