How to send data to socket.io from react? - node.js

Question

I've never used Socket.IO before so this is very new for me.
I have a taxi app in react which will send a new order as an event through Socket.IO but I don't see any error or response.
Server Side it looks like this:
client.on('newOrder', function(data){
socketController.newOrder(data, io, client);
});
newOrder: function(data, io, client) {
order.create(data, io, client, function(response){});
}
Order.prototype.create = function (data, io, client, callback) {
console.log("ORDER DATA = " + JSON.stringify(data));
let luggage = 0;
if (typeof data.luggage !== 'undefined')
luggage = data.luggage;
let insertData = {
client_id: data.id_client,
start_address: data.origin.name,
start_lat: data.origin.latitude,
start_lng: data.origin.longitude,
end_address: data.destination.name,
end_lat: data.destination.latitude,
end_lng: data.destination.longitude,
options: JSON.stringify(data.options),
car_options: JSON.stringify(data.car_options),
car_type: data.car_type,
passengers: data.passengers,
luggage: luggage,
payment_method: data.payment_method,
profile_id: data.profile,
profile_type: data.profile_type
};
if (data.schedule_time != null && data.schedule_time.length > 0) {
insertData.schedule_time = data.schedule_time
}
db.query("INSERT INTO orders SET ?", insertData,
function (err, results, fields) {
if (err) {
console.log("Order.create [ERROR: " + err + "]");
return callback({ error: true, message: err });
}
data.id_order = results.insertId;
const timeInsert = {
order_id: data.id_order,
new: new Date().toISOString().slice(0, 19).replace('T', ' ')
};
db.query("INSERT INTO orders_timestamps SET ?", timeInsert, function (err, results, fields) { });
client.emit("orderSaved", { "id_order": data.id_order });
getOrder(data.id_order, function (order) {
sendOrdersToDriver(data, order, io, function (data) {
console.log("Order.create [SUCCESS]");
return callback(data);
});
});
}
);
};
Client Side it looks like this
const data = {
id_client: user.id,
car_type: "executive",
car_options: [],
passengers: 1,
luggage: 2,
payment_method: "cash",
options: [],
origin: { name: pickUp, latitude: pickUpCoordinates.lat, longitude: pickUpCoordinates.lng },
destination: { name: dropOff, latitude: dropOffCoordinates.lat, longitude: dropOffCoordinates.lng },
schedule_time: new Date(),
profile: "",
profile_type: "owner"
}
socket.emit("newOrder", data, function (response) {
console.log('emit response', response);
});

Answer 1

Edit 1:
Let me try to explain how does this callback stuff working,
// here we are at the client-side
// so here from client side i'm sending a data and a callback
// socket.emit('event-name', data, callback); signature
socket.emit('some-event', { a: true }, function(dataFromServer) {
console.log(dataFromServer);
});
// here we are at server-side
socket.on('some-event', function(data, callback) {
// we are getting the data first argument and callback second
// let's say we are testing if data has a === true;
if(data.a) { // same as data.a === true
// here we are gonna send 'hi' to callback
return callback('hi the data was valid for me');
}
// otherwise we are assuming that data wasn't valid
return callback('your data is not okey mate!');
});
So from client-side if you send a data contains { a: true } as prop you should see that callback consoling 'hi the data was valid for me' this.
Otherwise if it doesn't contain a or a: false then you should see 'your data is not okey mate!' from your client's callback.
Consedering this senario; go for your code and check =)
First please check if you socket.connected === true on your frontend.
Second here you are sending data and a callback through your emit
socket.emit("newOrder", data, /*this is your callback*/function (response) {
console.log('emit response', response);
});
And here on your server you are only getting data from client.
// needs to be like this
client.on('newOrder', function(data, callback) {
socketController.newOrder(data, callback, io, client);
});
// same with
newOrder: function(data, callback, io, client) {
// you probably dont need to send this empty callback cause actualy callback
// coming after `data`, `callback`
order.create(data, callback, io, client); //function(response){});
}
// same with
Order.prototype.create = function (data callback, io, client) {
...
sendOrdersToDriver(data, order, io, function (data) {
console.log("Order.create [SUCCESS]");
// here you are calling it so it needs to work if
// your `sendOrdersToDriver` function actually calls it's
// own callback?
return callback(data);
});
}