Forem: Rishikesh-Programmer

Socket.io Simple Chat App

Rishikesh-Programmer — Thu, 30 Nov 2023 15:23:29 +0000

Creating a real-time chat app with Socket.io and JavaScript involves both server-side and client-side implementation. Below, I'll guide you through creating a simple chat application using these technologies.

Prerequisites:

Node.js installed on your machine.

Step 1: Set Up Your Project

Create a new directory for your project.

mkdir socketio-chat-app
cd socketio-chat-app

Initialize your project with npm.

npm init -y

Install necessary dependencies.

npm install express socket.io

Step 2: Create Server-Side Code
Create a file named server.js for the server-side code.

// server.js
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
  console.log('A user connected');

  // Listen for chat messages
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // Broadcast the message to all connected clients
  });

  // Listen for disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Step 3: Create Client-Side Code
Create a directory named public in your project and inside it, create an HTML file index.html.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.io Chat App</title>
  <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="form" action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>

  <script>
    const socket = io();

    // Listen for chat messages
    socket.on('chat message', (msg) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = msg;
      messages.appendChild(li);
    });

    // Send chat messages
    document.querySelector('form').addEventListener('submit', (e) => {
      e.preventDefault();
      const input = document.getElementById('m');
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });
  </script>
</body>
</html>

Step 4: Run Your Application
Run your server.

node server.js

Visit http://localhost:3000 in your web browser, and you should be able to see the chat application. Open multiple browser tabs to simulate different users and see real-time chat in action.

That's it! You've created a basic real-time chat application using Socket.io and JavaScript. Feel free to enhance it by adding features like user authentication, private messaging, or a better user interface.

Creating a chat application like messenger with node js

Rishikesh-Programmer — Mon, 07 Aug 2023 14:28:00 +0000

Creating a full-fledged chat application like Messenger from scratch is a complex and time-consuming task. However, I can provide you with a basic outline and steps to get you started with building a simple chat application using Node.js and some other technologies.

Set Up the Project:
First, make sure you have Node.js installed on your system. Create a new directory for your project and initialize a new Node.js project using npm (Node Package Manager).

mkdir chat-app
cd chat-app
npm init -y

Install Dependencies:
For our chat application, we will use Express.js as the web server and Socket.io for real-time communication between clients. Additionally, we'll use other libraries to handle user authentication and UI.

npm install express socket.io socket.io-client moment body-parser ejs passport passport-local express-session

Create Server and Basic HTML:
Create a new file named app.js (or index.js) to set up the server and handle the basic routes.

// app.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const moment = require('moment');

// Basic route for serving HTML page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

http.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Create the HTML page:
Create a new file named index.html in the root folder of your project.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
</head>
<body>
  <h1>Welcome to the Chat Application</h1>
</body>
</html>

Set up Socket.io for Real-Time Communication:
Modify index.html to include Socket.io library and establish a connection to the server.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
  </script>
</head>
<body>
  <h1>Welcome to the Chat Application</h1>
</body>
</html>

Handle User Authentication (Optional):
You may choose to implement user authentication to make your chat application secure. You can use Passport.js with the passport-local strategy for this purpose. I'll provide a basic setup, but it's recommended to further enhance security features for production use.

Implement Real-Time Messaging:
Now, we'll implement the core functionality of real-time messaging using Socket.io. Add the following code to app.js:

// app.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const moment = require('moment');

app.use(express.static(__dirname));
app.use(express.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// Basic route for serving HTML page
app.get('/', (req, res) => {
  res.render('index');
});

// Socket.io
io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });

  socket.on('chat message', (msg) => {
    console.log('Message: ', msg);
    io.emit('chat message', {
      username: socket.username,
      message: msg,
      time: moment().format('h:mm A')
    });
  });
});

http.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Update index.html to include the chat interface and handle message submission:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Chat Application</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    function sendMessage() {
      const message = document.getElementById('messageInput').value;
      socket.emit('chat message', message);
      document.getElementById('messageInput').value = '';
    }

    socket.on('chat message', (data) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = `${data.username} (${data.time}): ${data.message}`;
      messages.appendChild(li);
    });
  </script>
</head>
<body>
  <h1>Welcome to the Chat Application</h1>
  <ul id="messages"></ul>
  <input type="text" id="messageInput" placeholder="Type your message here">
  <button onclick="sendMessage()">Send</button>
</body>
</html>

Now, when you run the application using node app.js, it will start the server at http://localhost:3000, and users can join the chat, send messages, and see real-time updates.

Keep in mind that this is a basic implementation and lacks many features that a full-fledged messaging app would have, such as user accounts, private messaging, message history, file sharing, and more. If you want to build a production-ready chat application like Messenger, you'll need to implement additional features, consider scalability, and handle various security concerns.

Desktop application in C language

Rishikesh-Programmer — Fri, 23 Jun 2023 14:56:10 +0000

To create a desktop application in C, you can make use of frameworks and libraries that provide GUI (Graphical User Interface) functionality. One popular framework for developing desktop applications in C is GTK+ (GIMP Toolkit). GTK+ is a cross-platform toolkit that allows you to create GUI applications that can run on different operating systems such as Windows, macOS, and Linux.

Here's a step-by-step guide to creating a simple desktop application in C using GTK+:

Install the necessary tools:

Install a C compiler such as GCC (GNU Compiler Collection) for your operating system.

Install the GTK+ development libraries. The installation process may vary depending on your operating system.

Set up your development environment:

Create a new directory for your project.
Open a text editor or an Integrated Development Environment (IDE) to write your C code.
Write the C code:

Start by including the necessary GTK+ header files in your code:

#include <gtk/gtk.h>

Write the main function and initialize the GTK+ library:

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);
    // Rest of your code goes here
    return 0;
}

Create a callback function that will be triggered when the application's window is closed:

static void on_window_closed(GtkWidget *widget, gpointer data) {
    gtk_main_quit();
}

Create the application window and connect the callback function to the "destroy" signal:

GtkWidget *window;

window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
g_signal_connect(window, "destroy", G_CALLBACK(on_window_closed), NULL);

Add additional GUI elements to your window, such as buttons, labels, or text fields, using GTK+ functions.

Display the window:

gtk_widget_show_all(window);

Start the GTK+ main loop:

gtk_main();

Compile and build the application:

Open a terminal or command prompt and navigate to your project directory.

Use the C compiler to compile your code, linking against the GTK+ libraries:

gcc -o your_application_name your_code.c `pkg-config --cflags --libs gtk+-3.0`

Run the application:

Execute the compiled binary file from the terminal or command prompt:

./your_application_name

This is a basic example to get you started with creating a desktop application in C using GTK+. You can explore the GTK+ documentation and tutorials for more advanced features and functionality. Additionally, other frameworks like Qt and wxWidgets also provide options for creating desktop applications in C, so you may consider exploring those as well.

Javascript image manipulation

Rishikesh-Programmer — Mon, 01 Aug 2022 14:08:39 +0000

A well known and powerful library for image manipulation is Caman.js. It offers various built-in functions as well as the possibility to be extended. Also, the library is well documented and can be used both in NodeJS and in the browser. The functions provided by CamanJS work with elements, so before getting started, you can either create a Canvas element yourself or let CamanJS replace an image with a canvas of the same dimensions.
The basic functions cover color manipulations like setting contrast/brightness or modifying the RGB channels individually as well as the possibility to increase or decrease the noise applied to the image. Advanced operations, for example working with layers, blending or cropping an image can be achieved by working with plugins.
For examples, a detailed documentation and downloading CamanJS, check out the official website.

<img id="caman-image" src="otter.jpg" />
<script src="caman.js"></script>
<script>
  Caman('#caman-image', function () {
    this.brightness(50).render();
  });
</script>

Calender in react js

Rishikesh-Programmer — Sun, 31 Jul 2022 13:39:00 +0000

In this post we are going to make a simple calender in react js

run the the following commands in the terminal:

npx create-react-app react-calender
cd react-calender
npm i react-calender

go to src/app.js and erase the content in it,
and import react, react-calender

import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

next, create a function app and export

export default function App() {
  // main content goes here...
}

and set a value and onchange using react useState

export default function App() {
  const [value, onChange] = React.useState(new Date());
}

and then

export default function App() {
  const [value, onChange] = React.useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

next go to src/index.js and paste the following code:

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

app.js full source code:

import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function App() {
  const [value, onChange] = React.useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

live demo: https://reactcalenderbyrishi.stackblitz.io/

thankyou

Password generator in javascript

Rishikesh-Programmer — Sun, 31 Jul 2022 13:12:21 +0000

In this post we are going to make a password generator in javascript

Install uuid

npm i uuid

Create a file named index.html, style.css, index.js.

index.html full source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Genenrator</title>
  </head>
  <body>
    <h1>Password Generator</h1>
    <input
      type="text"
      id="keyword"
      placeholder="Enter a keyword"
      maxlength="30"
    />
    <button id="generate">Generate Password</button>
    <h3 id="password">
      When you enter a keyword and click the button the password will be
      generated here
    </h3>
    <script src="index.js"></script>
  </body>
</html>

style.css full source code:

* {
  padding: 0px;
  margin: 0px;
}
h1 {
  text-align: center;
  color: blueviolet;
  font-family: cursive;
}
#keyword {
  width: 1000px;
  height: 35px;
  text-align: center;
  border: 3px solid #111;
  font-family: 'Courier New', Courier, monospace;
  background-color: #333;
  border-radius: 10px;
  color: white;
  margin-left: 150px;
  margin-top: 5px;
}
#generate {
  margin-top: 20px;
  display: block;
  margin-left: 580px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}
#password {
  /*margin-left: 0px;
  margin-right: 0px;*/
  margin-top: 50px;
  text-align: center;
  padding: 20px;
  color: #333;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  background-color: #f2f2f2;
}

index.js full source code:

import { v4 as uuidV4 } from 'uuid';
import './style.css';
const keyword = document.getElementById('keyword');
const generate = document.getElementById('generate');
const password = document.getElementById('password');

generate.addEventListener('click', function () {
  if (keyword.value == '') {
    password.innerText = 'Keyword is needed';
  } else {
    const text = `${keyword.value}`;
    const modifiedText = text.replace(' ', '-');
    password.innerText = modifiedText + '-' + uuidV4();
  }
});

document.addEventListener('dblclick', function () {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
});

Live demo: https://passwordgeneratorrishikesh.stackblitz.io/
source code: https://stackblitz.com/edit/passwordgeneratorrishikesh

Thank you!!!