bradtraversy/chatcord

Realtime chat app with rooms

ChatCord App

Realtime chat app with websockets using Node.js, Express and Socket.io with Vanilla JS on the frontend with a custom UI

Usage

npm install
npm run dev

Go to localhost:3000

Notes

The _html_css folder is just a starter template to follow along with the tutorial at https://www.youtube.com/watch?v=jD7FnbI76Hg&t=1339s. It is not part of the app

chatcord's Issues

saving the backend data and user messages . also adding the peer to peer camera functionalty

Someone copied the exact thing but just changed the css lmfao

Here is the website (scroll down the comments and u'll see)
https://repl.it/talk/share/Froggy-Chatroom-Sneak-peek/123002

Why does _html_css/js/main.js is empty?

Why does _html_css/js/main.js is empty? What does it needed for?

Issues while running my application

I am confident my code is correct. But everytime I enter as user, its not showing and welcome message and not the messages a user send. I everytime I click on leave room it gives out error "formatMessage function not found" in my terminal. I have attached my repo link. Can anyone tell the error and help me to resolve

(https://github.com/ayushnanda21/Chat-Flow)

file attachment

I want to add file attachment feature to this script.
Can someone who can do it for a fee contact?
[email protected]

Socket.io is not identified on frontend

After installing every library including socket.io,
The 3rd last line in chat.html <script src="/socket.io/socket.io.js" >
</script> .This is giving me error as:
GET http://localhost:3000/socket.io/socket.io.js net::ERR_ABORTED 404 (Not Found)
and main.js:2 Uncaught ReferenceError: io is not defined
at main.js:2
Please help me resolve this issue.

when to use socket.disconnect(0)?

Chatroom database integration issue

Hello, I am attempting to integrate a persistent database into the chat room app. I am using MongoDB/Mongoose currently. I have successfully created a data model and can save each message submitted into the database. I am attempting to retrieve them and emit them back onto the frontend. I am able to loop through each found item in the DB collection and socket.emit(), but the message format all comes back undefined. Can anyone help with this?

css error

i get a error code in the console saying the css style is mime

Issue regarding time

Can anyone tell me how to change the message timing the region where I live isnt coinciding with the time when I send the message @bradtraversy @osamai @mohammed-ysn @rubiksking124 @anuragkumar19

How to publish this to netlify?

Submit Button

Chat Room is visible, able to join, but when sending a message nothing occurs. Any assistance is appreciated.

Chatroom issue

people with same name should not be allowed to enter the same chatroom can you tell me how to implement it ?

it is not an issue, how to deply this app to server

how to deply this app to server with detailed steps please

deploying issue

i am facing erroring after deploy heroku. it's working on localhost but don't work heroku. What should I do? where else I can host my customised chatapp?

port 3000 is running but can not get in the browser

port 3000 is running but can not get in the browser
how can i get it run in localhost 3000?

App crashing..getting 'room' not defined in console.

here is my console error
`C:\Users\user\Desktop\Backend Projects\Rooms-Users-Chatapp\chatapp2\server.js:77
io.in(user.room).emit('roomUsers',{
^

TypeError: Cannot read property 'room' of undefined`

here is my server.js :-

`

const path = require('path');
const http = require('http');
const express = require('express');
const formatMessage = require('./utils/message');
const {userJoin, getCurrentUser, userLeave, getRoomUsers } = require('./utils/users');
const app = express();
const socketio = require('socket.io');
const fs = require('fs');

const server = http.createServer(app);

const io = socketio(server);

app.use(express.static(path.join(__dirname,'public')));

const botname = 'Dechat Bot';

io.on('connection', socket=>{

    //join Room
    socket.on('joinRoom', ({username,room})=>{

        const user = userJoin(socket.id, username , room);

        socket.join(user.room);

        //Welcome message to the user only
        socket.emit('message', formatMessage(botname,'Welcome to Dechat'));

        //Notifies all users when a new user connects except the user that connects
        socket.broadcast
        .to(user.room)
        .emit(
            'message',formatMessage(botname,`${user.username} has joined the chat.`)
        );

        //sending users and room info to client page
        io.emit('roomUsers',{
            room: user.room,
            users: getRoomUsers(user.room)
        });  
        
        //uploading image
        socket.on('upload-image',(message)=>{
            if(message.size < 500000){
                var writer = fs.createWriteStream(path.resolve(__dirname,'./public/images/'+message.name),{
                    encoding: 'base64'
                });  
                writer.write(message.data);
                writer.end();
                
                writer.on('finish',()=>{
                    io.to(user.room).emit('image-uploaded',{
                        name: '/images/' + message.name
                    });
                });
            }      

        });
    });
        
    //Listen to chatMessage
    socket.on('chatMessage', msg=>{
        const user = getCurrentUser(socket.id);
        io.to(user.room).emit('message',formatMessage(user.username,msg));
    })
 //Notifies all users when a user disconnects
    socket.on('disconnect',()=>{
        const user = userLeave(socket.id);
        if(user){
            io.to(user.room).emit('message',formatMessage(botname,`${user.username} has left the chat`));
        }
        //sending users and room info to client page
        io.in(user.room).emit('roomUsers',{
            room: user.room,
            users: getRoomUsers(user.room)
        });
    })


})
const PORT = process.env.PORT || 3000;

server.listen(PORT, ()=>{
    console.log(`Server running on ${PORT}`);
})`

Is it possible to add a password field so only people i register can use the app

basically im using this at school, and only want people i give acces to it to use it. can i make a password field and make people log in? if so how?

css style and index.html not the same

i have done everything you have done in your video up to were you open the site in browser, but when i open it mine is not styled right or anything

TypeError: Cannot read property 'room' of undefined

There is an issue with sudden stoppage and disappearing of chat messages during users chatting.
It can only get to normal once browser is refreshed.

Here is the error code:

TypeError: Cannot read property 'room' of undefined
at Socket.socket.on.msg (/home/firszmuu/beyok.firstcla.net/server.js:51:16)
at Socket.emit (events.js:198:13)
at /home/firszmuu/beyok.firstcla.net/node_modules/socket.io/lib/socket.js:528:12
at process._tickCallback (internal/process/next_tick.js:61:11)
/home/firszmuu/beyok.firstcla.net/server.js:51
io.to(user.room).emit('message', formatMessage(user.username, msg));
^

Kindly assist

Leave room button not working

Is the 'Leave Room' button working

<header class="chat-header"> <h1><i class="fas fa-smile"></i> ChatCord</h1> <a id="leave-btn" class="btn" >Leave Room</a> </header>

The above one is the code for Leave button . To exit , I have to click the close button of the tab.

Error: connect ECONNREFUSED 127.0.0.1:6379

Hi
I unzip the files and folders in a directory and run
npm install
node run start
The server crashed. Did I miss anything

PS D:\Programming\nodeJS\tutorial\ws\chatCord> npm run dev

[email protected] dev
nodemon server

[nodemon] 2.0.2
[nodemon] to restart at any time, enter rs
[nodemon] watching dir(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node server.js
Server running on port 3000
node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);

Error: connect ECONNREFUSED 127.0.0.1:6379
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1283:16)
Emitted 'error' event on Commander instance at:
at RedisSocket. (D:\Programming\nodeJS\tutorial\ws\chatCord\node_modules@node-redis\client\dist\lib\client\index.js:338:14)
at RedisSocket.emit (node:events:513:28)
at RedisSocket._RedisSocket_connect (D:\Programming\nodeJS\tutorial\ws\chatCord\node_modules@node-redis\client\dist\lib\client\socket.js:119:14)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Commander.connect (D:\Programming\nodeJS\tutorial\ws\chatCord\node_modules@node-redis\client\dist\lib\client\index.js:162:9)
at async D:\Programming\nodeJS\tutorial\ws\chatCord\server.js:28:3 {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 6379
}

Node.js v19.2.0
[nodemon] app crashed - waiting for file changes before starting...

Prevent duplicate username in a chatroom

As of now we can have more than one user in a chat room. So if in a chat room if there is more than one users having the same username and then anyone of them sends a message then it becomes difficult/impossible to identify who among them sent the message.

It would be better if we could implement the feature which wont allow the user to join with a username that is already being used by one of the users in that chatroom.

my port is not working

Error: Cannot find module
at Module._resolveFilename (node:internal/modules/cjs/loader:939:15)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Node.js v18.2.0
[nodemon] app crashed - waiting for file changes before starting...

Automatically reconnect the user

The socket.io connection keeps dropping, how can I avoid this? It would be good if the system automatically reconnects the user.

Messages for a specific user?

What would the code look like to send messages to a specific user?

MongoDB implementation

Please any ideas on how to implement database of Users and Rooms

there should be a notification for new messages.

there should be a notification for new messages.

Uncaught ReferenceError: io is not defined

Hello while following your tutorial at the step where Brad adds the socket.io script in the chat.html file and console.log in main.js (13:43 minute in the tutorial video) after testing it out on the web i keep having this error pls i don't know if i could get some help
this is my screen any suggestion i was really hoping to follow the tutorial but this is setting me back thanks in advance

Unexpected token C in JSON at position 0

Hello,

When I run "npm install" I get the following error message:

npm ERR! Unexpected token C in JSON at position 0 while parsing near 'ChatCord App
npm ERR! Realti...'

So it seems to be a problem with the package.json. Help! :)