my html:-
<!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>ichat App</title>
<script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
<script defer src="js/client.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<img src="icon.jpg" class="logo">
</nav>
<div class="container">
<div class="message left">Hiiii</div>
<div class="message right"> Who are you
</div>
</div>
<div class="send">
<form action="#" id="send-container">
<input type="text" name="messageInp" id="messageInp">
<button class="btn" type="submit">Send</button>
</form>
</div>
</body>
</html>
my index.js(node server):-
```
// node server which will handle socket io connection
const io = require('socket.io')(8000)
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', message => {
socket.broadcast.emit('receive', { message: message, name: users[Socket.id] })
});
socket.on('disconnect', message => {
socket.broadcast.emit('left', users[socket.id])
delete users[socket.id];
});
})
```
my client.js
```
const socket = io('http://localhost:8000');
const form = document.getElementById('send-container');
const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector(".container");
var audio = new Audio('ting.mp3')
const append = (message, position) => {
const messageElement = document.createElement('div');
messageElement.innerText = message;
messageElement.classList.add('message')
messageElement.classList.add(position);
messageContainer.append(messageElement);
if (position == 'left') {
audio.play();
}
}
const name = prompt("Enter your Name to login");
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`, 'right')
})
form.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
append(`you:${message}`, 'right');
socket.emit('send', message);
messageInput.value = ' ';
})
```
package.json:-
{
"name": "nodeserver",
"version": "1.0.0",
"description": "This is a node server for our ichat application",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Manish",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"nodemon": "^2.0.7",
"socket.io": "^4.0.1"
}
}
}
These are all codes that i have written in order to make a real time chat application using socket io . the error is
- Access to XMLHttpRequest at 'http://localhost:8000/socket.io/?EIO=4&transport=polling&t=NaidU9N' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- polling-xhr.js:203 GET http://localhost:8000/socket.io/?EIO=4&transport=polling&t=NaidU9N net::ERR_FAILED and this error is coming automatically after 1 sec regular. what change it require? suggest me please as a beginner This error is occuring in console continuosly and i am not able to receive message from anyone in this chat website , i am able to send message but it is not receiving on the other side .
Aucun commentaire:
Enregistrer un commentaire