I'm currently developing an application that allows clients to share real-time location data with one another using JavaScript. The issue I'm facing is that the data is being transmitted successfully on the server.js side, but it's not displaying properly on the client side.
Server.js
const server = require('http').Server(app);
const io = require('socket.io')(server);
server.listen(8080)
const location =[];
const players ={}
io.on('connection',(socket)=>{
socket.on('Client_send_pos',(data)=>{ /* receiving position data */
console.log("new client connected, with id " + socket.id);
location.push(data); /* pushing data into location array.*/
io.emit('send_mang_pos',location); /* emitting data for display */
});
socket.on("disconnect",() => {
console.log(`${data} User disconnected.`)
const index = location.indexOf(data); /* finding the index of disconnecting browser in the array. */
if (index != -1) {
delete location[index];
location.splice(index, 1);
io.emit('delete',index);
console.log(index);
}
io.emit('send_mang_pos',location);
});
Client
let socket = io.connect('http://localhost:8080');
const position = [this.state.location.x, this.state.location.y]
socket.emit('Client_send_pos',position)
const map = L.map('map').setView(position, 10);
socket.on('send_mang_pos',(data)=>{
data.forEach((i,y,z)=>{
});
});