Forem: Mohamed A. Othman

React.JS Brief Introduction

Mohamed A. Othman — Sun, 24 May 2020 00:20:38 +0000

React has been taking the front-end world by storm, and not by accident. It is quite an intuitive way to create user interfaces, also known as the View. I have recently started using it and I can tell you it feels amazing; it’s like the Tesla Model S of JavaScript tools. While it is easy to use once you get going, there are a few concepts, patterns, and technicalities you need to understand in order to use it. If you’re reading this you are on the right path, as this very blog post is dedicated to explaining those!

If you’ve never heard of React and you’re wondering what the hell I’m on about, here’s a super-quick introduction:

React does one thing, and one thing only: it renders your DOM. React is only the ‘view’ portion of MVC and utilizes a virtual DOM which it diffs the new state of your app against, when your UI changes. This enables React to make the minimum required modifications to the DOM. Because React is built around minimizing DOM manipulation, the updates it does make are super fast and solve the problem of layout thrashing.

As a side-effect, React is also great at handling the state of various parts of your application. With React, you build your UI using components - small, to-the-point blocks of UI with their own functionality totally encapsulated in themselves. This makes your layout easy to reason about and compose. Create the components you need and snap them together.

With that out of the way, let’s get on with it.

Overview of the concepts

With React, you build your UI using components, separate files that describe each part of your application interface. Let’s see a simple component, to give you a picture of what I’m talking about. After that, I’ll go through everything you need to know to get started with React.

import React from "react";

class Component extends React.Component {
      constructor() {
            this.state = { name: "Daniel" };
      }

      handleInput(e) {
            this.setState({ name: e.target.value });
      }

      render() {
            return (
                  <div>
                        <input
                              type="text"
                              value={this.state.name}
                              onChange={this.handleInput.bind(this)}
                        />
                        <NameDisplay name={this.state.name}></NameDisplay>
                  </div>
            );
      }
}

class NameDisplay extends React.Component {
      render() {
            return <span>{this.props.name}</span>;
      }
}

Okay, well, that was actually TWO components. They illustrate the topics I want to touch on in this post. The topics are:

React components and JSX.
Properties.
State.
Event handling and user actions.
Component lifecycle.
Using the underlying DOM.

When you have grasped those, you will be able to utilize React right away.

Components and JSX

A React component represents a distinct piece of the user interface of your application and has all its logic contained in it. We saw two of them up above. They’re just Javascript classes, you already know how to use them! Actually, in the beginning, React had its own way of creating Javascript classes. We won’t cover that here, as the new native ES6 class syntax is the way of the future.

To make a component, you create a normal JavaScript class that extends the React.Component superclass. The only thing you need to include in the class for it to work is a render() method, everything else is optional! From the render method you return a description of a piece of the DOM. This is important: The elements you create in a component are not real HTML elements, they’re just a description of how you want your DOM to look at some point in time.

React maintains a virtual DOM in the background, and every time something changes in your components, React compares the new state of the DOM to the previous one and works out what parts it needs to adjust for the real DOM to look the way you want it to. If the new state of the DOM isn’t visibly different from the old one, then great, nothing needs to change. If there are differences, React makes the changes in as few moves as it can to reduce “layout thrashing” . Since layout thrashing can happen even when you read a value from the DOM, having a virtual DOM to read the values from decreases thrashing even further.

In other words, you describe how you want the DOM to look, and React makes sure it happens as efficiently as possible.

“… so we put HTML in your JavaScript!”

And that’s why there’s HTML in your JavaScript. The people at Facebook, who are responsible for React, came up with a convenient abstraction to make it easy to write DOM descriptions in JavaScript. That’s what we call JSX, and it is really quite nice to have! JSX is just JavaScript. You don’t have to use it if you don’t want to, but the choice is between these two forms of syntax:

// JSX code
render() {
    return <div>Hello {this.props.name}</div>
}

// What the above JSX compiles to
render() {
    return React.createElement("div", null, "Hello ", this.props.name)
}

It’s pretty clear to me what I want to use. Can you bother to learn what the arguments for React.createElement are? I haven’t bothered. So the first argument is the element you want to create. Then… what’s that null? No idea. Don’t care. I just use JSX.

There are a few ways you can use to compile your JSX components to JavaScript, but by far the easiest and most well-rounded is Babel, the ES6 -> ES5 transpiler. It includes a JSX transformer by default, so if you throw Babel into your project, you can write both ES6 and JSX without giving the matter a second thought.

JSX in action

JSX works like the good old HTML you’re used to. You can nest elements, give them attributes, classes and ID’s just like before. That said, there are some differences you should be aware of! Here’s a piece of JSX with some “weird” stuff highlighted:

render() {
    return (
        // All components should return ONE root element.
        // If you want many elements in your component, be sure to wrap them all in something like a div.
        <div>
                // As 'class' is a reserved word in Javascript,
                // we give CSS classes to elements using the
                // 'className' attribute.
                <header className="app-header">
                    <nav id="main-nav">
                            // Other HTML attrbutes work like you're used to.
                            // Event handlers are defined inline, and usually point to a method in the component class.
                            <a href="http://example.com" onClick={this.handleClick.bind(this)}>Click me!</a>
                    </nav>
                    // Custom components are used like this. Import the component class,
                    // in this case 'LoginLogout', and use it like an HTML element!
                    // A rule of thumb is that vanilla HTML elements are lowercase, and custom components are CamelCase.
                    <LoginLogout user={this.props.username} ></LoginLogout>
                    // React properties, like 'user' above, are used to provide data
                    // to your components. Just write them like a normal HTML attribute!
                    // Like all attributes you write in React, they can take "strings" or {javascript expressions}.
                </header>
                // The 'children' property is a special one, and contains any React
                // elements you nest into your components. Then, you can spit out the nested children like this.
                {this.props.children}

                // Here's the 'children' in action. Inside the Page component,
                // you would put {this.props.children} to display the PageContent component where you want it to go.
                <Page>
                    <PageContent ></PageContent>
                </Page>
                // This way, your components can be reusable and decoupled
                // from other components, as they don't even need to know anything about their own children!
        </div>
    )
}

As you can see, JSX is a lot like a template language. You can mix and match HTML elements, custom components and third-party components in an intuitive way. I like to compare this to building with Lego. You just snap them together and wire them up to compose your application.

There are some gotcha’s, which are described in React’s documentation.

Here are some additional tricks you can perform with JSX:

/**
 * Create elements in a loop
 */
render() {
      return (
            <div>
                  <ul>
                        // Loop through an array of data and give each item in its own React component:
                        {this.props.arrayOfData.map( item => {
                              // React elements created in a loop require a 'key' property
                              // so React can keep track of it in the virtual DOM.
                              // React WILL shout at you if you omit it. Use the array index
                              // if you don't have anything else, but a unique identifier is recommended.
                              return <ListItem link={item.url} label={item.label} key={item.id}></ListItem>
                            })}
                  </ul>
            </div>
      )
}

/**
 * Use the 'spread' feature to give multiple props at once
 */
render() {
      let data = { name: "Daniel", occupation: "Developer", likes: "React" };
      return (
            <div>
                  // MyCustomComponent receives 'name', 'occupation' and
                  // 'likes' as keys on its 'this.props' object.
                  <MyCustomComponent {... data} ></MyCustomComponent>
            </div>
      )
}

There are of course a lot more to JSX. It is a versatile toolset that you can use to compose any UI. After reading this post, I’m confident that you can figure out amazing ways to use it!

So… how do you USE your components?

Ah, good question! Writing a bunch of cool components without having a way to mount them on your site would be a waste of time! Luckily it’s quite simple.

Usually you would create one top-level component that imports and puts together the other components of your app. Let’s call this top-level guy the AppView.

import React from 'react';
import Header from './HeaderComponent.jsx';
import Page from './PageComponent.jsx';
//... Other components

class AppView extends React.Component {
        render() {
            return (
                  <div>
                        <Header></Header>
                        <Page></Page>
                        //... Other components
                  </div>
            )
      }
}

export default AppView;

Alright, we have our top-level component. Let’s render it on your page!

To do that, we import it into a “normal” JavaScript file, for example your index.js or main.js or what you have. Then, we use the React.render method to output it:

import React from 'react';
import AppView from './AppView.jsx';

React.render(<AppView ></AppView>, document.getElementById('app-container'));

And that’s all there is to it. Tell render() what you want to render and where. The first argument is the component, and the second is a DOM element that the component will be rendered into. React will take it from there, you do not need to call render() again elsewhere.

Whew, time is getting really ripe for the section on props. Let’s get to it!

React properties

I’ve used props a lot already in this post, so you’re probably an expert by now! But just to compile it all and reiterate, here’s the gist.

React components can be given data through a React feature called props, or properties. This is of course a normal thing in JavaScript, but it is integral to working with React. Using props is really simple, you just give your elements attributes, like so: <MyComponent name="Daniel" ></MyComponent>. Now MyComponent has been given the property name with the value "Daniel", which is usable from inside the component class through this.props.name. You saw an example of this in the very first React example of this blog post!

this.props works exactly like a normal JavaScript object, and in fact, it is one. There’s really nothing special going on here, but the implications for generalized, reusable components are huge. React tries its best to make you write components that do one thing well and know as little as possible about the world around them.

One really, really important thing: DO NOT change anything on this.props! Consider the props immutable. The props are owned by the component who gives them, not the component that uses them through this.props. Weird side-effects occur if you reassign any values to properties.

import React from 'react';

class BadComponent extends React.Component {
        render() {
              // DO NOT do this! It will wreak havoc and cause misery.
              this.props.name = "The Joker"
              return ( <div>{this.props.name}</div> )
        }
}

I hope that’s clear!

However, React components are not static. Far from it! They are meant to be dynamic and flashy! So how do we accomplish that, if we’re not allowed to mutate the props? With state of course! Read on.

React state

While props are owned by the component who’s assigning them, the state is owned by the component itself. In fact, the state is completely encapsulated inside components and is private to each component. Otherwise, the state works a lot like props.

Like props, the state is just a plain old Javascript object. The state of a component usually changes when you interact with it, and it is here that you should store the data for your component. Let’s have a look:

import React from 'react';

class StatefulComponent extends React.Component {
        constructor() {
                // Remember to call super!
                super();
                // Initial state is defined in the constructor of the component class.
                // Nothing weird here, we're just creating a normal Javascript object.
                this.state = { firstname: "Daniel", lastname: "Dunderfelt" };
        }

        handleClick(e) {
                // We can change the state using 'this.setState'. When that is called,
                // React will re-render your component to reflect the updated state.
                this.setState({ 
                        firstname: this.state.lastname,
                        lastname: this.state.firstname
                });
                // Here I switch my first and last name on the click of a button.
        }

        render() {
                // We can use state to create derived data. Here I've used ES6
                // template strings to compose my full name.
                let fullName = `${this.state.firstname} ${this.state.lastname}`;
                return (
                        <div>
                                Hi! My name is {fullName}!
                                <button type="button" onClick={this.handleClick.bind(this)}>
                                        Switch!
                                </button>
                        </div>
                )
        }
}

That’s the basics of it. this.state is just an object you use to store data. When this.setState is called, React merges the new state data with the old one and re-renders the component (only if needed of course).

When you’ve read this post and venture out to find more info on React, you may come across the old way of writing React components. They use a method called getInitialState(). That is no longer used in the ES6 era, as setting a state property in the constructor is used instead to achieve the exact same goal.

By the way, you may, and usually will give data from a component’s state to sub-components through props. That’s not a ‘bad’ thing, it is A-OK to write <SubComponent name={this.state.firstname}></SubComponent> in your render methods. That will also re-render the sub-component as the state changes!

Handling events

We’ve seen some event handling in this post already, but I want to dig slightly deeper. Forms in React are a little special in regards to how you should utilize events.

You have seen the click event handling a few times already, but here is another example:

import React from 'react';

class Clicking extends React.Component {
        handleClick(e) {
                // Yes, you can prevent default actions!
                e.preventDefault();
                // Getting the element you clicked
                let clickTarget = e.target;
        }

        render() {
                return (
                        <div>
                                // The handlers are defined inline, using the following syntax:
                                <button type="button" onClick={this.handleClick.bind(this)}>
                                        Click me!
                                </button>
                                // Be sure to 'bind' the context of the method to the class.
                                // Earlier versions of React did this automatically, but in ES6
                                // the job is yours to complete.
                        </div>
                )
        }
}

// You may even pass in a function through props
// to be used as an event handler!
return (
        <div>
                <button type="button" onClick={this.props.clickHandler}>
                        Click me!
                </button>
        </div>
)

So that’s the click event. All events follow the same pattern, prefix the event name with on. We have onClick, onChange, onSubmit and so on. You can use all events that are supported by the underlying HTML element.

On to forms! React advocates that form elements should be “controlled”. That means that your component should set the value pro-grammatically. The value should not simply be written into the input element. This gives you the opportunity to transform the input as your user writes it. For example, you can limit characters in textareas or perform validation on the fly. How do we accomplish this? With a combination of event handlers and state!

import React from 'react';

// I like to define the state of an empty form in one place
const resetState = { firstname: "", lastname: "" };

class Form extends React.Component {
        constructor() {
                super();
                // Initially, we have an empty form. Simply assign the object
                // containing the empty properties to the initial
                state.this.state = resetState;
        }

        // Change
        handlerhandleFirstname(e) {
                // Get the value from the target element
                this.setState({
                        firstname: e.target.value
                });
        }

        // Change
        handlerhandleLastname(e) {
                this.setState({ lastname: e.target.value });
        }

        handleSubmit(e) {
                // Stop the browser from navigating
                e.preventDefault();
                // Simply send the whole state! It contains all the data already.
                // 'sendFormData' is an example function that you would pass down
                // to this component throuh
                props.this.props.sendFormData(this.state);
                // And reset the form using the empty object.
                this.setState(resetState);
        }

        render() {
                return (
                        <div>
                                // Set the submit handler on the form
                                <form onSubmit={this.handleSubmit.bind(this)}>
                                        <label>First name</label>
                                                // This is what makes the input 'controlled'.
                                                // The value does not come directly from the user,
                                                // it comes from the state of the component.
                                                // When the user writes something, we want to update
                                                // the state and, by extension, what value the input has.
                                        <input
                                                type="text"
                                                name="firstnameInput"
                                                value={this.state.firstname}
                                                onChange={this.handleFirstname.bind(this)} />
                                        <label>Last name</label>
                                        <input
                                                type="text"
                                                name="lastnameInput"
                                                value={this.state.lastname}
                                                onChange={this.handleLastname.bind(this)} />
                                        <button type="submit">Submit form</button>
                                </form>
                        </div>
                )
        }
}

And that is what a form in React looks like. Use the change handlers to perform operations on the input, and once the form is submitted, you can safely ferry off the whole state to where-ever. You could create components for the inputs to automatically insert labels and extra elements around them where they are used. There are a number of libraries that provide ready-made React components, including form elements, for you to use. React-bootstrap and material UI are examples of well-made component libraries.

Component lifecycle

In React, components are dynamically mounted, rendered, updated, changed and dismounted. You can hook into these lifecycle events through a bunch of methods that are available on the component classes. These can be used to set state from props, initialize other libraries and perform various actions during each stage of the component lifecycle.

Here’s a list:

componentWillMount, called right before a component is mounted.
It’s brother, componentDidMount, is called right AFTER a component has mounted.
componentWillUnmount is called before the component is removed from the app.
componentWillReceiveProps is called every time the component is given new props.
shouldComponentUpdate is called before it is updated.
componentWillUpdate and componentDidUpdate are called before and after the component is re-rendered.

They are all used the same way, as methods on your component class.

By the way, “mounting” a component means using React.render(<Component></Component>, [DOM element]) to render the component, OR including the component in another component. The “mount” happens only once in the component’s lifecycle.

class LifecycleExample extends React.Component {
        componentWillMount() {
                // This method's phone will ring right before the component ismounted using React.render() or included in another component.
                // If you need to create initial state from props, this is as good a placeas any to do that.The component will not re-renderif you call setState here!
        }

        componentDidMount() {
                // And when the mount has happened, this method is called.
                // By now the component has a DOM representation, so feel freeto use jQuery or some other DOM - based library here.
        }

        componentWillUnmount() {
                // This is the place to clean up after yourself.
                // Remove jQuery eventlisteners(why did you use those ?), image sliders and other widgets.
                // React will take care of removing its own stuff, so you do not needto worry about that.
        }

        componentWillReceiveProps(newProps) {
                // If you need to do anything with eventual new props passed to thecomponent, do it here.
                // This method will get the new props as itsonly argument.Calling setState here will not result in a re-render,
                // as the component will re-render anyway when it receives new props.
        }

        shouldComponentUpdate(newProps, newState) {
                // You can use this method to control if the component should updateat all.
                // Returning false wil stop the rendering in its tracks!As arguments you get new props and the computed next step of the statewhich you can use to compare with the current ones.
        }

        componentWillUpdate(nextProps, nextState) {
                //If the re-render gets the green light, this method is called right beforeit happens.
                // As arguments you get the next props and state, but you CANNOT call setState in this method.Use 'componentWillReceiveProps' instead!
        }

        componentDidUpdate(prevProps, prevState) {
                // And when the update and re-render has happened, guess who is called.
                // You get the previous state and props as arguments.
                // Use this methodto perform operations on that jQuery slider you're using.
        }
}

These methods are great for exercising minute control over your component and integrate it with other libraries. You should use these instead of littering your render() method with various logic. In case you didn’t notice, React enforces a certain architecture through what you can and can’t do in these methods. Take the hints and don’t try to hack around those restrictions! Your future self will thank you for the maintainability.

The underlying DOM

React can be viewed as an abstraction of the real DOM. As such, it is not immediately apparent how to access that real DOM. React’s developers have not left you hanging though!

As the things that are returned from the render() method of a component are not real HTML elements, React has a feature called refs that enable you to get to the real deal. To use it, assign a ref attribute to a JSX element, which you can then use later to retrieve the underlying HTML element. To get an HTML element from a ref, we use the React.findDOMNode() method. An example is in order:

import React from 'react';
import $ from 'jquery';

class RefExample extends React.Component {
        // Once we have an HTMl element for the component...
        componentDidMount() {
                // Use findDOMNode and feed it the ref to get
                // the underlying HTML element. All refs in the
                // component are found on the 'this.refs' object.
                let divRef = React.findDOMNode(this.refs.myDiv);
                // Do something with myDiv using, for example, jQuery:
                $(divRef).fadeIn(200);
        }

        render() {
                return (
                        <div ref="myDiv">
                                This is my div. There are many other like it, but this is mine.
                        </div>
                )
        }
}

Yeah, that’s basically all there is to it. Assign refs, then use findDOMNode to access the HTML element represented by the React component. Only use this if necessary though, we do not want to circumvent React’s virtual DOM too much. Also, only use refs when the renders have completed. componentDidMount and componentDidUpdate are the two lifecycle methods where you can use refs because once they run, you are guaranteed to have an up-to-date and rendered DOM element under your React component.

That is all you need to know to get started with React. There’s a lot more to it though, make no mistake. The goal of this post is not to teach you everything. It is to give you the basics in one place so you can venture onwards and learn more! If you’ve read this in its entirety, you will have the mental context required to understand other React resources. A good next step would be React documentation!

Please ❤ and Share

Thanks for reading this! Hopefully, these few points make this explanation a less confusing experience. If not, I’m happy to clear up any questions (or correct any errors you find here).

An Introduction to Socket.IO

Mohamed A. Othman — Sat, 16 May 2020 18:20:50 +0000

Introduction

Socket.io is a powerful tool for creating real-time applications with two-way communication between the server-side and the client-side in a syntax that looks as if you are just triggering and listening to events. It leverages the power of WebSockets along with several fallbacks. It can be used to create bidirectional interactions, such as real-time dashboards, chat applications, and multiplayer games.

Socket.io is an open-source library created by Guillermo Rauch. It is built with Engine.IO, which is a lower-level abstraction on top of WebSocket technology. The WebSocket API protocol was standardized in 2011. It is a Transmission Control Protocol (TCP) that only relies on HTTP for its initial handshake. After the handshake is complete, the connection is left open so that the server and the client can pass messages back and forth as needed.

It also provides the ability to seamlessly use other real-time protocols if WebSockets are not available. For example, it will fall back on JSON long polling in the absence of WebSocket support.

Long polling is essentially a trick to emulate the WebSocket behavior in browsers that don't support WebSockets.

After a long polling request is made, it is held onto by the server instead of immediately responding as a traditional HTTP request would, When data becomes available, the long polling request will typically be made.

Creating HTTP server with Socket.IO

To get Socket.io running, we need to have a lease one client and one server set up to talk to each other.

Getting server and client-ready

To create a Node.js HTTP server with Socket.IO, follow these steps:

1- Make sure Express, and Socket.IO are installed to use them, By running this command in the terminal npm i -s express socket.io , Express, and Socket.IO will be installed and ready to use.

2- Create a new file called server.js , This will be your server-side code:

// Importing necessary libraries to create the server.
const express = require('express');
const app = express();
const http = require('http');
const socketIO = require('socket.io');

// Adding express application route middleware to serve the index.html page.
app.get('/', function (req, res) {
        res.sendFile(__dirname + '/index.html');
});

// Creating the http server using HTTP module provided by Node.js
const server = http.Server(app);

// Listening to the server we created on port 5000.
server.listen(5000);

// Create socket.io instance be passing the server we created to the socket library
const io = socketIO(server);

// Listening to socket connection event to handle communication state after the handshake communication was established.
io.on('connection', function (socket) {
        socket.emit('greeting-from-server', { greeting: 'Hello Client' });
        socket.on('greeting-from-client', function (message) { console.log(message); });
});

3- you may see the server.js will read a file called index.html. You'll need to create this as well, as shown in the following code:

<!DOCTYPE html>
<html>
        <head></head>
        <body>
                <script src="/socket.io/socket.io.js"></script>
                <script>
                        var socket = io('http://localhost:5000');
                        socket.on('greeting-from-server', function (message) {
                                document.body.appendChild(document.createTextNode(message.greeting));
                                socket.emit('greeting-from-client', {
                                        greeting: 'Hello Server'
                                });
                        });
                </script>
        </body>
</html>

4- With those two files in place, and starting the server by type node server in the terminal from the same server.js file directory, This will start a new Node server on port 5000 , if you navigate to [http://localhost:5000](http://localhost:5000) , you should see a message that says "Hello Client" in the browser.

5- You should also see a message in the terminal with an object that contains a message that say "Hello Server".

What exactly happens

Express is a collection of HTTP utilities and middleware that make it easier to use Node as a web server. Although Express provides a robust API that isn't available out of the box from the built-in Node HTTP Module.

We created a new Express server instance with const app = express(); . We passed this to the http.server(); method. By passing our Express app as the first argument to the HTTP server, we told Node that we wanted to use Express as our handler for HTTP requests.

The browser displays a message that originated on the server, whereas the server displays a message that originated on the client. These messages are both relayed by Socket.IO.

The io.on('connection', function(socket) {...}); method in the server-side code listens for any new client-side socket connections. When the client loads a page with Socket.IO on the client-side, a new connection will be created here.

When the server gets a new socket connection, it will emit a message to every available socket that says "Hello Client". when the client gets this message, it will render it to the DOM. It also emits a message of its own that the server will listen for.

Creating Real-Time application & MongoDB

Although there is a great deal of power in bidirectional communication, Socket.IO is also a perfect tool for creating unidirectional real-time experiences. Many applications need to have some sort of dashboard interface to display analytical data or to show to the state of the application data. For an application state that frequently changes, or if multiple users are changing the state, creating the dashboard in real-time makes for a much better experience.

We can send static data to our client as we can send dynamic data too, by using MongoDB as a NoSQL database that stores data as JSON format documents.

To send dynamic data from a MongoDB database via Socket.IO, we can add a new step when we created our server by connecting to the MongoDB database.

// Importing mongoose from mongoose library
const mongoose = require("mongoose");

// Connecting to mongodb database named [dashboard]
mongoose.connect("mongodb://localhost:27017/dashboard");

// Calling on open, and on error functions to see database connection state.
mongoose.connection
                .once("open", function() { console.log("Connected to MongoDB database."); })
                .on("error", function(err) { console.log("MongoDB connection error: " + err); });

After we created the MongoDB connection we can use mongoose.js instance to create our database model and run CRUD operations query.

// 1- Creating Mongodb database Model
// Importing mongoose from mongoose library
const mongoose = require("mongoose");

// Creating data model using mongoose provided API for creating new Schema.
const CommentSchema = mongoose.Schema({
        user: String,
        comment: String
});

// Creating the Comment model by mongoose provided model function, by passing the table name as a first argument, and created schema as a second argument.
const Comment = mongoose.model("Comment", CommentSchema);

.
.
.

// 2- Quering MongoDB collections.
// getting all comment documents from MongoDB.
const comments = await Comment.find({});

// send ready data to the client using socket connection.
socket.emit('comment.add', comments);

Having Two-Way conversations

Although we can perform some interesting things with one-way communication, the real power of Socket.IO begins to show when the client and server are both participants in a constant dialog.

creating a simple chat room

A basic chat room application is one of the most widely used demos, This shows off Socket.IO or even web sockets in a more general sense.

Building a basic chat room with Socket.IO is neither difficult or complex. This is the sort of application that Socket.IO was designed for.

To create a simple chat application with Socket.IO, follow these steps:

1- Create a server.js file, this file will start the server and emit Socket.IO events whenever a new message is posted to the chat application, In addition to the typical Socket.IO server setup, we will need to add the following code:

// Listening to socket connection event to handle communication state after the handshake communication was established.
io.on("connection", function(socket) {
        // Listen to "message.send" event
        socket.on("message.send", function(data) {
                // Emit to "message.sent" event after "message.send" event fires.
                io.emit("message.sent", data);
        });
})

2- Now, create your index.html template, This will include a <form id="message-form"></form> at the top of the page to post new messages, It also contains a <div class="messages"></div> container to hold our chat messages.

<div class="container">
        <form id="message-form">
                <p>
                        <label>Username</label>
                        <input class="form-control" id="username" />
                </p>
                <p>
                        <label>Message</label>
                        <textarea class="form-control" id="message"></textarea>
                </p>
                <button class="btnbtn-primary" type="submit">Send</button>
        </form>
        <div id="messages"></div>
</div>

3- Then, add the client-side JavaScript. This will submit messages to the server and render messages when they are emitted from the server, as shown in the following code:

// Update the users count
socket.on('message.sent', function (data) {
        $('#messages').prepend(`
            <div>
                 <hr />
                 <div><strong>${data.username}</strong></div>
                 <p>${data.message}</p>
            </div>
     `);
});
$(function () {
        $('#message-form').on('submit', function (e) {
                e.preventDefault();
                socket.emit('message.send', {
                        message: $('#message').val(),
                        username: $('#username').val()
                });
        });
});

The server-side code will act as a hub for incoming messages. When new messages come, it will emit them to all connected sockets.

We will submit the messages from our form on the client-side, we will also render new messages when they are emitted from the server. in this way, the client who emits the message will listen for the same message.sent the event, as all the other clients.

Socket.IO life cycle

If the server maintains a list of our connected sockets, it should always be mindful of when a socket disconnects.

A socket can disconnect for any number of those reasons:

The user may navigate away from the web page that the WebSocket connection is on.
The user's internet may go down.

When these things happen, we can tap into the disconnect event to notify the client-side that the socket is no longer available.

We can implement adding or removing online user based on their socket connection, To remove or add user's references follow these steps:

1- First listen for the socket disconnect event on the server-side, when this occurs, we will emit an event back to the clients with the ID of the socket that was disconnected.

Socket.IO associates every socket with a unique ID, ****which we can use to manage our sockets.

io.on("connection", function(socket) {
        io.emit("user.add", socket.id);
        socket.on("disconnect", function() {
                io.emit("user.remove", socket.id);  
        });
});

2- Then add an element to the view that contains the list of users:

<div id="users"></div>

3- Finally, in the client, we will listen to the user.add and user.remove events to add or remove users as they are connected or disconnected:

socket.on("user.add", function(id) {
        $("#users").prepend(`<p id="${id}">${id}</p>`)
});

socket.on("user.remove", function(id) {
        $(`#${id}`).remove();
})

Although the ID of a socket is primarily available for internal use, when we manage a list of connected users, it can be beneficial to have a record of the socket IDs to associate it with the rendered list in our interface.

In this case, we will use the socket ID as the actual id attribute for our DOM elements. The ID will look similar to a random combination of numbers and letters, Ex: AL8r1DvmiQVT50trAAAC. By using the socket ID in sync with the socket life cycle events, we will be able to show the list of currently active users on the page.

What about private messages...?

Sometimes, you need to send a private message to just one other socket and not every socket that may be listening in. As the server-side is in charge of managing all the connected sockets, we can specify the sockets that our events are emitted to granularity.

In this example, I will use this ability to emit specific sockets to create a simple app that specifies which used to give a hug to. Only the giver and receiver will be aware that the hug was initiated.

1- Add the relevant events to your server. These will be in charge of managing a list of connected users and emitting private messages to users (as required). In addition to the typical Socket.IO server-side setup. you will requiring the following code:

// We will keep a record of all connected sockets
var sockets = {};
io.on('connection', function (socket) {
        // Emit the connected users when a new socket connects
        for (vari in sockets) {
                socket.emit('user.add', {
                        username: sockets[i].username,
                        id: sockets[i].id
                });
        }
        // Add a new user
        socket.on('username.create', function (data) {
                socket.username = data;
                sockets[socket.id] = socket;
                io.emit('user.add', {
                        username: socket.username,
                        id: socket.id
                });
        });
        // Send the hug event to only the socket specified
        socket.on('user.hug', function (id) {
                sockets[id].emit('user.hugged', socket.username);
        });
        // Remove disconnected users
        socket.on('disconnect', function () {
                delete sockets[socket.id];
                io.emit('user.remove', socket.id);
        });
});

2- Now, create a index.html template to display the interface for your application:

<div class="container">
        <h1><span class="glyphiconglyphicon-heart"></span> Hugs!</h1>
        <hr />
        <form id="add-username" class="row">
                <div class="col-md-3">
                        <input class="form-control" id="username" placeholder="Username" />
                </div>
                <div class="col-md-3">
                        <button class="btnbtn-primary">Join</button>
                </div>
        </form>
        <div class="row">
                <div class="col-md-6" id="sockets" style="display:none"></div>
                <div class="col-md-6" id="hugs"></div>
        </div>
</div>

3- Then, add listeners to the client side in order to display the users. Also, keep a log of the private messages that have been emitted with the following code:

function assUser(user) {
        $("#sockets").append(`
                <div id="${user.id}" class="socket">
                        <span class="glyphicon-user"></span>
                        ${user.username} - <a href="#" class="hug" data-username="${user.username}" data-id="${user.id}">Hug</a>
                        <hr />
                </div>
        `);
}

function addUsername (e) {
        e.preventDefault();
        socket.emit("username.create", $("#username").val());
        $("#sockets").show();
        $(this).hide();
}

function giveHug(e) {
        var id = $(this).data('id');
        var username = $(this).data('username');

        e.preventDefault();

        socket.emit('user.hug', id);

        $('#hugs').prepend(`
                 <p>
                         <span class="glyphiconglyphicon-heartempty"></span>
                         You just hugged ${username}.
                         <hr />
                 </p>
        `);
}

socket.on('users.list', function (list) {
        list.forEach(addUser);
});

socket.on('user.hugged', function (username) {
        $('#hugs').prepend(`
                <p>
                        <span class="glyphiconglyphicon-heart"></span>
                        ${username} just hugged you.
                        <hr />
                </p>
        `);
});

socket.on('user.remove', function (id) {
        $('#' + id).remove();
});

socket.on('user.add', addUser);

$(function () {
        $('#sockets').delegate('.hug', 'click', giveHug);
        $('#add-username').on('submit', addUsername);
});

By maintaining a list of available sockets in our server-side object, we will be able to search for any socket by its ID, when we have the socket that we want to send a private message to, we can emit an event to only this socket and no others.

Please ❤ and Share

Thanks for reading this! Hopefully, these few points make the Socket.IO explanation a less confusing experience. If not, I’m happy to clear up any questions (or correct any errors you find here).

Wondering about browser cookies? this post for you!

Mohamed A. Othman — Thu, 09 Jan 2020 01:09:16 +0000

Cookies are an essential part of our browsing experience, but not everyone knows what they are exactly. And, there are misconceptions surrounding them, like potential privacy threats or why websites use cookies in the first place.

“This website uses cookies.”

You’ve come across this message many times while surfing the web. Actually, we deal with browser cookies (sometimes without knowing it) way more often than we have real cookies with our morning coffee, But what exactly cookies is? why are websites using cookies? and are they safe? in this post, I will answer all of those questions.

First of all, What are Cookies?

(also called HTTP Cookies or Browser cookies)

A cookie is a string of characters that a website can ask your browser to store. Whenever your browser requests a page from the website, it sends the cookie back. Websites can then use these cookies to remember who you are or to remember certain settings when you move between pages, Like login credentials, identify customers, and provide a customized shopping experience.

So, When are Cookies Created?

Writing data to a cookie is usually done when a new web page is loaded — for example, after a ‘submit’ button is pressed the data handling page would be responsible for storing the values in a cookie. If the user has elected to disable cookies then the write operation will fail, and subsequent sites which rely on the cookie will either have to take a default action or prompt the user to re-enter the information that would have been stored in the cookie.

But, Why are Cookies Used in the first place?

If there is a large amount of information to store, then a cookie can simply be used as a means to identify a given user so it’s more like a user’s footprint that can be tracked. For example, the first time a user visits a site they may choose a username which is stored in the cookie, and then provide data such as password, name, address, preferred font size, page layout, etc. — this information would all be stored on the database using the username as a key.

Then, when the site is revisited the server will read the cookie to find the username, and then retrieve all the user’s information from the database without it having to be re-entered.

Is there are types of cookies?

Yes, There are quite a few types of cookies. We won’t go into too much detail about each of them, but these are two of the most common groups:

Session cookies are temporary files that are erased from your computer when you close your browser window.
Persistent cookies (also called permanent) stay on your computer until a fixed expiration date — for example, for a year.

So, after we explain all about what cookie is. Are cookies safe? Should I disable them from my browser?

Well, cookies can’t really “steal” your info — it just stores what you choose to let a website know about you. However, it’s quite common for some online advertisers to use cookies for tracking your browsing behavior and then show you some tailored ads which called “re-marketing”. Often it works through third-party cookies — i.e., set by a website different from what you’re viewing.

Considering the above mentioned, instead of disabling cookies entirely (which I wouldn’t recommend), consider blocking only third-party cookies.

Conclusion

Cookies are small text files stored in a web user’s browser directory or data folder.
Websites place cookies on visitors’ browsers to retain login credentials, identify customers, and provide a customized shopping experience.
Some of the common scenarios for using cookies are: When you fill a form on a website, you don’t have to enter the same details again with the next visit, thanks to a cookie, which stores them on your computer. Also, When you shop online, cookies store info as you put items in the shopping cart, so that you can pay for them all at once. Or If you chose a specific language in which you want to view a website, a cookie can remember this preference for subsequent sessions.

Please ❤ and Share

Thanks for reading this! Hopefully, these few points make the cookies explanation less confusing experience. If not, I’m happy to clear up any questions (or correct any errors you find in here).