Need help regarding vue.js part in blade file

[tayyab2020]

Hi, First of all I like your approach towards building this Realtime chat application. I need some guidance as I have implemented this in my Laravel application with my own custom chat template. I want to know that when a blade view is loaded with Vue.js variables or objects in it than the page first loads at client-side so it renders Vue.js variables for example like this "{{ chatList.name }}" until the Websocket running on Node.js server is executed and pulled data through query. It shows is just for few milliseconds or 1 sec but can I hide it or hide whole component until data is fetched from server and assigned to Vue.js variables?

[tayyab2020]

On page load it shows it like this for few milliseconds until it renders Vue.js

[sagarankoliya]

Hi @tayyab2020,

Thanks for your compliments.

You should try this, it will might help you.

https://stackoverflow.com/questions/42262007/hiding-vue-js-template-before-it-is-rendered

Thanks,

[tayyab2020]

Hi @sagarankoliya, I already implemented this. Now you are using raw MySQL queries through sockets, but I want to implement API endpoints or requests so I can use Laravel eloquent queries at backend. Can you guide me or point be towards any article so I can implement it.
Thanks

[sagarankoliya]

Hi @tayyab2020,

Queries are already in nodejs back-end, and all features are attracted to nodejs sockets event, if you want to move queries on laravel then you have to change whole structure, and might some features will not work after your changes.

Thanks,

[tayyab2020]

Hi @sagarankoliya,
Thanks for replying, btw I am now using Axios with Promise calls to my API endpoints. So I migrated from mysql queries to Laravel eloquent queries using Axios. Now you are showing recent messages count on each message response. I want to show recent message text also below it. Can you guide me how to do it. Do I have to fetch it on every message event from server?
Thanks

[sagarankoliya]

Hi @tayyab2020,

I didn't understand what you want to achieve, all the things are real-time and laravel does not support real-time that's why all chat related queries are on nodejs side, so you can not move real-time data to leravel queries.

Thanks,

[tayyab2020]

I am using sockets. What I did is I replaced your MySQL raw queries with API calls to my Laravel application. Of course the requests and responses are still in real-time environment. For example this function from helper.js
getChatList(userId){
try {
return Promise.all([
axios.get(app_url+'/api/get-chat-list',{
params: {
UserID: userId
}
})
]).then(response => {
return {
chatlist: response[0].data
};
})
.catch(error => {
console.warn(error);
return (null);
});
// return Promise.all([
// this.db.query(SELECT * FROM users WHERE id != ?, [userId])
// ]).then( (response) => {
// return {
// chatlist : response[0]
// };
// }).catch( (error) => {
// console.warn(error);
// return (null);
// });
} catch (error) {
console.warn(error);
return null;
}
}

This function fetches chats list of a user. Commented part was MySQL raw query and I replaced it will API request using AXIOS. And at backend I am using Laravel eloquent to fetch from MySQL server. Response is same in both cases and both are Promise based requests.

[sagarankoliya]

Hi @tayyab2020,

I got your point, it is simple just create api with api key in laravel and just call laravel api with axios in nodejs side.

Thanks,

[tayyab2020]

Hi @sagarankoliya,
I deployed this on production server but I am getting this error in browser console.

The page at 'https://domain.com/chat' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://185.220.174.***:3000/socket.io/?id=%201&EIO=3&transport=polling&t=OO3L8YT'. This request has been blocked; the content must be served over HTTPS.

While I have already defined origin: "https://domain.com" in nodejs/index.js file for CORS.
How to fix this?
Thanks

[sagarankoliya]

Hi @tayyab2020,

What is your WS_URL env value? It will be nodejs server url, you have run nodejs on https domain, becouse https does not allow to call http request outside.

Thanks,

[tayyab2020]

Its server IP:PORT
So its "http://185.220.174.***:3000/"

[tayyab2020]

But my server IP is not SSL certified

[tayyab2020]

Do you know about wss:// protocol? I think instead of using http,https let the server handle protocol would be better option.

[sagarankoliya]

I don't know about wss, sorry

[tayyab2020]

Can I use domain as WS_URL?
like "https://domain.com:3000"

[sagarankoliya]

Yes as per my knowledge you can.

[tayyab2020]

How can I run node server on my domain using port 3000 or any other port?

[tayyab2020]

Hi @sagarankoliya,
Now I am getting net::ERR_CONNECTION_REFUSED if I try to connect using "https://domain.com:3000"
Also let me know that you are using express in index.js file. Is it necessary?
Thanks

[sagarankoliya]

Hi @tayyab2020,

Which web server are you using? Setup domain for nodejs, If are you using nginx then add one location in vhost and proxy pass this location to ip port of nodejs server.

Thanks,

[tayyab2020]

Hi @sagarankoliya,
I have hosted my Laravel application on Linux (CentOS) VPS and Node server is also in same VPS. Also I managed to establish a connection between Laravel and Node application by using "websocket" as transport option in socket.io at client side.

var socket = io(WS_URL, { query: "id= "+user_id, transports : ['websocket'] });

But now sometime it stops working all of a sudden., as the web server cant connect to websocket. Also I read somewhere that transports : ['websocket'] in socket.io is not a reliable solution.