Forem: Saverio683

Simple chat using sockets in Java

Saverio683 — Tue, 06 Dec 2022 18:01:16 +0000

Hello everyone 👋, I hope you are doing well.
In this post I'll talk about how to use sockets in Java.

📘 INTRODUCTION

In order to make it possible to exchange messages between two nodes, we make use of sockets.
In simple terms, a socket is the pairing of an IP and a network port where packets will be sent/received by hosts.

Sockets are divided into 2 groups, based on the transport protocol implemented: tcp sockets and udp sockets.

In short, TCP (Transmission Control Protocol) is a connection-oriented protocol that ensures that packets are sent correctly, which is useful for one-to-one connections.
On the other hand, UDP (User Datagram Protocol) is a non-connection-oriented protocol used when it is acceptable to lose a few packets in favor of speed (such as in video games or streaming platforms), useful for one-to-many connections.

In Java there are classes that implement both types of sockets.

SOCKET and SERVERSOCKET

In a basic TCP connection we need a server (ServerSocket class) and a client (Socket class).
In the example below, I have implemented a simple network where the server is constantly listening to client requests and assigning it a thread (so as to allow multi-user):

package test;

import java.io.IOException;
import java.net.ServerSocket;
import java.net.Socket;

public class TCPServer {
    static final int PORT = 1234;

    public static void main(String args[]) {        
        System.out.println("Server listening on port "+PORT+"...");

        try {
            ServerSocket server = new ServerSocket(PORT);    

            while(true) {//listening for client connections
                try {
                    Socket socket = server.accept();//Listens for a connection to be made to this socket and accepts it. The method blocks until a connection is made.

                    ServerThread st = new ServerThread(socket);//assigning a thread to communicate with the client
                    st.start();

                    System.out.println("Connection established, thread assigned: "+st.getName());
                }
                catch(Exception e) {
                    e.printStackTrace();
                    System.out.println("Connection error");
                    server.close();       
                }
            }
        }
        catch(IOException e) {
            e.printStackTrace();
            System.out.println("Server error");
        }
    }   
}

The thread that will be assigned to connect with that client will simply respond to its messages:

package test;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.Socket;

public class ServerThread extends Thread {
    private Socket socket;

    public ServerThread(Socket s) {
        super();
        this.socket = s;
    }

    //override of the run method
    public void run() {
        try {         
            BufferedReader br = new BufferedReader(new InputStreamReader(socket.getInputStream()));//for reading client messages
            PrintWriter pw = new PrintWriter(socket.getOutputStream(), true);//to send messages to client

            while(true) {
                String incoming = br.readLine();//listening for the client messages    

                pw.println("You sent me this: "+incoming);//responding to the client
            }  
        } catch (IOException e) {
            System.out.println(this.getName()+": connection ended");
        } 
    }
}

On the client instead there will be 2 threads, one writing and one reading, so the user can send multiple messages while waiting for the response:

package test;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.InetAddress;
import java.net.Socket;
import java.net.UnknownHostException;

public class TCPClient {
    static final int PORT = 1234;

    public static void main(String[] args) throws UnknownHostException, IOException {
        Socket socket = new Socket(InetAddress.getLocalHost(), PORT);//creates the socket, then connects to the server

        BufferedReader serverReader = new BufferedReader(new InputStreamReader(socket.getInputStream()));//for reading server messages
        BufferedReader userReader = new BufferedReader(new InputStreamReader(System.in));//for reading user inputs
        PrintWriter pw = new PrintWriter(socket.getOutputStream(), true);//to send messages to the server

        ClientReader cr = new ClientReader(serverReader);
        ClientWriter cw = new ClientWriter(pw, userReader);

        cr.start();
        cw.start();
    }
}

Write thread:

package test;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

public class ClientWriter extends Thread {
    private PrintWriter pw;
    private BufferedReader stdin;

    public ClientWriter(PrintWriter pw, BufferedReader stdin) {
        this.pw = pw;
        this.stdin = stdin;
    }

    public void run() {

        while (true) {//l'utente invia messaggi finchè la comunicazione col server non si interrompe           
            try {
                String clientInput = stdin.readLine();//reading user input

                pw.println(clientInput);//sending user input to the server
            } catch(IOException e) {
                System.out.println("Client i/o error");
            }
        }
    }
}

Read thread:

package test;

import java.io.BufferedReader;
import java.io.IOException;

public class ClientReader extends Thread {
    private BufferedReader stdin;

    public ClientReader(BufferedReader stdin) {
        this.stdin = stdin;
    }

    public void run() {

        while (true) {
            try {
                String incoming = stdin.readLine();//reading server messages

                System.out.println(incoming);
            } catch(IOException e) {
                System.out.println("Client i/o error");
            }
        }
    }
}

In this example of communication, the client can only communicate with the server and not with other clients.

Here is an example from the console:

DATAGRAMSOCKET and MULTICASTSOCKET

On Java there is the DatagramSocket class aimed at implementing this type of socket. Messages are exchanged in the form of bytes through datagram packets, implemented with the DatagramPacket class, through the send and receive functions.

The one below is an example of a broadcast connection where each host can send/receive messages to/from all hosts on the network, without passing through a server:

package udp;

import java.net.DatagramSocket;
import java.net.InetSocketAddress;
import java.net.SocketException;
import java.net.UnknownHostException;

public class UDPHost {
    static final int PORT = 8290;

    public static void main(String[] args) throws SocketException, UnknownHostException {
        DatagramSocket senderSocket = new DatagramSocket();
        senderSocket.setBroadcast(true);

        DatagramSocket receiveSocket = new DatagramSocket(null);//all read sockets will be listening on the same port
        receiveSocket.setReuseAddress(true);
        receiveSocket.bind(new InetSocketAddress(PORT));

        UDPReader r = new UDPReader(receiveSocket);
        UDPWriter w = new UDPWriter(senderSocket, PORT);

        r.start();
        w.start();
    }
}

In the code above, we need to invoke the setBroadcast method to let the operating system know that the package will be broadcasted.

Now, to send a broadcast message it is not necessary to know the ip of the destination target; rather, you only need to send to the broadcast address of the network interface, which will take care of sending the packet then to the hosts on it.

Write thread:

package udp;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.NetworkInterface;
import java.nio.charset.StandardCharsets;
import java.util.Enumeration;
import java.util.Objects;

public class UDPWriter extends Thread {
    private DatagramSocket socket;
    private int port;

    public UDPWriter(DatagramSocket s, int p) {
        super();        
        this.socket = s;
        this.port = p;
    }

    public void run() {
        try {   
            BufferedReader userReader = new BufferedReader(new InputStreamReader(System.in));//reading user inputs

            while(true) {       
                byte[] sendData = userReader.readLine().getBytes(StandardCharsets.UTF_8);//saves the user input to the buffer
                broadcast(sendData);//sends the packet to all sockets on the network
            } 
        } catch (IOException e) {
            System.out.println(this.getName()+": error sending message");
        }
    }

    public void broadcast(byte[] buffer) throws IOException {
        Enumeration<NetworkInterface> interfaces = NetworkInterface.getNetworkInterfaces();
        while(interfaces.hasMoreElements()) {//iterates all network interfaces on the pc to get the ips of the other hosts where to send the broadcast message
            NetworkInterface networkInterface = interfaces.nextElement();

            if (networkInterface.isUp() || !networkInterface.isLoopback()) {//verifies the integrity of the network interface
                networkInterface.getInterfaceAddresses().stream() 
                    .map(interfaceAddress -> interfaceAddress.getBroadcast())
                    .filter(Objects::nonNull)
                    .forEach(ip -> {//iterate over the ips
                        try {
                            socket.send(new DatagramPacket(buffer, buffer.length, ip, port));//sending the packet
                        } catch (IOException e) {
                            System.out.println(this.getName()+": error sending message");
                        }   
                    });
            }
        }
   }
}

Read thread:

package udp;

import java.io.IOException;
import java.net.DatagramPacket;
import java.net.DatagramSocket;

public class UDPReader extends Thread {
    private DatagramSocket socket;

    public UDPReader(DatagramSocket s) {
        super();
        this.socket = s;
    }

    public void run() {     
        while(true) {           
            try {
                byte[] receiveData = new byte[1024];
                DatagramPacket receivePacket = new DatagramPacket(receiveData, receiveData.length);//messages travel as bytes through datagram packets
                socket.receive(receivePacket);//The socket remains listening for the datagram packet and then saves it to the buffer

                String incoming = new String(receiveData);
                System.out.println(incoming);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

Broadcasting messages, however, is often inefficient because packets do not arrive only at the desired hosts but rather at all of them.

To remedy this, there are multicast sockets that allow a one-to-many connection instead of one-to-all.
The concepts are the same as for datagram sockets. In fact, the MulticastSocket class is nothing more than an extension of the DatagramSocket class; the packets sent are implemented with the DatagramPacket class.

It is possible to send packets only to the desired hosts due to multicast groups: a portion of network traffic, associated only with sockets joining it, that is identified by a multicast address (any address between 224.0.0.0 to 239.255.255.255).
Sockets can join and leave groups via the same-named functions.
To send packets, the send function is already implemented since you pass the name of the network card in the joinGroup method.

Here an example:

package multicast;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.InetAddress;
import java.net.InetSocketAddress;
import java.net.MulticastSocket;
import java.net.NetworkInterface;

public class MulticastHost {
    static final int PORT = 1234; 

    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));//reading user inputs
        MulticastSocket socket = new MulticastSocket(PORT);
        InetAddress ip = null;

        boolean wrongUserInput = true;
        System.out.println("Select a room: a) gossib b) brainstorming c) soccer");

        while(wrongUserInput) {
            wrongUserInput = false;         

            switch(br.readLine()) {
                case "a":
                    ip = InetAddress.getByName("230.0.0.1");
                    break;
                case "b":
                    ip = InetAddress.getByName("230.0.0.2");
                    break;
                case "c":
                    ip = InetAddress.getByName("230.0.0.3");                    
                    break;
                default:
                    System.out.println("wrong room entered, please retry");
                    wrongUserInput = true;
                    break;
            }
        }

        InetSocketAddress address = new InetSocketAddress(ip, PORT);
        NetworkInterface netIf = NetworkInterface.getByName("wlo1");//obtained by typing from terminal the command "ifconfig" (linux)

        socket.joinGroup(address, netIf);
        socket.setBroadcast(true);

        MulticastWriter w = new MulticastWriter(socket, br, ip);
        MulticastReader r = new MulticastReader(socket, ip);

        w.start();
        r.start();

    }
}

Write thread:

package multicast;

import java.io.BufferedReader;
import java.io.IOException;
import java.net.DatagramPacket;
import java.net.InetAddress;
import java.net.MulticastSocket;
import java.nio.charset.StandardCharsets;

public class MulticastWriter extends Thread {
    private MulticastSocket socket;
    private BufferedReader br;
    private InetAddress ip;

    public MulticastWriter(MulticastSocket s, BufferedReader b, InetAddress i) {
        this.socket = s;
        this.br = b;
        this.ip = i;
    }

    private void send(String msg) throws IOException {   

        byte[] msgBytes = msg.getBytes(StandardCharsets.UTF_8);

        DatagramPacket ds = new DatagramPacket(msgBytes, msgBytes.length, ip, socket.getLocalPort());
        socket.send(ds);    
    }

    public void run() {             
        while(true) {
            try {
                String userInput = br.readLine();
                send(userInput);//sending user message to other clients in the same group
            } catch (IOException e) {
                System.out.println(this.getName()+": error sending message");
            }
        }
    }
}

Read thread:

package multicast;

import java.io.IOException;
import java.net.DatagramPacket;
import java.net.InetAddress;
import java.net.MulticastSocket;

public class MulticastReader extends Thread {
    private MulticastSocket socket;
    private InetAddress ip;

    public MulticastReader(MulticastSocket s, InetAddress i) {
        this.socket = s;
        this.ip = i;
    }

    private void listen() throws IOException {      
        byte[] buf = new byte[1024];
        DatagramPacket recv = new DatagramPacket(buf, buf.length, ip, socket.getLocalPort());
        socket.receive(recv);

        String incoming = new String(buf);
        System.out.println(incoming);
    }

    public void run() {
        while(true) {
            try {
                listen();
            } catch (IOException e) {
                System.out.println(this.getName()+": error listening incoming messages");
            }
        }
    }
}

Here is an example from the console:

🔎 CONCLUSIONS

Thank you for reading 🙂! I hope you enjoyed the post and that it may have been helpful to you, if so please leave a like.

You can also see the code in this github repo.

You can follow me to stay updated on my new posts.

Mastering JavaScript 🧑‍💻: Closures

Saverio683 — Sat, 10 Sep 2022 07:35:51 +0000

Hello everyone 👋, I hope you are doing well.

In this post I will explain what closures are using examples as well so that you too can use them to write your code better.

LEXICAL SCOPE ✍️

Before directly explaining what closures are, it is appropriate to explain the concept of scope and lexical scope.

The scope of a function refers that area of code where its variables are "visible" and can be used.
If another function is created within one function, another internal scope will then be created, and so on: this is called a scope chain.

Lexical scope, also called static scope, refers to when the location of a function's definition determines which variables you have access to.

E.g. :

const life = () => {
  const pastEvents = 'past'

  //console.log(actualEvents) this will create an error because that inner variable is not accesible here

  const present = () => {    
    const actualEvents = 'present'

    console.log(pastEvents, actualEvents)//ok
    //console.log(futureEvents) same for this one

    const future = () => {
      const futureEvents = 'future'

      console.log(pastEvents, actualEvents, futureEvents)//ok      
    }

    future()
  }

  present()
}

life()
/*
Outputs:
  past present
  past present future
*/

As you can see, in a nested group of functions the inner functions have access to the variables and other resources of their parent scope.

CLOSURES 🪆

Let's make some changes to the code from before:

const life = () => {
  const pastEvents = 'past'

  const present = () => {    
    const actualEvents = 'present'

    console.log(pastEvents, actualEvents)

    const future = () => {
      const futureEvents = 'future'

      console.log(pastEvents, actualEvents, futureEvents)  
    }

    return future
  }

  return present
}

const newFunc = () => {
  //different scope
  const newLife = life()
  const future = newLife()

  future() 
}

newFunc()
/*
Outputs:
  past present
  past present future
*/

New functions created within the newFunc function have access to the variables pastEvents, actualEvents and futureEvents even if they are in another scope.
This is because the future and present functions are closures: when they are assigned to variables (in our case newLife and future) they close over (from here the term closure) the variables of their lexical scope.

Due to this the closures are memory efficient saving code repetitions.
Here another example:

const addTo = x => y => x + y //x = outer func; y = inner.
const addToTen = addTo(10)
addToTen(3) // returns 13

Another benefit they bring is that of data encapsulation:

const createCounter = () => {
  let count = 0

  return {
    increment() {
      count++
    },
    decrement() {
      count--
    },
    showCount() {
      console.log(count)
    }
  }
}

const myCounter = createCounter()

for(let i = 0; i < 100; i++)
  myCounter.increment()

myCounter.decrement()

console.log(myCounter.count)//returns undefined
myCounter.showCount()//returns 99

In this way, the count variable is private and can be accessed only through proper functions written by the developer.

CONCLUSIONS

If you have come this far in reading, I thank you. If you liked the post please leave a like and check out my other posts 🙂.

Mastering JavaScript 🧑‍💻: How the js engine works

Saverio683 — Fri, 29 Jul 2022 22:02:00 +0000

Hello everyone 👋, I hope you are doing well.

With this post I plan to start a new section called Mastering JavaScript, where I will expound on my knowledge of the programming language learned over time and I hope you find this content useful.

With that said, let's get started!

📘 INTRODUCTION

JavaScript is an interpreted programming language and was born client-side.

Interpreted language means that the code, written by the programmer, is "read" line by line by an interpreter that simultaneously converts it into binary code, understandable by the CPU so that it can be executed.
It is called client-side because the environment in which it runs is the browser, which is located in client devices such as smartphones, PCs, etc...

(Since 2009, JavaScript has also become server-side thanks to Node.js, but I will talk about that in a future post, here I would like to focus on the browser-side)

So the element that is responsible for managing the js execution lifecycle is the JavaScript engine, located inside the browser.

🔎 HOW MANY TYPES OF ENGINES ARE THERE?

Nowadays there are several engines implemented by various browsers that share many features. One of the first was SpiderMonkey born in 1995 for the Netscape browser and is currently used by Mozilla Firefox, Chrome has V8 which is one of the most powerful, Safari uses Nitro and so on and so for...

⚙️ HOW THE JS ENGINE WORKS

Now that we know what a browser engine is, we can get more specific and find out how it works.

THE JS RUNTIME ENVIROMENT

The runtime consists of the call stack and the memory heap:

The stack is a data structure that stores instructions to be executed and when they are executed they will be removed. The first thing that is added to the call stack is the global execution context (or GEC). The GEC consists of the global object, which contains all the JavaScript built-ins and global variables written by the programmer (e.g. for the browser it's the Window object). Then other stacks will be added from the functions created by the developer. So, when the code execution is finished, the last element to be removed from the stack will be the GEC.
In the memory heap, on the other hand, variables are stored dynamically: variables are allocated automatically when a function is called, and they are "deleted" automatically when the function exits. This is done by the garbage collector.

Here is an example:

function one() {
  return 1
}

function two() {
  return one() + 1
}

function three() {
  return two() + 1
}

console.log(three())

Where main() is the GEC.

As we know, JavaScript allows it to be executed asynchronously through special features contained in Web APIs.
In fact, it is within them that asynchronous functions are executed and not within the call stack (since we only have one).

After that, their result of the API (the function in it) is put into the Callback Queue, waiting for the call stack to clear.
The engine is able to tell that the stack is empty and therefore needs to move the data from the Callback Queue thanks to the Event Loop, which is nothing more than a listener that continuously monitors the stack.

Here's an example:

console.log("start")

setTimeout(function() {
  console.log("1 sec delay")
}, 1000)

console.log("end")

So in the end the final pattern will look like this:

THE JIT COMPILER

As I said before, js is an interpreted language.
But nowadays browsers like V8 have implemented just-in-time or JIT compilers, that is, they combine the features of both interpreter and compiler to achieve better performance.

The interpreter as a pro takes very less time to analyze the source code but slowdowns can occur during code execution ( because it interprets the bytecode whenever a method is invoked, this would not be optimal e.g., in the presence of loops).
On the other hand, the compiler scans the entire program and translates the whole of it into machine code at once, thus achieving greater stability and the overall time to execute the process is much slower.

The JIT compiler manages to optimize time by interpreting the code, and assigns to the compiler only that which is reusable (such as methods) by compiling it into native machine language "just in time" to run.

🌐 RESOURCES

JavaScript Engine, Call Stack, Callback Queue, Web API and Event Loop
(I got the gifs and examples from the link above)

Thank you for reading 🙂! I hope you enjoyed the post and that it may have been helpful to you, if so please leave a like.
You can follow me to stay updated on my new posts.

Portfolio template using React

Saverio683 — Tue, 04 Jan 2022 09:59:00 +0000

Hello everyone! I recently created a portfolio template using React and React Router.
It's quite simple to understand and easily customizable.

The App.js

In the App.js through react-router I render the pages:

Home page

The home page simply contains a background image and strings automatically generated with typed.js.

About page

The about page, as the name implies, contains personal information and skills and in the icons folder, in the assets, there are already many icons of programming languages and other ready-to-use icons.

Projects page

The projects page is used to show your projects accompanied by a description.

Contact page

On this page you can show your main profiles and through Emailjs you can send emails directly from the page itself. Here too in the icons folder there are already icons of the main social networks

Customization

All you need to do to modify the various personal fields in the project is contained in the datas.js file and that's it!

Here you can see the live project and here the github repo.

I hope you liked the post, I invite you to comment and leave a review. Thank you.

Creating a weather app using React

Saverio683 — Sat, 04 Dec 2021 21:15:00 +0000

Hello everyone, this is my first blog so I apologize if it won't be written well.

Now let's get started!

First of all, you need to get an API key. For this project I used the free one from OpenWeatherMap.

Once this is done we can move on to the code:

The folder structure

In the app folder there is the App.js file and the files that depend on it, I created this folder just to have more order but it could perfectly well not be there. In the pages folder there are the pages that will be rendered by the App.js via reac-router.The components folder as the name implies contains components such as the icons.
For handling the API response data I used redux.

How the API works
This project, after entering the name of the city and possibly also the country, will give you the current and daily forecasts. To get both forecasts it is necessary to make 2 API calls: the first will give you the current forecast via the name of the city entered; the second one obtains the data through the geographical coordinates of the place (which are obtained from the first call).
They are inserted by the user into the SearchField component that through the onFormSubmit function pass the city name to fetchData that makes the API request through redux.

The SearchField component:

The redux reducer:

The fetchData action:

The components
The two main components are the CurrentForecast and the DailyForecast. Both containers render other components to display the data

The CurrentData component:

The DailyData component:

Routing
In this project, if you click on a day of the daily forecast, you go to the page where the details on the forecast of that day are shown. The redirect of the pages is done via react-router in the App.js:

The details page simply shows the CurrentForecast component with the details of that specific day:

That's pretty all. You can see all the files on github:
https://github.com/Saverio683/weather-app-project
here the finished site:
https://master.d1aih8wyl9juxv.amplifyapp.com/

Thank you for paying your attention to this post. I hope it was helpful to you.