DEV Community: Panda Quests

Socket.io for beginners

Panda Quests — Sat, 04 Feb 2023 12:34:07 +0000

This post was first published on my blog. If you want to know more details, read my blog:
https://levelup.gitconnected.com/beginners-guide-to-socket-io-6161157fc3b9

Or follow me here or on my blog.

Socket.IO is a JavaScript library that enables real-time, bidirectional communication between clients and servers. It allows you to create web applications that can handle a high volume of concurrent connections and enables you to build real-time features such as chat, notifications, and collaborative editing. In this article, we'll give you a brief introduction to Socket.IO and how it works. We'll also discuss some of the key features of the library and show you how to get started with Socket.IO in your own projects.
This is just one out of many articles about IT. Feel free to follow or support pandaquests for more great content about JavaScript, web development, and software development. We try to publish multiple times a week. Make sure not to miss any of our great content.

Definition
As mentioned in the beginning, Socket.IO is a JavaScript library that enables real-time, bidirectional communication between clients and servers. It allows you to create web applications that can handle a high volume of concurrent connections and enables you to build real-time features such as chat, notifications, and collaborative editing.
Features
Some of the key features of Socket.IO are:
Real-time, bidirectional communication between clients and servers: Socket.IO enables you to send and receive data in real time between the client and server.
Cross-platform compatibility: Socket.IO can be used to build real-time applications for the web, mobile devices, and desktop applications.
Automatic reconnection: Socket.IO will automatically try to reconnect if the connection is lost, making it easy to build highly available real-time applications.
Event-based communication: Socket.IO uses an event-based model for communication, where the client and server can emit and listen for events. This makes it easy to build real-time features such as chat, notifications, and collaborative editing.
Fallback transports: Socket.IO can use WebSockets or fall back to other techniques such as long-polling if WebSockets are not available. This makes it easy to use Socket.IO in a wide variety of environments.
Binary support: Socket.IO can send and receive binary data, making it easy to build real-time applications that transfer files or other binary data.
Namespaces: Socket.IO allows you to divide your application into multiple "namespaces", each with its own set of connections and events. This can be useful for organizing your real-time application into logical components.

Functionality
Socket.IO uses a combination of WebSockets, polling, and other technologies to enable real-time communication. When a client (such as a web browser) wants to establish a connection with the server, Socket.IO establishes a WebSocket connection if the browser supports it. If the browser does not support WebSockets, Socket.IO falls back to other techniques such as long-polling to establish a connection.
We wrote an article about WebSockets here already.
Long polling works by having the client send a request to the server, and then the server keeps the request open until it has new data to send back to the client. Once the server has new data, it sends a response to the client and the client sends a new request immediately. This process is repeated, allowing the client and server to communicate in real-time.
One of the main drawbacks of long polling is that it requires a new HTTP request-response cycle for each piece of data that is exchanged between the client and server. This can result in increased latency and reduced efficiency compared to WebSockets. However, long polling can be a good choice in certain situations, such as when the client and server need to communicate over HTTP rather than a dedicated WebSocket connection.
Once the connection is established, the client and server can send data to each other in real time. Socket.IO uses an event-based model for communication, where the client and server can emit and listen for events. For example, the client might emit a "message" event with some data, and the server could listen for that event and respond by emitting a "response" event with some data of its own.
Socket.IO is a popular choice for building real-time web applications because it abstracts away the complexities of real-time communication and provides a simple, easy-to-use API. It is also cross-platform, meaning it can be used to build real-time applications for the web, mobile devices, and desktop applications.

Example
To get started with Socket.IO in your own projects, you'll need to do the following:
Install the Socket.IO library: You can install Socket.IO using npm or yarn by running npm install socket.io or yarn add socket.io. Alternatively, you can include the Socket.IO client library in your HTML file by adding a script tag to your HTML file:
Set up the server: On the server side, you'll need to set up Socket.IO to listen for incoming connections. Here's an example of how you might set up Socket.IO with an express server in Node.js:

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
server.listen(3000);
Set up the client: On the client side, you'll need to create a Socket.IO client and connect to the server. Here's an example of how you might do this in JavaScript:

const socket = io('http://localhost:3000');
Send and receive events: Once the client is connected to the server, you can use the emit and on methods to send and receive events. For example, the client can emit a "message" event with some data, and the server can listen for that event and respond by emitting a "response" event with some data of its own:

// On the client:
socket.emit('message', 'Hello, server!');
// On the server:
io.on('connection', (socket) => {
socket.on('message', (data) => {
console.log(data); // 'Hello, server!'
socket.emit('response', 'Hello, client!');
});
});

That's the basic idea! With these steps, you should be able to get started with Socket.IO in your own projects. There are many more advanced features and configurations available in Socket.IO, so be sure to check out the documentation for more information

We hope you enjoyed this article. Do you have any questions? Let us know and comment below.

For more details you can read them on my blog:
https://levelup.gitconnected.com/beginners-guide-to-socket-io-6161157fc3b9

How to persistently saving custom objects in Android

Panda Quests — Thu, 29 Dec 2022 17:39:44 +0000

This post was first published on my blog

In almost any app you need to persistently save custom information in your app and later load it and display it to the user. Unfortunately Android doesn’t provide you this functionality out of the box. Therefore in this tutorial, I’ll show you how to create an app that persistently saves custom objects with gson.

The technologies I’ll use are as follows:

Android studio
android 28
gson
gradle
This article is mainly based on this post. But because some API have changed, you won’t be able to create an app if you follow the above mentioned tutorial. It took me a while to get it going. In order to save you time, I create this tutorial for you. Also I added some additional information that was not mentioned in my above mentioned reference post and that may be helpful for beginners.

First create a new app via android studio select the empty app template and call it e.g. MyApplication. Then add the following dependencies into your build.gradle file:

dependencies { implementation 'com.android.support:design:28.0.+' implementation 'com.google.code.gson:gson:2.8.5' }

We need for our UI some designs that is not provided by the standard android SDK. Therefore we have to add the design dependency:
implementation com.android.support:design:28.0+

Google provides you with gson methods you can use to serialize and deserialize java objects: https://github.com/google/gson

Mind you, the number 28 in i.e. com.android.support:design:28.9.+ refers to your target SDK version. make sure that these are always the same number. In my example it’s 28. Your’s may differ. In order to know which target version you are using, you can also check in your gradle-file:

android { compileSdkVersion 28 defaultConfig { ... targetSdkVersion 28 ... } }
Once you have added the above dependencies, click on the “sync” (at the top right corner) so gradle can download the needed dependencies.

The next step is to design our main layout. We want two input fields where we type in some data (that we will later save) and two buttons: Insert and save. The Insert button inserts our newly created object into the list displayed in the main view. The save button saves it persistently on our app. In the layout folder write inside the activity_main.xml file this:

`<?xml version="1.0" encoding="utf-8"?>
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="de.pandaquests.myapplication.MainActivity">

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="100dp"
    android:background="@android:color/darker_gray" />

<EditText
    android:id="@+id/edittext_line_1"
    android:layout_width="180dp"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="52dp"
    android:hint="Line 1" />

<EditText
    android:id="@+id/edittext_line_2"
    android:layout_width="180dp"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentBottom="true"
    android:hint="Line 2" />

<Button
    android:id="@+id/button_insert"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/edittext_line_1"
    android:layout_marginStart="13dp"
    android:layout_marginTop="23dp"
    android:layout_toEndOf="@id/edittext_line_1"
    android:text="insert" />

<Button
    android:id="@+id/button_save"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@id/button_insert"
    android:layout_toEndOf="@+id/button_insert"
    android:text="save" />

Next is we create the UI for our custom element. The custom element represents the data we insert into the list. Create in the layout folder a file named example_item.xml by right clicking and choose new -> Layout resource file. Write example_item.xml as the name and ignore the rest, because we will overwrite everything inside of that file with the following code inside of it:

`<?xml version="1.0" encoding="utf-8"?>
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="4dp">

    <TextView
        android:id="@+id/textview_line1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Line 1"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textview_line_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textview_line1"
        android:layout_marginStart="8dp"
        android:text="Line 2"
        android:textSize="15sp" />

</RelativeLayout>

Once we are done with that, we will create the needed functionality for our main activity. Inside the MainActivity.java file write the following:

`package de.pandaquests.myapplication;

import android.content.SharedPreferences;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

import java.lang.reflect.Type;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

ArrayList<ExampleItem> mExampleList;
private RecyclerView mRecyclerView;
private ExampleAdapter mAdapter;
private RecyclerView.LayoutManager mLayoutManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    loadData();
    buildRecyclerView();
    setInsertButton();

    Button buttonSave = findViewById(R.id.button_save);
    buttonSave.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            saveData();
        }
    });
}

private void saveData() {
    SharedPreferences sharedPreferences = getSharedPreferences("shared preferences", MODE_PRIVATE);
    SharedPreferences.Editor editor = sharedPreferences.edit();
    Gson gson = new Gson();
    String json = gson.toJson(mExampleList);
    editor.putString("task list", json);
    editor.apply();
}

private void loadData() {
    SharedPreferences sharedPreferences = getSharedPreferences("shared preferences", MODE_PRIVATE);
    Gson gson = new Gson();
    String json = sharedPreferences.getString("task list", null);
    Type type = new TypeToken<ArrayList<ExampleItem>>() {}.getType();
    mExampleList = gson.fromJson(json, type);

    if (mExampleList == null) {
        mExampleList = new ArrayList<>();
    }
}

private void buildRecyclerView() {
    mRecyclerView = findViewById(R.id.recyclerview);
    mRecyclerView.setHasFixedSize(true);
    mLayoutManager = new LinearLayoutManager(this);
    mAdapter = new ExampleAdapter(mExampleList);

    mRecyclerView.setLayoutManager(mLayoutManager);
    mRecyclerView.setAdapter(mAdapter);
}

private void setInsertButton() {
    Button buttonInsert = findViewById(R.id.button_insert);
    buttonInsert.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            EditText line1 = findViewById(R.id.edittext_line_1);
            EditText line2 = findViewById(R.id.edittext_line_2);
            insertItem(line1.getText().toString(), line2.getText().toString());
        }
    });
}

private void insertItem(String line1, String line2) {
    mExampleList.add(new ExampleItem(line1, line2));
    mAdapter.notifyItemInserted(mExampleList.size());
}

You’ll probably see lots of errors. But don’t worry it’s because there are still files missing. Next we create the ExampleAdapter.java. Create in your project folder (the folder where also your MainActivity.java file is) a file named ExampleAdapter.java

`package de.pandaquests.myapplication;

import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

public class ExampleAdapter extends RecyclerView.Adapter {
private ArrayList mExampleList;

public static class ExampleViewHolder extends RecyclerView.ViewHolder {
    public TextView mTextViewLine1;
    public TextView mTextViewLine2;

    public ExampleViewHolder(View itemView) {
        super(itemView);
        mTextViewLine1 = itemView.findViewById(R.id.textview_line1);
        mTextViewLine2 = itemView.findViewById(R.id.textview_line_2);
    }
}

public ExampleAdapter(ArrayList<ExampleItem> exampleList) {
    mExampleList = exampleList;
}

@Override
public ExampleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.example_item, parent, false);
    ExampleViewHolder evh = new ExampleViewHolder(v);
    return evh;
}

@Override
public void onBindViewHolder(ExampleViewHolder holder, int position) {
    ExampleItem currentItem = mExampleList.get(position);

    holder.mTextViewLine1.setText(currentItem.getLine1());
    holder.mTextViewLine2.setText(currentItem.getLine2());
}

@Override
public int getItemCount() {
    return mExampleList.size();
}

Now we only need our custom Object. Let’s create ExampleItem.java file in your project folder and paste in the following code:

`package de.pandaquests.myapplication;
public class ExampleItem {
private String mLine1;
private String mLine2;

public ExampleItem(String line1, String line2) {
    mLine1 = line1;
    mLine2 = line2;
}

public String getLine1() {
    return mLine1;
}

public String getLine2() {
    return mLine2;
}

We should now be set. Press on run and you should see a working sample app that saves custom data.

You can download the whole app here from my gitHub and tweak it as you like. Use it as a base for your own projects.

If you used the code I provided, then tell my what projects you intend to implement or already implemented. I’m really curious to know. So long.

More details can be found in the original article. If you want to know more, drop a line or follow me here or on my tech blog.

URI vs. URL vs. URN

Panda Quests — Wed, 28 Dec 2022 17:47:59 +0000

This post was first published on my blog:

You may have come across these terms before. And you may have used it interchangeably. But there are differences between them and if you are a professional software developer or working in the field of web development, it’s important to discern these terms.

An URI (Uniform Resource Identifier) identifies a resource on the Internet either by location, or by name, or both. There are two subsets of URIs: The URL (Uniform Resource Locator) and the URN (Uniform Resource Name).

The URL specifies where an identified resource is located and the mechanism for retrieving it. In case of an HTTP URL it is the HTTP protocol. But the machanism for retrieving the resource, doesn’t have to be HTTP URL, i.e. “http://”, an URL can also be “ftp://” (File Transfer Protocol for computer files) or “smb://” (Server Message Block for shared access to files, printers, serial ports, and miscellaneous communications between nodes on a network).

The URN is part of a larger Internet information architecture and unambigously identifies a resource. Contrary to the URL it does not imply availability of the identified resource.

The URL is similar to a person’s address, as it defines somethings’s location, while the URN is similar to the ISBN of a book, as it unambigosly defines something’s identity. In other words: The URL answers the question Where something is while the URN answers the question Who something is.

Source(s) and for more information:
RFIC3986: http://www.ietf.org/rfc/rfc3986.txt
http://en.wikipedia.org/wiki/File_Transfer_Protocol
http://en.wikipedia.org/wiki/Server_Message_Block

Have you followed or subscribed to us, yet? We are publishing articles about JavaScript and software development in general multiple times a week. Make sure not to miss any of our great content.

More details about this and many other topics on my blog

How HTTP works

Panda Quests — Mon, 26 Dec 2022 08:41:36 +0000

This article was first published on my blog. For more details or to support me, read that article on my blog.

When browsing the internet you are using the HTTP/HTTPS protocol. Whenever you are clicking a button, calling an address in the browser, download a file on the internet, you are making an HTTP request. As simple as they may seem, there are process behind the curtain that make it all work. Have you ever wondered how it works behind the curtain? In this article I’ll explain to you how HTTP works.

HTTP is a so called request response protocol. Meaning the client sends the request and the Server replies with a response. Request and response are both carefully formatted messages that the other can understand. Both messages are different message types. They are exchanged in a single HTTP transaction. These messages are in ASCII text and formatted according to the HTTP standard so client and server know how to interpret the content correctly.

Any application that is able to open a network connection to a server machine and is able send data over the network can make an HTTP request. Even you can try this. Just type in manually the HTTP request by using Telnet from the command line. Heads up: A normal telnet session connects over port 23. As it was mentioned before, in order to connect to a server via HTTP we have to use port 80.

In the following example we will use Telnet in order to

connect to a server
make an HTTP request
receive an HTTP response

telnet www.google.com 80

This command tells the computer to connect to a server with the host name “www.google.com” on port 80. After the connection is established you can write the HTTP request message:

GET / HTTP/1.1

The “GET” part tells the server we want to retrieve a resource.
The “/” tells the server that the resource we want to retrieve is located at the root resource of the home page.
“HTTP/1.1” tells the server we are using the HTTP 1.1 protocol to speak to him.

Next you type this line:

host: www.google.com

That line specifies the requested resource on the server, because one server could host multiple websites.

After you type in this and pressed ENTER twice, you should see the HTTP response. The response is plain and simple HTML code. If the code would send to a browser then he would take the code render it into a website.

Do you have any questions? Please leave a comment and I’ll get back to you as soon as possible.

This article was first published on my blog. For more details or to support me, read, share, and like that article on my blog. Thank you in advance

URL encoding

Panda Quests — Sun, 25 Dec 2022 21:00:23 +0000

This post was first published on my blog. For more details check it out.

In my last article I talked about what an URL is. In this article I’ll go a little bit further and talk in easy to understand way about what URL encoding is and why it is so important to URL encode.

Photo by NASA on Unsplash
URL was designed to make it as usable and interoperable as possible. Therefore the internet standard defines so called “unsafe characters”.

Examples for unsafe characters are:
The space “ ”, because they seem to disappear when printed or you don’t know how man space characters are there.
The pond/sharp character “#”, because it is reserved for the fragment (we covered what a “fragment” is here already).
The caret “^”, because not all network devices transmit this character correctly.

What is considered a safe and what an unsafe character is defined in the RFC 3986. RFC stands for Request for Comments. It’s a recommendation made by the IETF (Internet Engineering Task Force). Even though it is officially a recommendation only it is considered a de facto standard.

The RFC 3986 defines safe characters as alpha numeric characters in the US-ASCII and a few special characters like the colon “:” and the slash mark “/”.

If you want to transmit one of these unsafe characters, then you have to “percent-encode” or also called “URL encode” them. For example if you want to store on the server foo.com the file “^hello world.txt”, then the valid URL would look like: “http://foo.com/%5Ehello%20world.txt”

As you can see the caret “^” and the space “ ” have been replaced with “%5E” resp. “%20”. The characters after the percent characters “%” represent the corresponding hexadecimal number in the US-ASCII charachter table, i.e. “5E” and “20” are stands for “^” resp. “ ” in the US-ASCII table.

The full US-ASCII table can be found here.

Once these characters arrive at the server as a request it has parsed through an URL decoder. An URL decoder basically reverses the process of URL encoding. So, instead of having “%5E” or “%20”, you’ll have the caret “^” or the space “ ” character again.

Have you used URL encoding before? What kind of project was it? Do you have any questions? Comment below and let me know.

This article was first published on my blog. For more details or to support me, read that article on my blog

How I stay productive and healthy during home office

Panda Quests — Sat, 17 Dec 2022 20:09:53 +0000

Hi,

Covid19 and the lockdown hit us really hard and has made workplace more challenging than we could anticipate. While for some home office has it’s perks, for others it has some daunting effect on health and work-life-balance. By now most of us thought things would be back to where it used to be. But it seems like home office or at least hybrid work is here to stay

In this article I’ll share 6 tips of how you can stay fit even when working at home.

Simulate that you go to work
Dress up like you normally would. Then go out of your house. Walk around your house and then go back to your house and start working. This will trick your mind that you are going to your actual office to work. It also gets your blood flowing and you’ll be more active when you start working.
Take breaks
When there’s a lunch break go to lunch. Don’t work through the breaks and postpone your meals. Otherwise this will have detrimental effects on your body — especially if you are a little older like me. Also make small breaks once in a while during work. It’s important to take breaks throughout the day to recharge and refocus. This can be as simple as getting up to stretch or going for a short walk.
Take care of yourself
Working from home can be demanding, so it’s important to take care of yourself. Make sure to eat healthy meals, get regular exercise, and get enough sleep. You probably sit longer than usual. So, it’s important to stretch your body. This will help you stay focused and productive.
Create a dedicated place for you to work
Those with small rooms decorate your table. At least make it distinguishable between work and normal life. Choose a quiet, clutter-free space in your home to serve as your office. Having a dedicated workspace can help you stay focused and avoid distractions.
Log out
I found out I worked more when being in home office. Because there is only a short distance to my workplace. Even when work is done and dinner is ready, I would constantly think about work, because it’s so close. So, my advice is, once your daily work is done, log out. Log out also mentally. Don’t think of work, once work is done.
Stay connected with others
Working from home can sometimes feel isolating, so it’s important to stay connected with your colleagues. Use video conferencing tools to have regular meetings, and make sure to communicate regularly through email or instant messaging. Even if you are an introvert (like me), stay connected. Inform yourself about the latest information in your organisation. Set up an appointment at lunch to video chat. It helps you not only to keep in touch with your co workers but with your work so you won’t become detached from it. Maybe even schedule a meeting with one of them once in a while (but bear the personal distance in mind)

What has been your experince with working from home? Do you have any tips that made your life easier when working from home? Please share and comment below.

What simple side hustle would you recommend for a software developer? I would even take one that pays $1 a day

Panda Quests — Sun, 26 Dec 2021 15:38:27 +0000

Do you openly talk about money at your workplace?

Panda Quests — Sun, 26 Dec 2021 15:11:35 +0000

Do you guys invest in the stock market? What broker do you use? What strategy do you follow? What stocks do you invest in?

Panda Quests — Sun, 26 Dec 2021 15:11:05 +0000

Why did you become a software engineer? How did it all started?

Panda Quests — Sat, 25 Dec 2021 18:26:03 +0000

How do you know if someone is a good developer?

Panda Quests — Sat, 25 Dec 2021 18:24:54 +0000

What perks does your employer give to you?

Panda Quests — Sat, 25 Dec 2021 18:24:07 +0000