I wrote this code for client and for server side but its not working what will ne the problem
client.js
const socket = io('http://localhost:8000');
const form = document.getElementById('send-container');
const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector('.container');
const append = (message, position) => {
const messageElement = document.createElement('div');
messageElement.innerText = message;
messageElement.classList.add('message');
messageElement.classList.add(position);
messageContainer.append(messageElement);
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
append(`You: ${message}`, 'right');
socket.emit("send msg", message);
messageInput.value = '';
});
const name = prompt("Enter Your Name to join");
socket.emit('new-user-joined', name);
socket.on('user-joined', name => {
append(`${name} joined the chat`, 'right');
});
socket.on('receive', data => {
append(`${data.name}: ${data.message}`, 'left');
});
socket.on('left', name => {
append(`${name} left the chat`, 'left');
});
index.js/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);
const users = {};
io.on('connection', (socket) => {
socket.on('new-user-joined', (name) => {
console.log('New user', name);
users[socket.id] = name;
socket.broadcast.emit('user-joined', name);
});
socket.on('send msg', (message) => {
socket.broadcast.emit('receive', { message: message, name: users[socket.id] });
});
socket.on('disconnect', () => {
socket.broadcast.emit('left', users[socket.id]);
delete users[socket.id];
});
});
const PORT = process.env.PORT || 8000;
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
I tried again to run but it fails no error but app is not working these are 2 files by which I cannot establish the connection beacause there is no any action performed in the browser
I tryed your server code and it works fine, but before make the socket connection amongs server and client you have to send any file to the client adding this type of code at the bottom of your server code:
app.get("/", function(request, response) {
response.sendFile(__dirname + "/client.js");});
This is for routing the client requests and sending files from server to clients
the file client.js must be in the root of your app
Then after started the server you can try on your browser this url: http://localhost:8000
and you will see the text of your client.js code shown in the browser
Hope this will help you starting develop your server / client chat apps