DEV Community: CodingWith-Adam

Getting Started with Server-Sent Events (SSE) using Express.js and EventSource

CodingWith-Adam — Mon, 24 Jun 2024 22:08:45 +0000

Server-Sent Events (SSE) is a technology that allows a server to push updates to the client over a single HTTP connection. It's a great way to handle real-time data in web applications, offering a simpler alternative to WebSockets for many use cases.

If you prefer watching a tutorial, you can watch the accompanying video here. The video provides a step-by-step guide and further explanations to help you understand SSE better. It goes into more details than the written tutorial below.

Understanding HTTP Requests and Responses

First, let's take a look at how a typical set of HTTP requests and responses work. In the diagram below, you can see that the client opens a connection for a resource such as an image, HTML file, or API call. The client then receives a response, and the connection closes. The client can then open another connection to make another request and receive a response, at which point the connection closes again.

Understanding Server-Sent Events (SSE)

With Server-Sent Events (SSE), a client can open a connection with a request and keep that connection open to receive multiple responses from the server. Once the connection is open, the communication direction is one-way: from the server to the client. The client cannot make additional requests over the same connection.

The client initiates the connection with a request using an Accept header of text/event-stream. The server responds with a Content-Type of text/event-stream and typically uses Transfer-Encoding: chunked. This encoding allows the server to send multiple chunks of data without knowing the total size of the response beforehand.

In the diagram below, you can see how the SSE connection is established and how data flows from the server to the client:

Project Structure

We'll be organizing our project into two main folders: server for the backend and client for the frontend.

sse-example/
├── client/
│   ├── index.html
│   └── index.js
└── server/
    ├── index.js
    └── package.json

Setting Up the Server

First, we'll create an Express.js server that can handle SSE connections. You'll need Node.js installed on your machine. Navigate to the server folder and initialize a new Node.js project:

mkdir server
cd server
npm init -y

Install the necessary dependencies:

npm install express cors
npm install --save-dev nodemon

To use ES6 imports, make sure your package.json includes "type": "module":

package.json

{
  "name": "sse-example",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "cors": "^2.8.5"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

Next, create a file called index.js in the server folder and add the following code:

import express from 'express';
import cors from 'cors';

const app = express();
const port = 3000;

app.use(cors());

app.get('/currentTime', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    const intervalId = setInterval(() => {
        res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
    }, 1000);

    req.on('close', () => {
        clearInterval(intervalId);
        res.end();
    });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

In this code, we create an Express.js server that listens for GET requests on the /currentTime endpoint. The server sets the necessary headers for SSE and sends a timestamp to the client every second as a simple string. We also handle client disconnections by clearing the interval and ending the response.

Setting Up the Client

For the client side, we'll use a simple HTML file and JavaScript to handle the SSE stream. Create a client folder and create the following files index.html and index.js as per the file structure:

sse-example/
├── client/        <-- Here
│   ├── index.html <-- Here
│   └── index.js   <-- Here
└── server/
    ├── index.js
    └── package.json

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="index.js"></script>
    <style>
      body {
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1 id="time">Time</h1>
  </body>
</html>

index.js

const eventSource = new EventSource('http://localhost:3000/currentTime');

eventSource.onmessage = function(event) {
    document.getElementById('time').textContent = `${event.data}`;
};

eventSource.onerror = function() {
    console.log("EventSource failed.");
};

In this HTML and JavaScript setup, we create a connection to the server using EventSource and update the time displayed in the DOM as new messages are received. We also handle any errors that might occur with the EventSource connection.

Running the Example

To run the example, start the Express.js server by executing:

cd server
npm start

Then, open index.html using VS Code Live Server extension. Install VS Code Live server if you have not already by going to the extensions tab and finding live server and clicking install. Once installed right click the index.Html file and click Open With Live Server. Your default browser will open and you should see see the time being updated every second.

Conclusion

Server-Sent Events provide an efficient way to handle real-time updates in web applications. With just a few lines of code, you can set up an SSE server and client to stream data seamlessly. Give it a try in your next project and enjoy the simplicity and power of SSE!

Feel free to reach out with any questions or feedback in the comments below. Happy coding!

GitHub Copilot Top Features

CodingWith-Adam — Mon, 13 May 2024 16:35:27 +0000

GitHub Copilot is an AI pair programmer right in your IDE. By learning how to use GitHub Copilot you can increase your productivity.

In this article we cover 12 amazing features of GitHub Copilot. For a video walkthrough check out the video linked at the bottom of the article.

Real Time Suggestions

As you type code into your IDE Github copilot will give you suggestions in the form of ghost text. When this text appears you can choose to accept it, cycle through different options or decline it.

Inline Chat

The inline chat allows you to ask Copilot to modify code in the current open file.

Voice Input

There is something satisfying about being able to communicate with your IDE verbally to complete a task. With the inline chat open click the microphone button and ask copilot a question or to perform a task on the open file.

Test Generation Command

Not only can you ask Copilot to generate tests for you but you can do it quicker by using the /tests command. You can ask it to generate tests for an entire file or a single function.

Documentation Generation Command

Documentation can be easily generated by using the /doc command

Fix Errors Command

With the /fix command you can ask Github copilot to find and fix issues.

Explain Command

Working on a new code base you that you don't understand? Problem solved you can use the /explain command to explain how the code works. Highlight the code you want explain and ask in the inline chat or ask it to explain the entire file.

Chat Panel

The chat panel is an interactive chat where you can ask questions back and forth with GitHub Copilot. It's the same as using Chat GPT except that you can only ask questions that are related to software development.

Commit Message Generation

GitHub copilot makes it easy to generate commit messages from within VS Code. Just click the sparkle icon next to the commit message text box.

Agents

At the time of this article there are three agents Workspace, VS Code and Terminal. Agents setup the context for the chat panel and allow copilot work in a sandboxed environment of your code.

Workspace Agent

The GitHub Copilot @workspace agent enhances code suggestion capabilities by analyzing and understanding the entire context of your workspace, enabling it to make informed recommendations that align with your project's architecture and dependencies. It supports project-specific customization and advanced refactoring, improving code consistency and quality across multiple files.

VSCode Agent

The @vscode agent allows you to ask questions about VS Code. It uses the documentation for VS Code to find your answer and guide you with instructions. For example you could ask @vscode how do I change my theme

Terminal agent

The @terminal agent allows you to ask question about terminal commands or even create commands. For example you could ask @terminal how do I commit using git

Follow the Sparkles

The last feature is to follow the sparkles. Anywhere you see a sparkle give it a click and see what GitHub copilot can do for you.

React Hooks Explained - Crash Course

CodingWith-Adam — Mon, 28 Aug 2023 17:56:30 +0000

Learn all these react hooks in one short video: useState, useEffect, useContext, useMemo, useCallback, useRef, useReducer, useImperativeHandle. This tutorial also briefly covers forwardRef and memo.

This is a crash course with quick explanations for each hook.
Check out the video to learn more.

21 Amazing VSCode Extensions

CodingWith-Adam — Mon, 21 Aug 2023 18:50:45 +0000

These are some of my favorite VSCode extensions that I use to increase my productivity. Checkout my video to learn more and see a demo of each extension.

Prettier is an opinionated code formatter. I have it setup so that every time I save it formats my code.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Code Spell Checker This extension is an awesome spell checker. It really cuts down spelling mistakes and prevents those embarrassing spelling mistakes in pull requests. It supports English and many more languages. You can even add custom dictionaries
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
EsLint is a static code analysis tool for identifying problems in your javaScript code. With this extension it will highlight those problems provided you have ESLiint installed in the workspace or globally.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Error lens is a perfect companion to ESLint and other extensions that add language diagnostics. It will highlight the entire line when possible and show the error message inline.
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
Material Icons The Material icon theme extension updates your explorer icons to material icons. The Icons look much nicer than the default icons and it even adds a folder icon.
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
The live server extension allows you to launch a local development server with live reload. This extension is awesome for development with JavaScript, Html and CSS. I personally use it for javascript game development.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Auto Rename Tag will automatically rename the closing tag for HTML or XML. In my opinion this is an overlooked feature that should be built into VSCode.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Peacock - Have you ever worked on more than one project with different vsCode windows. It can get confusing which is which. Here is a simple solution to have a different color for each VSCode window using an extension called Peacock. With peacock we can easily set a different color for each VSCode project by opening the command palate and selecting peacock change favorite color.
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
Auto-open Markdown is a great extension that will automatically open the preview of a MD file next to the edit version.
https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview
Markdown All In One adds keyboard shortcuts and more for markdown.
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
Code runner can run code snippets right in VSCode. It supports many languages.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Jest extension a fully featured test runner for Jest.
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
Jest Runner is a great alternative to the jest extension that adds a run and debug button above each test plus various context menus to run tests.
https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
Simple React Snippets helps to speed up react development with many popular code snippets to write react code faster.
https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
Github Copilot is an AI pair programmer right in your IDE. It can suggest lines or entire functions to write. GitHub Copilot uses a special version of GPT-3 that has been trained on a large body of public source code. I have used it in the past and found it very useful unfortunately it is no longer free and requires a monthly subscription.
https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
The IntelliCode extension is an AI Assistant for python typescript, javascript and java. IntelliCode is an AI-boosted upgrade to the built in intelliSense code completion feature of VSCode. It uses AI to provide more accurate suggestions for code completion. It does this by analyzing a developer's code context to make these better suggestions. It is not as powerful as GitHub Copilot, however the price tag is free.
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
YAML - if you write any YAML install this for its awesome autocompletion and validation of YAML.
https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
GitLens - Git Supercharged as you can tell from the name adds a ton of git features to VSCode. The best feature is the git blame feature. It adds text to every line letting you know the last developer to modify the line of code. Unfortunately some of the features require a subscription.
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git Graph is a graphical representation of your git log and allows you to perform actions from the graph.
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Git History is a graphical representation of your git log and allows you to perform actions from the graph.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
VSCode Pets adds cute pixelated pets to VSCode. Each pet has a different animation that can amuse you while you code. You can even throw a ball for them to chase.
https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

Build an Awesome Version of Tic Tac Toe in React

CodingWith-Adam — Mon, 14 Aug 2023 17:50:51 +0000

Try the game here:

https://codingwith-adam.github.io/tic-tac-toe-react/

In this Tutorial we are going to build an awesome version of Tic Tac Toe using React.

Learn React concepts such as thinking in components, useState hook and useEffect hook. We also cover JS audio, CSS concepts such as flex-box and grid layouts for display and more to create a delightful UI.

The following component diagram is used to help us think in components.

Take the tutorial on youTube here:

How to Easily Change VSCode Color Theme

CodingWith-Adam — Mon, 12 Jun 2023 19:06:05 +0000

In this video I will show you how to easily change VSCode color theme with an extension called Peacock. This extension changes the color of the title bar, status bar and activity bar.

Once installed the extension can be accessed from the command palette. Simply open the command palette and search for peacock. You can select from a list of predefined favorite colors. You can darken or lighten a selected color. You can even save a favorite color.

This extension is great for identifying different VSCode windows at a glance. If you work with other developers and do not want to commit your color settings you can easily remove and reapply your changes when switching between branches.

To learn more check out the wonderful documentation at https://www.peacockcode.dev/guide/#overview

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

VS Code Pets!

CodingWith-Adam — Mon, 20 Mar 2023 17:11:47 +0000

Increase your productivity and happiness with the VSCode Pets extension!

A fun extension that adds pets to your VSCode editor. Never be lonely again while working remote.

https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

VS Code Pets! - YouTube

Increase your productivity and happiness with the VSCode Pets extension!A fun extension that adds pets to your VSCode editor. Never be lonely again while wor...

youtube.com

How to Code Chrome Dino Game with JavaScript and a HTML Canvas

CodingWith-Adam — Wed, 11 Jan 2023 00:29:38 +0000

In this exciting tutorial we are going to build a clone of the chrome dinosaur game with Javascript and a HTML Canvas. This version of the game can be played on a touch screen or with a keyboard. The game will scale to fit on any size screen.

Try the game out here. On a mobile device play in landscape orientation for the best experience.

The goal of the game is for the dinosaur to avoid the obstacles by jumping over them. As the dinosaur runs along the desert it will encounter cactuses. If you don't jump over them it's game over. Our dino can perform a low or high jump. A low jump is achieved with a quick tap of the screen or quick press of the space bar. A high jump requires taping the screen longer or pressing the space bar longer.

We will cover the following topics and more:

Game loop
Animation
Collision detection
Scaling a game to fit to any size screen.
How to take into account different frame rates.
Randomly generating enemy sprites(cactuses)
and much more!

If you enjoy this tutorial please subscribe, like and share on YouTube.

YouTube Tutorial:

How to use ChatGPT AI to Create the Game Snake in JavaScript

CodingWith-Adam — Mon, 19 Dec 2022 22:56:11 +0000

In this video we use ChatGPT an AI assistant to help us create the game snake in javascript.

Introduction to Lexers, Parsers and Interpreters with Chevrotain

CodingWith-Adam — Mon, 28 Nov 2022 19:40:24 +0000

In this exciting tutorial we are going to learn how to use a library called Chevrotain. It can be used to build parsers/compilers/interpreters for various use cases ranging from simple config files to full fledged programming languages. If you ever wondered how programming languages are built this is a great introduction. We will start with an intro to lexers(tokenization), parsers, grammars and much more. Then build a simple calculator that uses all these concepts.

Other than building a simple calculator using chevrotain the concepts that we will learn here are those that are used to build programming languages like javascript, .net, SQL and much more. Perhaps one day you will make your own language. There is a lot to understand and this tutorial will give you an idea of further areas to explore.

There are 3 primary concepts in the diagram above.

The lexer which takes input as a string and converts the input into a set of tokens.
The Parser which takes the tokens from the lexer and returns a syntax tree based on a grammar. The grammar is often expressed in a meta language such as Backus-Naur Form (BNF). The grammar is the language of languages and provides the rules and syntax.
The interpreter which takes in the syntax tree and evaluates the result. In this case we return the result of calculator input.

Check out the video tutorial to learn more:

To learn more about Chevrotain visit:
https://chevrotain.io/

How to use JS Gamepad API and Build a Gamepad Tester in 12 minutes

CodingWith-Adam — Wed, 23 Nov 2022 00:43:26 +0000

An easy to build gamepad tester using the JavaScript Gamepad API. This gamepad tester displays a controller and highlights the buttons being pressed. It can even show the position of the analog sticks in real time.

Check out the video to learn more:

How to use JavaScript Gamepad API to Build a Simple Game

CodingWith-Adam — Wed, 16 Nov 2022 23:21:14 +0000

In this exciting tutorial we will use the JavaScript Gamepad API to build a simple game to move a player around on the screen using a controller.

We will be programming the direction pad and left analog stick to move the player on the screen. We will also use the face buttons to change the color of the player depending on the button pressed.

The JS Gamepad API allows developers to use a gamepad as an input device. The most common usage would be for game development. The Gamepad API has 2 events. One event for when a controller is connected and another for when it is disconnected. There is no event for when a button is pressed on the controller. However the developer can ask the Gamepad for the state of the buttons at any time. Included in this state is the list of buttons and a list of axes that represent the analog sticks if there are any. Checking for the controller state can be done in a loop or on a timer. For game development this will happen in the game loop. At the start of each game loop you can retrieve the state of the buttons and then use that information to manipulate your game.

Learn more in this tutorial: