Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/learnwithfair/chat-app-with-socket
chat-app-with-socket( React+ Node) [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
https://github.com/learnwithfair/chat-app-with-socket
chat-app mern mern-stack node-js react reactjs real-time-chat-app
Last synced: 13 days ago
JSON representation
chat-app-with-socket( React+ Node) [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
- Host: GitHub
- URL: https://github.com/learnwithfair/chat-app-with-socket
- Owner: learnwithfair
- Created: 2024-04-26T07:10:38.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-26T14:27:39.000Z (9 months ago)
- Last Synced: 2024-11-11T10:07:06.084Z (2 months ago)
- Topics: chat-app, mern, mern-stack, node-js, react, reactjs, real-time-chat-app
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## CHAT APP WITH SOCKET IO
Thanks for visiting my GitHub account!
Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. One of the most famous stacks that is used for Web Development is the MERN stack. This stack provides an end-to-end framework for the developers to work in and each of these technologies play a big part in the development of web applications. [more](https://www.geeksforgeeks.org/mern-stack/)
Socket.IO is an event-driven library for real-time web applications. It enables real-time, bi-directional communication between web clients and servers. It consists of two components: a client, and a server. Both components have a nearly identical API.
## Source Code (Download)
[Click Here](https://mega.nz/file/UHNDWDLA#gebB1iYxwLaoe-mO8yfOOXDJJ7A1yv38N0KGPjqwrJw)
## Required Software (Download)
- VS Code, Download ->https://code.visualstudio.com/download
- Node, Download-> https://nodejs.org/en/download
## ========== Environment Setup ==========
1. Install Node.js
2. To verify installation into command form by node -v
3. For initialization npm write the query in the command window as npm init -y
4. Setup the opening file into the package.json and change the file with main:'server.js'
5. To create a server using the express package then write a query into the command window as npm install express.
Write code in the server file for initialization
const express = require("express");
const app = express();
app.listen(3000, () => {
console.log("Server is running at http://localhost:3000");
});
6. Install the nodemon package for automatically running the server as- npm i --save-dev nodemon (For Developing purpose)
7. setup the package.json file in the scripts key, write
"scripts": {
"start": "node ./resources/backend/server.js",
"dev": "nodemon ./resources/backend/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
8. use the Morgan package for automatic restart. Hence install the morgan package as npm install --save-dev morgan (Development purpose)
Write code in the server file for initialization
const morgan = require("morgan");
app.use(morgan("dev")); --> Middlewire.
## Run the client server
```bash
- cd client
- npm start
```
## Run Server (Command)
In the base directory run->
```bash
- node server.js
```
/_
|--------------------------------------------------------------------------
| Socket IO
|--------------------------------------------------------------------------
_/
```bash
const io = require("socket.io")(8080, {
cors: {
origin: BASE_URL
},
});
io.on("connection", (socket) => {
console.log("User connected", socket.id);
setInterval(() => {
io.emit("refresh", {});
}, 500)
// socket.on("disconnect", function () {
// console.log("Disconnect");
// })
});
```
#learnwithfair #rahtulrabbi #rahatul-rabbi #learn-with-fair