Crear una aplicacion en tiempo real usando Nodejs y Socket.io

Aprende a crear una aplicacion en tiempo real usando Nodejs y Socket.io, en este ejemplo  aprenderemos a crear una aplicación web CRUD que se comunique con un servidor de Nodejs y Express usando Websockets a traves de la biblioteca socket.io. Ademas estilizaremos nuestra interfaz con Bootstrap5.

Código del Ejemplo:
https://github.com/FaztWeb/websockets-nodejs-crud

#socketio #nodejs #crud

Crear una aplicacion en tiempo real usando Nodejs y Socket.io

Scale A Real-time Collaborative Editor

In our previous post, we have developed a basic real-time collaborative application.

In this post, we are going to scale this system.

Our application is perfectly fine for small projects. Let’s say we have added more features to it and we want to deliver this application to the end-user.

To make this application production-ready we need to make sure this is scalable and always available to our customers.

Vertical scale

It involves upgrading our instance or add an extra resource to support increasing workload.

Horizontal scale

The distributed strategy of adding copies running the same task in parallel.

Both of them have separate pros and cons and different use cases based on different scenarios. But, in enterprise applications, the horizontal scale is quite popular.

Socket scale

In our application, we are using socket to handle real-time operations and the socket internally uses a TCP port to establish a connection. The maximum number of TCP sessions a single source IP can make to a single destination IP and port is 65,535. So, we can only have a maximum of 65K of connection at a time with a single instance.

There are two ways to solve this issue,

  1. Assign IPs to an instance and have ports associated with it. This way we can have maximum connection = number of IP * 65K
  2. Running multiple instances.

The problem of assigning IPs to an instance is manual workload with limited capacity. For that reason, we’ll be moving forward with multiple instances. And this way we’ll have the benefit of scaling out more as per need.

#nodejs #socketio #programming #node

Scale A Real-time Collaborative Editor
Oral  Brekke

Oral Brekke

1626677700

Building A Real-time Collaborative Editor

A text editor can be a real game-changer when it’s equipped with the functionality of collaborative editing. There are so many tools out there providing such features with great excellence such as Google Docs, Microsoft word, etc.

I planned to design and develop such a system that can handle basic text editing and can scale on need. So I tried developing a POC(Proof of concept) with real-time editing feature and went through some ideas to make this solution scalable.

Obviously, there are scopes for improvement, and please share your ideas which will give better insights.

Requirement

Let’s define some project requirements to start on

  1. Basic editing
  2. Real-time collaboration
  3. Basic operational transform
  4. List of joined users
  5. Add / Remove users based on event

Tools

  1. CKEditor 4
  2. Plain JavaScript
  3. Node.js & Express
  4. Socket.io
  5. For operational transform, I’ve used the CKEditor 5 diff library to adapt changes to the editor.

#nodejs #realtime #socketio

Building A Real-time Collaborative Editor

NodeJS SocketIO Tutorial Part-1

In this series, we’ll implement a real-time typing app where multiple users can type at a time.

In this video, we’ll set up a socket connection between server and client.

Code: https://github.com/manosriram-youtube/realtime-typing

Share your ideas for my next video: request.manosriram.com
Find pair-programming partners: mydevfriend.com

FOLLOW ME HERE:
Website: https://manosriram.com
My Blog: https://blog.manosriram.com/
Github: https://github.com/manosriram/
LinkedIn: https://www.linkedin.com/in/manosriram/
Twitter: https://twitter.com/_manosriram

📻 Discord Server: https://discord.gg/TaE9CTAmV9

#socketio #nodejs

NodeJS SocketIO Tutorial Part-1

NodeJS SocketIO Tutorial Part-2

In this final part, we’ll finish the typing functionality and wrap the app with some basic styles.

Code: https://github.com/manosriram-youtube/realtime-typing

FOLLOW ME HERE:
Website: https://manosriram.com
Github: https://github.com/manosriram
LinkedIn: https://www.linkedin.com/in/manosriram
My Blog: https://blog.manosriram.com
Twitter: https://twitter.com/_manosriram

📻 Join the Discord Server: https://discord.gg/TaE9CTAmV9

#socketio #nodejs

NodeJS SocketIO Tutorial Part-2
Abelardo  Kiehn

Abelardo Kiehn

1620615540

Asynchronous Tasks with Celery in Python

Learn how to leverage Celery library, Redis database and SocketIO library to build synchronous and asynchronous tasks with Flask in Python.

Legacy web applications are synchronous in nature. The user interacts with a web interface presented in the browser, the browser makes requests back to the server based on that user interaction, and the server responds to those requests with a new presentation for the user.

Nowadays, things have changed modern-day websites need to handle requests from hundreds of thousands of visitors. When these requests involve interaction with a database or a web service, response time increases, and when thousands of visitors are accessing the same resources, website performance can drastically decrease.  Here Asynchronous web come to the rescue .

Here are some of the benefits we may grasp when opting for asynchronicity:

  • Ability to handle more requests
  • Parallel execution of I/O bound methods.
  • Improved responsiveness.

Scope

In this tutorial, we will explain how to overcome one of the common pitfalls encountered when building a web application which is handling long running tasks that limit the ability of the web server to respond to new requests.

A straightforward solution would be to run these long running tasks asynchronously in background, within a separate thread or process, freeing up the web server.

We will leverage several components like Redis, Flask, Celery, and SocketIO to offload the execution of a long running task and once completed send a push notification to the client indicating its status.

It is worth noting that this tutorial will not cover asyncio Python’s built-in library, which allows us to run code concurrently using coroutines.

#celery #python #redis #socketio #database

Asynchronous Tasks with Celery in Python
Micheal  Block

Micheal Block

1609224291

How to Build a WebSocket Chat Application

Before diving into this blog, I recommend taking a look at my previous blog, where I introduce WebSocket APIs. From the article, you will find a high-level overview of how WebSockets APIs work and the main components of a WebSocket API. This blog will focus on the technologies and steps I used to create a WebSocket Chat Application that meets the following guidelines:

  • Logs messages as they happen and shares those messages with everyone connected to the app immediately.
  • Results remain between sessions and only the last ten messages are displayed in descending from most recent to oldest.

#programming #socketio #web-development #react #nodejs

How to Build a WebSocket Chat Application
Ben Taylor

Ben Taylor

1603417409

Closing TCP/UDP Sockets with Timeouts and Error Handling in Nodejs

I’m not a big fan of the built-in dgram and net libraries in Nodejs, but it’s really easy to create sockets and write networking applications with Nodejs. One of the biggest issues I’m constantly seeing is the lack of cleanup functionalities when using the socket libraries in Nodejs.

This code is from our DNS npm package that we use in  Violetnorth

You can find the Violetnorth — DNS npm package here:  github.com/violetnorth/dns

So I’m going to talk about a quick way to clean up sockets with timeouts and overall error handling when dealing with sockets.

If you don’t implement some sort of timeout, you are going to run out of available sockets especially when using TCP sockets.

Sockets usually hang and there needs to be timeout handling to close the socket if it’s hanging, which is not super apparent with Nodejs.

#nodejs #sockets #javascript #socketio

Closing TCP/UDP Sockets with Timeouts and Error Handling in Nodejs
Ben Taylor

Ben Taylor

1603157204

How to Build Real-Time Chat Application using Socket.io in Node.js

‘The expert in anything was once a beginner’. So, to become an expert it is very important to have a solid foundation. To achieve this, learning new things and implementing them is the only way.

In this blog, we’ll discuss how to create a real-time chat application using socket.io in node.js. Our front-end web application will look like the following -

This entire project is also available in my github repository. Do check it out —  https://github.com/souvik-pl/chatRoom

Prerequisites -

  1. Knowledge of — HTML, CSS, JavaScript, JQuery, and Node.js.
  2. Node.js should be installed on your local machine.

So, now we are ready to initiate our project. let’s dive in.

#socketio #expressjs #html5 #nodejs

How to Build Real-Time Chat Application using Socket.io in Node.js
Devil  Moya

Devil Moya

1601860515

How to Build a Real-Time Chat App with React Hooks and Socket.io

If you’d like to jump straight to the point or just want to get an overview of what we’re going to build, you can check out the app in action.

Live demo: https://socket-io-react-hooks-chat.herokuapp.com/

Source code: https://github.com/pixochi/socket.io-react-hooks-chat


1. Overview

We’re going to create a web app for sending messages between multiple users in real time. Client(browser) uses React for user interface and Server runs on NodeJS. To achieve real-time communication, we’ll establish a WebSocket connection between Client and Server with Socket.io .

WebSocket 101

The app uses WebSocket for an instant exchange of messages sent by users. Let’s look at some steps how a WebSocket connection is created.

  1. If Client wants to use WebSocket instead of traditional HTTP, an HTTP GET request must be sent with special headers asking Server for connection upgrade.
  2. If Server supports WebSocket, the response confirms possibility of connection upgrade.
  3. Once the handshake is finished, the connection provides a way for bidirectional communication. Both Client and Server can emit and listen for events until one of them closes the connection.

Image for post

Upgrade from HTTP to WebSocket

#socketio #chat-app-development #nodejs #react #react-hook

How to Build a Real-Time Chat App with React Hooks and Socket.io

Ysia Tamas

1599808568

Real-Time Chat in a Phaser Game with MongoDB and SocketIO

Learn how to add client and server real-time communication to your Phaser game with Socket.io and persist any of those communications in MongoDB as JSON data.

Subscribe to MongoDB ►►► https://bit.ly/3bpg1Z1

#mongodb #socketio

Real-Time Chat in a Phaser Game with MongoDB and SocketIO
Hello Jay

Hello Jay

1599203707

How to Build a Chat App using NodeJS, React, Express and Socket.io

In this article, I’ll be showing you how to build a web chat application using React, Express, socket.io, and Node.js.

The motive behind this application:

Join. Chat. Leave. No Records.

Let’s start with the definition of a chat application.

Chat App is a software that enables the messages to be sent and received between different clients ( or users ).

Before diving into the chat application, we must understand the basic concepts and frameworks behind the same which are React, socket.io, express.js, and Node.js.

What is React?

React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

What is socket.io?

Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js.

What is Express or Express.js?

Express.js, or simply Express, is a web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

What is Node.js?

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser.

The chat application is divided into two parts:

  1. Client: This will be responsible for the front end of the application.
  2. Server: This will be responsible for the back end portion of the application.

Now, that we have a basic idea about the different frameworks and libraries used in this application, let’s start with the development phase.

Quick Note: I have used visual studio for this application, but you can use any editor of your choice

#chat #socketio #expressjs #nodejs #react

How to Build a Chat App using NodeJS, React, Express and Socket.io

Build a Chat App With Socket.IO and RethinkDB

A lot of tutorials can be found that teach you how to build a chat app with Socket.io. However, have you ever wondered how to best persist those chat messages?

Enter RethinkDB, a realtime schema-less database. You can store and handle documents easily, just like in MongoDB, but it has reactivity built into it. That means you can subscribe to queries and get notified when data changes, making it the perfect choice when it comes to storing chat messages.

In this article, you will learn how to create a simple chat app with Socket.io and persist the messages in RethinkDB. To show the usefulness of a reactive database, we will also add a simple bot that reacts when you address it.

#nodejs #rethinkdb #socketio

Build a Chat App With Socket.IO and RethinkDB
Carmen  Grimes

Carmen Grimes

1598470500

Let’s Build a Real-Time Chat Application using Socket.IO, React, Node.js and MongoDB

Why web sockets?

As the web evolves, so do the technologies that power it. Although RESThas remained the default choice for web services architectures, most modern applications require features that REST would not be able to reliably provide. These features have one thing in common, real-time. Whether it is a notification system, a chat-box, or an activity tracker, a constant stream of information is required. This is exactly where sockets shine, being able to send data back and forth without having to re-initialize a connection for each action. One of the best libraries for handling web sockets is Socket.IO.

The stack

We will be using React for the front-end and Node.js for the back-end, Express as the web framework, MongoDB as database and Mongoose as ODM. We will then be able to connect the two ends using Socket.IOamazing API.

I will assume that you have already installed the latest version of Node.js, as well as the specific MongoDB distribution for your own OS. Or, you can simply use Atlas.

Project structure

Let’s go ahead and make a new folder, chat-demo/. Inside of it we can create two sub-folders: frontend/ and backend/, which will contain their respective source code:

Image for post

You can name the folders however you’d like, of course.

Setting up React

We will create a new React application using create-react-app. Type the following command inside the frontend/ folder:

$ npx create-react-app .

We can remove a few files that we do not need.

Inside public/, let’s delete everything except index.html.

Inside src/, delete everything except App.jsindex.css and index.js.

Image for post

Deleting said files is not mandatory either, but will leave us with a cleaner structure.

Creating our chat component

First of all, let’s install the socket.io-client package by typing the following command inside the_ frontend/_ folder:

$ npm i socket.io-client

We can now write our chat component inside App.js.

import React, { useState, useEffect } from "react";

	import socketIoClient from "socket.io-client";

	const socket = socketIoClient("http://localhost:8463", { autoConnect: false });

	const Message = ({ msg }) => {

	    return (
	        <div className="msg">
	            <span> { new Date(msg.date).toLocaleDateString() } </span>
	            <span> { msg.content } </span>
	        </div>
	    );

	};

	const MessageBox = () => {

	    const [value, setValue] = useState("");

	    const postMessage = e => {
	        e.preventDefault();

	        if (!value) return;

	        socket.emit("message", value);

	        setValue("");
	    };

	    return (
	        <form onSubmit={ postMessage }>
	            <input type="text" className="input" placeholder="message"
	                   value={ value } onChange={ e => setValue(e.target.value) }
	            />
	        </form>
	    );

	};

	const Chat = () => {

	    const [messages, setMessages] = useState([]);

	    const addMessage = (msg) => {
	        setMessages(oldMessages => [...oldMessages, ...(Array.isArray(msg) ? msg.reverse() : [msg])]);
	    };

	    useEffect(()=> {

	        socket.on("latest", (data) => {
	            // expect server to send us the latest messages
	            addMessage(data);
	        });
	        socket.on("message", (msg) => {
	            addMessage(msg);
	        });

	        socket.connect();

	    }, []);

	    return (
	        <div>
	            <div id = "msgBox">
	                { messages.map((msg, index) => <Message msg={msg} />) }
	            </div>
	            <MessageBox />
	        </div>
	    );

	};

	export default Chat;

#socketio #programming #mongodb #react #nodejs

Let’s Build a Real-Time Chat Application using Socket.IO, React, Node.js and MongoDB
Myriam  Rogahn

Myriam Rogahn

1598393580

Creating Real-Time Chat App using React And Socket.io with E2E Encryption

So you might be wondering how WhatsApp, telegram type application says that their user’s data is “Encrypted” all across the network.

That means all the messages stored in their database are encrypted, so even if some “third party” try to “tap” the messages while they are on there way to reach there destination, the intercepted message will be in encrypted form.

In this article, I am going to show you how to build a Simple E2E (which is not going to be as secure as Whatsapp uses, but still, it is better than having nothing).

We will be using a single secret key to encrypt and decrypt our messages, thus having symmetric encryption architecture.

Note, Whatsapp uses the Diffie-Helman technique to achieve Asymmetrical encryption, it is one of those techniques which can be used to produce most secure chat applications, if you want to learn more about this, please refer this link.

Working

As shown in the above picture, we will create a secret key that will be stored in frontend (For now, I am storing it in the frontend file itself but for production, you have to save it in the .ENV variables of your server where you have deployed your front-end).

Whenever a user sends the message, we have to encrypt it using aes256 npm package with your secret key. We will repeat the process after receiving the encrypted message, but this time it will be decrypted using the same secret key.

ode

Backend (Node, Express, Socket.io)

Folder Structure

Backend
 |- dummyuser.js
 |- server.js
 |- package.json

#programming #javascript #latest-tech-stories #reactjs #socketio #nodejs #realtime #web-development

Creating Real-Time Chat App using React And Socket.io with E2E Encryption