DEV Community: saksham

How to use Mapbox in Next.js

saksham — Sat, 27 May 2023 13:15:00 +0000

Table of content

Mapbox
- Setting up the Mapbox key
Next.js
- Dependencies
- Adding key to Next.js configuration
Initializing the map
Adding styles
Adding the map controls
Loading the data
Adding the custom markers
Adding the marker popup
Conclusion

Mapbox

At the time of writing this article, to use Google Maps API, you need billing information (even though it is free for certain limits). So, Mapbox can be a better alternative to Google Maps which provides, 50,000 free map loads for the web (without billing credentials). It provides a range of APIs, SDKs, and developer tools for maps, navigation, and search across platforms.

Setting up the Mapbox key

Goto Mapbox and create an account or login if you have one.
In your account dashboard, under Access tokens section, select Create a token button.
In Create an access token page, name your token and hit Create token.
While creating token you can also add different types of token restrictions and url restriction. But for current app we will simply use the default settings.

Next.js

In this article, we are using Next.js 13 for our app. We opted for App Router for our app instead of Page router. Thus, the src/app directory will contain our root route example.com/. The page.js file will define a unique page for each route, and the layout.js file will define the UI shared between multiple pages like navigation, header, and footer. We can also nest layouts.

But for simplicity, we will use the root route only. Thus, our initial file structure looks like this:

  src
  ├─ app/
  │  ├─ globals.css
  │  ├─ layout.js
  │  ├─ page.js
  package-lock.json
  package.json

Dependencies

In this app, we will use react-map-gl and react-icons. We will use the react-map-gl package to use Mapbox components in the Next.js app.

To install the dependencies run:

npm install react-map-gl react-icons --save

Adding key in Next.js environment

We will add the access token we created in the above section as an environment variable in our Next.js app. In your Next.js root folder, create a .env.local file (if you don't have one) and use the prefix NEXT_PUBLIC_ with the variable name.

# .env.local
NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=<Your_Mapbox_Access_Token>

Initializing the map

In the page.js file, we will import the Map component from the react-map-gl package. The Map component will render the map. But first, we need to supply the following values to initialize the Map component:

mapboxAccessToken: This attribute takes in the Mapbox access token that we had stored in the .env.local file. We can access this token using the process.env global variable.
mapbox-gl.css: This file consists of all the styling for our Map component and its child elements. Failing to import this file will result in the inaccurate rendering of the Map component and its elements like Marker, Popup, Navigation Controls, etc.
initialViewState: This attribute takes in the initial location (latitude, longitude, and zoom level). When the map first loads this location will be rendered.

// page.js
"use client";

import Map from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import classes from "./Page.module.css";

export default function Home() {
    const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;

    return (
        <main className={classes.mainStyle}>
            <Map
                mapboxAccessToken={mapboxToken}
                mapStyle="mapbox://styles/mapbox/streets-v12"
                style={classes.mapStyle}
                initialViewState={{ latitude: 35.668641, longitude: 139.750567, zoom: 10 }}
                maxZoom={20}
                minZoom={3}
            ></Map>
        </main>
    );
}

Adding styles

In src/app/globals.css add the following style:

/* globals.css */

body {
    font-family: Arial, Helvetica, sans-serif;
}
/* Overrides the original padding of the Popup component in the Map */
.mapboxgl-popup-content {
    padding: 0 !important;
}

Create a src/app/Page.module.css file and add the style for map components:

/* Page.module.css */

.mainStyle {
    max-width: 100%;
    height: 100vh;
}
.mapStyle {
    width: 100%;
    height: 100%;
}
.popupTitle {
    background-color: #87bd41;
    font-weight: 700;
    font-size: medium;
    color: ivory;
    padding: 10px;
}
.popupInfo {
    font-weight: 400;
    font-size: 14px;
    padding: 10px;
}
.popupLabel {
    font-weight: bold;
}
.popupWebUrl {
    color: dodgerblue;
}
.popupWebUrl:active,
.popupWebUrl:focus {
    outline: 0;
}

Adding the map controls

The map controls generally include Navigation controls and Geo-location controls. Under Navigation controls, we get zoom-in, zoom-out, and compass controls. Under Geo-location controls, we get user location control.

// page.js
"use client";

import Map, { NavigationControl, GeolocateControl } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import classes from "./Page.module.css";

export default function Home() {
    const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;

    return (
        <main className={classes.mainStyle}>
            <Map
                mapboxAccessToken={mapboxToken}
                mapStyle="mapbox://styles/mapbox/streets-v12"
                style={classes.mapStyle}
                initialViewState={{ latitude: 35.668641, longitude: 139.750567, zoom: 10 }}
                maxZoom={20}
                minZoom={3}
            >
                <GeolocateControl position="top-left" />
                <NavigationControl position="top-left" />
            </Map>
        </main>
    );
}

Our initial map looks like this:

Loading the data

For illustration, we will use some airport data. It is not structured in standard geospatial formats like GeoJSON, KML, OSM etc. It is represented in simple JSON format, but it works for now. In the project root, create a dummyData folder with the airports.json file. We are using partial data on airports in Japan, which is available here. You can get complete data from here.

Import by adding import airports from "../../dummyData/airports.json"; in import section of the page.js file. Our project structure will look like this:

  dummyData
  ├─ airports.json
  src
  ├─ app/
  │  ├─ globals.css
  │  ├─ layout.js
  │  ├─ page.js
  │  ├─ Page.module.css
  package-lock.json
  package.json

Adding the custom markers

We will use the Array.map() function to iterate through each airport's information from the airports.json file. In each iteration, we will return the Marker component from the react-map-gl package and each Marker will represent the airport data (point of interest) on the map.

To customize the map marker, we will provide icons from the react-icons package as button to the Marker component. The onClick() event on the button will set the selectedMarker state and add flyTo animation to the map. To animate the map, we will use the useRef React hook.

// page.js
"use client";
import { useState, useRef } from "react";

import Map, { Marker, Popup, NavigationControl, GeolocateControl } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { IoMdAirplane } from "react-icons/io";

import airports from "../../dummyData/airports.json";
import classes from "./Page.module.css";

export default function Home() {
    const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
    const [selectedMarker, setSelectedMarker] = useState(null);
    const mapRef = useRef(null);

    const zoomToSelectedLoc = (e, airport, index) => {
        // stop event bubble-up which triggers unnecessary events
        e.stopPropagation();
        setSelectedMarker({ airport, index });
        mapRef.current.flyTo({ center: [airport.lon, airport.lat], zoom: 10 });
    };

    return (
        <main className={classes.mainStyle}>
            <Map
                ref={mapRef}
                // attributes...
            >
                {/*Geolocate and Navigation controls...*/}

                {airports.map((airport, index) => {
                    return (
                        <Marker key={index} longitude={airport.lon} latitude={airport.lat}>
                            <button
                                type="button"
                                className="cursor-pointer"
                                onClick={(e) => zoomToSelectedLoc(e, airport, index)}
                            >
                                {<IoMdAirplane size={30} color="tomato" />}
                            </button>
                        </Marker>
                    );
                })}
            </Map>
        </main>
    );
}

Adding the marker popup

Marker popup can be useful to provide comprehensive information about the point of interest in our map. When a marker is selected, we will use React state to toggle the popup for that particular marker.

// page.js
"use client";
import { useState, useRef } from "react";

import Link from "next/link";

import Map, { Marker, Popup, NavigationControl, GeolocateControl } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { IoMdAirplane } from "react-icons/io";

import airports from "../../dummyData/airports.json";
import classes from "./Page.module.css";
export default function Home() {
    // functions...

    return (
        <main className={classes.mainStyle}>
            <Map
            // attributes...
            >
                {/*Geolocate and Navigation controls...*/}
                {/*Airport Markers...*/}

                {selectedMarker ? (
                    <Popup
                        offset={25}
                        latitude={selectedMarker.airport.lat}
                        longitude={selectedMarker.airport.lon}
                        onClose={() => {
                            setSelectedMarker(null);
                        }}
                        closeButton={false}
                    >
                        <h3 className={classes.popupTitle}>{selectedMarker.airport.name}</h3>
                        <div className={classes.popupInfo}>
                            <label className={classes.popupLabel}>Code: </label>
                            <span>{selectedMarker.airport.code}</span>
                            <br />
                            <label className={classes.popupLabel}>Country: </label>
                            <span>{selectedMarker.airport.country}</span>
                            <br />
                            <label className={classes.popupLabel}>Website: </label>
                            <Link
                                href={selectedMarker.airport.url === "" ? "#" : selectedMarker.airport.url}
                                target={selectedMarker.airport.url === "" ? null : "_blank"}
                                className={classes.popupWebUrl}
                            >
                                {selectedMarker.airport.url === "" ? "Nil" : selectedMarker.airport.url}
                            </Link>
                        </div>
                    </Popup>
                ) : null}
            </Map>
        </main>
    );
}

Our final map looks like this:

Conclusion

In this article, we created a map application in Next.js using the Mapbox API. We rendered the map and plotted the airport location with additional information using the popup.

You can add many features to the application and create fascinating map applications. We will explore these features in the upcoming articles. Until then, happy coding.

Thanks for reading this article. Don't forget to check out my other articles. You can support this article by sharing it. Bye 👋

Lost to Found - Redis Hackathon

saksham — Mon, 29 Aug 2022 11:41:00 +0000

Overview of My Submission

Lost to found is a web app where users can search for lost or found items. Users also can submit items they have lost or found. Users can search for a lost/found item by category or full-text search. Users can provide images and geolocation in their submissions.
It is built using Next js (fronend), Node js (backend) and Redis Stack (database).

Submission Category:

MEAN/MERN Mavericks

Redis Stack is used as primary database
Next js (React framework) is used for frontend
So it's RENN

Language Used

JS/TS/Node.js

Link to Code

More detail about how to run the full program is available on the project's GitHub repo below.

Backend
sakshamgurung / lost-to-found-api
Lost to Found

Lost to found is a web app where users can search for lost or found items. Users also can submit items they have lost or found. Users can search for a lost/found item by category or full-text search. Users can provide images and geolocation in their submissions.

Adding New Submission

Searching for found item

How it works

Lost to found web app is based on client-server architecture. There are three layers:
1. Next js Front-end: This layer uses RESTful api to request for lost/found submissions and full-text search. It renders the response from Node js server.
2. Node js Server: This layer handles RESTful endpoints for request/response. This layer uses RedisOM to map JS objects with Redis JSON documents and Hashses. This layer connects with Redis database for any CRUD and search operations.
3. Redis Database Server: This layer is hosted on Docker. It perform any database related operations as…
View on GitHub
Frontend
sakshamgurung / lost--to--found
Lost to Found

Lost to found is a web app where users can search for lost or found items. Users also can submit items they have lost or found. Users can search for a lost/found item by category or full-text search. Users can provide images and geolocation in their submissions.

Adding New Submission

Searching for found item

How it works

Lost to found web app is based on client-server architecture. There are three layers:
1. Next js Front-end: This layer uses RESTful api to request for lost/found submissions and full-text search. It renders the response from Node js server.
2. Node js Server: This layer handles RESTful endpoints for request/response. This layer uses RedisOM to map JS objects with Redis JSON documents and Hashses. This layer connects with Redis database for any CRUD and search operations.
3. Redis Database Server: This layer is hosted on Docker. It perform any database related operations as…
View on GitHub

Additional Resources/Info

Screenshot
Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

A brief introduction to web services

saksham — Tue, 21 Jun 2022 06:34:55 +0000

Table of content

What are Web Services?
What are SOAP web services?
- Roles in SOAP web services
- Main Operations in SOAP web services
- Standards/Components in SOAP web services
What are REST web services?
- What is a resource in REST?
- When is a service considered RESTful?
Conclusion

Web applications we create have always been heterogeneous. We use different programming languages, frameworks, platforms, and third-party services. Some languages provide speed, and some provide access to the machine level. Some services offer better plans, and some frameworks may better suit the requirements.

Whatever is the reason, we need a common medium to establish communication and interoperability between components of our application. For such situations, we use web services.

What are Web Services?

Web Service is a collection of open protocols and standards that creates a system for data exchange and interoperability between web applications. Web services are usually based on:

SOAP web services (based on XML protocol)
REST web services (based on RESTful architecture)

In most books and articles, web services are strongly associated with XML-based technologies only because the idea of using XML tech for this purpose precedes RESTful architecture. But in this article, we are taking it as a general concept of a standardized system only that helps in data exchange and interoperability.

Web services generally place themselves in between client and server. The client invokes the services it needs through a series of request messages and server responses with appropriate data. Web services use different protocols (HTTP, SMTP), and data formats (XML document, JSON) to facilitate this communication. Web services are also often referred to as SOA (Service-Oriented Architecture).

What are SOAP web services?

SOAP (Simple Object Access Protocol) web services are standardized XML-based messaging protocol that uses HTTP or SMTP for transmission. It means such SOAP web services primarily use XML to describe and standardize their data and documents.

Roles in SOAP web services

Service Provider: Platform that host the services or web applications.
Service Registry: Logically centralized directory where the service provider can publish their service description to be discovered and used by the service requestor. It is also called UDDI (Universal Description, Discovery, and Integration)
Service requestor: Platform that consumes the provided services or web applications.

Main Operations in SOAP web services

Publish: A service provider publishes its service description in a service registry. WSDL (XML-based language) is used as a standard format to describe the services or web applications.
Find: The service requestor retrieves the service description. It is performed either during design time or during runtime invocation.
Bind: The service requestor initiates an interaction with the service provider using the information found in the service registry. This information helps to locate, contact, and invoke the web applications hosted by the service provider.

Standards/Components in SOAP web services

UDDI (Universal Description, Discovery, and Integration)
UDDI is an XML-based framework functioning like a directory that provides a mechanism for describing, registering, and discovering web services on the internet. It is platform-independent.
WSDL (Web Services Description Language)
WSDL is an XML-based language used by a service provider for describing web service interfaces. It describes how to access a service, the parameters needed by the services, and what operations it will perform.
SOAP (Simple Object Access Protocol)
SOAP is an XML-based standard communication protocol for creating messages and communicating over an HTTP or SMTP network. A service requestor creates a SOAP request packet and invokes a web application method. Then the service provider responds to the method call by creating a SOAP response packet.

Below is an example of a SOAP request and response message for a book price. It has a predefined structure that it follows.

<soap:Envelope> tag marks the xml file as a SOAP message
optional <soap:Header> tag gives application specific information like transactional, authentication, payment.
<soap:Body> tag represents actual SOAP message. Generally, it describes the application method name, argument name, and its values.

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope/" soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">
  <soap:Header>
    <t:Transaction xmlns:t="some-URI" soap:mustUnderstand="1">
    </t:Transaction>
  </soap:Header>

  <soap:Body>
    <m:GetBookPrice xmlns:m="http://www.example.com/book">
      <title>Indian Cook Book</title>
      <author>John Doe</author>
    </m:GetBookPrice>
  </soap:Body>
</soap:Envelope>

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope/" soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">
  <soap:Body xmlns:m="http://www.example.com/book">
    <m:GetBookPriceResponse>
        <m:Price>25.5</m:Price>
    </m:GetBookPriceResponse>
  </soap:Body>
</soap:Envelope>

What are REST web services?

REST (REpresentational State Transfer) is a faster, scalable, and lightweight alternative to SOAP. It is an architectural approach that provides guidelines and constraints on how to design a network-based system, and represent data and services for that system.

What is a resource in REST?

Data like files, images, databases, etc are represented logically as a resource. The resource creates an abstraction layer to simplify representations of data. Resource maintains its unique URI (Uniform Resource Identifier) on the web. A resource can be requested using URI and be manipulated using standard HTTP methods/operations such as GET, POST, PUT, and DELETE. Response to such a request will represent the state of the resource. This representation can be in any possible standard format like JSON (most preferred), XML, text, or HTML.

When is a service considered RESTful?

REST defines some criteria to consider a service or an API RESTful:

Client-server architecture

The system follows the separation of concerns principle. It separates into a client (UI), server, and resources (data storage concern). Such a system simplifies each component, improves scalability, and most importantly, allows components to evolve independently

Statelessness

This constraint indicates stateless communication protocols where no client information is stored between requests and each request is separate, self-contained, and unconnected. It makes a suitable use case for high-volume transactional applications, increasing performance.

Catchability

The response should implicitly or explicitly define itself as either cacheable or non-cacheable to prevent stale or inappropriate data in the client's response. This will streamline client-server interactions.

Layered system

Hidden from the client, a server can be maintained in layers. Each layer can perform extra functionality such as proxy, load-balancer, and security. Each layer retrieves requested information to perform respective operations.

Code on demand (optional)

A server can maintain layers where each layer performs extra functionality such as proxy, load-balancer, and security. Each layer retrieves requested information to perform respective operations.

Uniform interface
- Resource identification in requests: A unique URI identifies a resource in every request. The resources are conceptually different from the representation returned to the client.
- Resource manipulation through representations: Resources can be manipulated by the client via the representation in response. It holds enough information to do so.
- Self-descriptive messages: The response message includes enough information that helps to process the message. E.g: which parser to invoke, the data type of message, etc.
- HATEOAS (Hypermedia as the engine of application state): After accessing a resource (like the homepage to a website), the REST client should be able to use hyperlinks dynamically and recursively discover all the available resources it needs.

Conclusion

SOAP web services are suitable for enterprise solutions and distributed systems. It is heavily standardized and is strict in that sense. It works with both HTTP and SMTP protocols. It offers you many open pre-build extensible modules. It also supports built-in error handling.

SOAP has a steep learning curve, and may not suit faster, and lighter builts and projects. Following standards is often difficult and time-consuming. So be wise with what modules you use in your SOAP systems.

REST on the other handle is lightweight, scalable, and faster. You can learn, and implement REST in less time and steps. It doesn't have standards to follow which is flexible but you may waste time figuring out the "best practices".

Serving your cat video using the Internet - A basic understanding of HTTP and socket programming (in Java)

saksham — Mon, 06 Dec 2021 12:05:13 +0000

Table of content

Roles on the Internet
A common language
Soft layers
Coding
Conclusion

This blog explains the basic understanding of HTTP, client-server model, network layers, and some socket programming in Java.

Roles on the Internet:

Developers and designers can select different arrangements and architecture for their computers to develop an internet service. In this article, we are talking about the most commonly used client-server model. There are mainly two roles in this model:

client: A client computer initiates a request for the resources and the information from the server computer.
server: A server computer processes the client request and responds with appropriate information.

Fig.1: Client-Server model

A common language:

To conduct communication between a client and a server a common language is necessary. We can develop and use any language we desire to make these computers communicate with each other. But to make it usable, compatible, and widely accessible we need a standardized language (aka protocol). This is where the HTTP protocol comes in.

HTTP protocol defines the structure for request and response messages. It is like sending a parcel to your friend with an address structured as street name, city name, state name, zip code, and country code.
HTTP defines operations that can be performed on a given resource. These are called HTTP request methods. They are also referred to as HTTP verbs. Some examples are:
- The GET method requests a representation/state of the specified resource/data. It should only retrieve data.
- The POST method submits an entity to the specified resource, often causing a change in the server.
HTTP protocol also defines different sets of status codes to indicate different states that may occur during communication like successful responses (200-299), client error responses (400-499), server error responses (500-599), etc.
HTTP requests and responses share a similar structure and are composed of:
- A single start-line describing the requests/response to be implemented, or it's status of whether successful or a failure.
- An optional set of HTTP headers specifying the request/response or describing the body included in the message.
- A blank line indicating all meta-information for the request has been sent.
- An optional body containing data associated with the request (like the content of an HTML form) or the document associated with a response. The presence of the body and its size is specified by the start-line and HTTP headers.

Fig.2: Structure of HTTP message

Soft layers:

The software model of the Internet can be defined by two types of layered models: OSI model (for reference only) and Internet Protocol Suite (practically implemented and used by the Internet). Without going into much depth the main points are:

Every computer (client or server), and network device that supports the Internet implements the IP suite model.
These models are structured as layers so we say the model has a layered structure
Each layer has its responsibility and hides its implementation (inner working) from other layers
Each layer provides an interface to layers immediately above or below itself

Note:

In the IP suite model, the Application layer combines all three layers from the OSI model i.e Application + Presentation + Session

In the IP suite model, the Link layer combines the lower two layers from the OSI model i.e Physical + Datalink

The lowermost layer from each model connects with physical network devices like routers, switches, etc.

Fig.3: Layered Models of a network

HTTP comes under the Application layer which is accessible to the user process. HTTP protocol uses the services provided by the Transport layer (TCP or UDP) to establish and conduct communication with other computers on the Internet. But to glue these two layers together, the operating system provides an interface called the socket API. Programming that utilizes the socket API is called socket programming.

A socket is like the two ends of a water pipe that handles the flow of water. But the only difference is that the information flows in both directions in a socket. A socket can be identified by a socket address which combines protocol type, IP address, and port number. The socket API makes it easy to use different protocols and develop communication in a network. The following figure shows a general flow of communication using the socket API. We will understand more about these socket functions later in our coding part.

Note:

This figure shows the socket functions implemented in the C language. In this article, we will be using socket functions from Java.

Fig.4: Flow of communication between client-server socket using TCP (in C)

Coding:

Basic files and project structure

Note:
Please first install java JDK for this project, setup your environment variables, and check everything is working well.

Main project folder will contain a public and a resources folder. In the public folder, we will store all our .html pages, and in the resources folder, we will store our resources like images, videos, etc.
Our main server program WebServer.java will be in the project's root directory.

    <!-- ./public/index.html -->
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Cat Paws</title>
    </head>
    <body>
        <div>
            <h1  style="text-align: center;">Cat Paws</h1>
            <a  style="display: flex; justify-content: center;" href="cats">Serve me some cat videos</a>
        </div>
    </body>
    </html>

    <!-- ./public/cats.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Cat Paws</title>
    </head>
    <body>
        <h1 style="text-align: center;">Cat-videos</h1>
        <div style="display: flex; justify-content: center;">
            <video width="640" height="480" controls>
                <!-- 'watch' will be replaced later by the server -->
                <source src="watch/cat-test-video" type="video/mp4">
            </video>
        </div>
    </body>
    </html>

If you are coding along with this article please store any video inside the ./resources folder and name it cat-test-video.mp4
The project structure should look something like this:

Fig.5: Project structure

Creating a socket and listening for new connections

// Inside WebServer.java file
// Some necessary imports
import java.net.*;
import java.io.*;

import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

import java.security.NoSuchAlgorithmException;
import java.util.Arrays;
import java.util.Scanner;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

// Inside WebServer.java file
public class WebServer{
    public static void main (String args[]) throws IOException NoSuchAlgorithmException {
        int serverPort = 9090;
        // allocating resources for server's socket and assigning a port number
        ServerSocket listenSocket = new ServerSocket(serverPort);
        try{
            System.out.println("Server program started...");
            while(true) {
                // listening to the assigned port number and accepting
                // new client connection
                System.out.println("\nListening for new connection...");
                Socket clientSocket = listenSocket.accept();
                System.out.println("\nA client is connected.....");

                // Initializing 'Connection' class with 
                // client's socket address
                Connection c = new Connection(clientSocket);
            }
        } catch(IOException e) {
            System.out.println("Listen error:" + e.getMessage());
        } finally{
            listenSocket.close();
        }
    }
}

The above code does the following things:

Creates a socket and assigns a port number to listen (aka server's socket address).
The server's system listens to the assigned port for any new connection request from the client-side
If the connection is successful and accepted by the server, it returns the client's socket address
Initializes the Connection class with the client's socket info to process the client's HTTP request and send back an HTTP response

Creating a `Connection` class

// Inside WebServer.java file
// Thread class is extended to use multi-threading facility
class Connection extends Thread {
    DataInputStream in;
    DataOutputStream out;
    Socket clientSocket;

    public Connection (Socket clientSocket) {
        try {
            this.clientSocket = clientSocket;
            // accessing input stream from the given socket
            this.in = new DataInputStream( this.clientSocket.getInputStream());
            // accessing output stream from the given socket
            this.out = new DataOutputStream( this.clientSocket.getOutputStream());
            // starts a new thread
            this.start();
        } catch(IOException e) {
            System.out.println("Connection: "+e.getMessage());
        }
    }

    // continue...

The above code does the following things:

Accesses the input stream from the link that bridges the server and the client socket. This stream is used to read the client's HTTP request.
Accesses the output stream from the link that bridges the server and the client socket. This stream is used to send an HTTP response from the server computer.

Processing client's HTTP request and sending HTTP response from server

    // continue Connection class...

    // overiding run method from Thread class
    public void run(){
        // Initializing a Scanner class to read stream input from the
        // socket connection between server and client
        Scanner scan = new Scanner(this.in, "UTF-8");
        try{ 
            // separating the HTTP request header from rest of the HTTP message
            // "\\r\\n\\r\\n" below refers to the 'empty line' from fig.1
            String requestHeader = scan.useDelimiter("\\r\\n\\r\\n").next();

            System.out.println("*********Header Data***********");
            System.out.println("*******************************");
            System.out.println(requestHeader);
            System.out.println("*******************************\n\n");

            // decomposing request header to understand client request message
            String[] headerLines = requestHeader.split("\r\n");
            String[] startLine = headerLines[0].split(" ");

            String method = startLine[0];  // GET method
            String path = startLine[1];    // index.html
            String version = startLine[2]; // HTTP version

            // handling GET request from the client
            if (method.equals("GET")) {
                // calling helper method to search and get the path that
                // leads to the resource client is looking for
                Path filePath = getFilePath(path);

                System.out.println("file path: " + filePath);
                // checking if resource path exists
                if (Files.exists(filePath)) {
                    // file exist
                    // calling helper method to guess the file extension 
                    // type like .html, .mp4, etc
                    String contentType = guessContentType(filePath);

                    System.out.println("file exist");
                    System.out.println("content type:" + contentType);

                    // calling helper method and setting standard HTTP 
                    // status code, response type, and response content
                    sendResponse("200 OK", contentType, "", Files.readAllBytes(filePath));

                } else {
                    // file not found
                    System.out.println("File not found");

                    byte[] notFoundContent = "<h1> File not found :( </h1>".getBytes("UTF-8");

                    sendResponse("404 Not Found", "text/html", "", notFoundContent);
                }
                out.flush();
                break;
            }
        } catch(Exception e) {
            System.out.println("EOF:"+e);
        } finally {
            scan.close();
            try {
                clientSocket.close();
            }catch (IOException e){
                /*close failed*/
            }
        }
    }
    // continue...

Some helper methods

    // continue Connection class...

    // helper method: getting the path to access the requested resource/information hosted by the server (aka routing)
    private static Path getFilePath(String path) {
        Matcher match = Pattern.compile("/watch/").matcher(path);
        if(match.find()){
            // replacing "watch" with "resources" because we have our videos inside that directory
            path = path.replaceAll("/watch/", "./");
            path = path + ".mp4";
            return Paths.get(path);
        }

        if ("/".equals(path)) {
            path = "index.html";
        }else if("/cats".equals(path)){
            path = "cats.html";
        }

        return Paths.get("./public/", path);
    }

    // helper method: guessing the resource extension eg: .html, .mp4 etc
    private static String guessContentType(Path filePath) throws IOException {
        return Files.probeContentType(filePath);
    }

    // helper method: creating response message for the client's request
    private void sendResponse(String status, String contentType, String additional_header, byte[] content) throws IOException {
        byte[] response = (
            "HTTP/1.1 " + status + "\r\n"
            + "Content-Type: " + contentType + "\r\n"
            + additional_header 
            + "\r\n").getBytes("UTF-8");
        out.write(response, 0, response.length);
        out.write(content, 0, content.length);
        out.write("\r\n\r\n".getBytes("UTF-8"));
    }
}

Compiling the `WebServer.java` file

Open a command line in the project directory and compile the java file with the command javac WebServer.java. Two class files WebServer.class and Connection.class will be created.
Then run the server with the command java WebServer
Open the browser, which will be our client, and you can open the inspect windows and then the network tab in the browser to see the network activity
Type localhost:9090 in the address bar to send a request to our server. Then our index.html page will be loaded
Now click the blue link Serve me some cat videos to request the server for a video
In the network tab, we can notice that, after clicking the link, our client sends two requests to the server: one for the cats.html page and one for the video file.

Conclusion

What we have learned in this article is just a speck of technology used on the Internet. We should be thankful for all those brilliant minds and engineering that make the Internet possible. Most importantly stay curious, and learn.

DEV Community: saksham

How to use Mapbox in Next.js

Table of content

Mapbox

Setting up the Mapbox key

Next.js

Dependencies

Adding key in Next.js environment

Initializing the map

Adding styles

Adding the map controls

Loading the data

Adding the custom markers

Adding the marker popup

Conclusion

Lost to Found - Redis Hackathon

Overview of My Submission

Submission Category:

Language Used

Link to Code

sakshamgurung / lost-to-found-api

Lost to Found

Adding New Submission

Searching for found item

How it works

sakshamgurung / lost--to--found

Lost to Found

Adding New Submission

Searching for found item

How it works

Additional Resources/Info

A brief introduction to web services

Table of content

What are Web Services?

What are SOAP web services?

Roles in SOAP web services

Main Operations in SOAP web services

Standards/Components in SOAP web services

What are REST web services?

What is a resource in REST?

When is a service considered RESTful?

Conclusion

Serving your cat video using the Internet - A basic understanding of HTTP and socket programming (in Java)

Table of content

Roles on the Internet:

A common language:

Soft layers:

Coding:

Basic files and project structure

Creating a socket and listening for new connections

Creating a Connection class

Processing client's HTTP request and sending HTTP response from server

Some helper methods

Compiling the WebServer.java file

Conclusion

Creating a `Connection` class

Compiling the `WebServer.java` file