通过数据库与Vue和Axios进行实时更新

Question

Since two weeks or more, I am doing some PHP, HTML and Javascript.

I have worked with Laravel and also did a few Tutorials. My current issue is, that I understand the basic concept but it is still quite hard for me.

My Friend and I wanna work now with Vue.js.

Currently, I have a Lack of Skills, so creating a live poll or similar without refreshing the Browser Page that read and writes out of my database is my aim. (Imagine it like a live point scale for soccer).

We both do not want to use jquery, so Axios is Our main idea... As I said bit of work for an amateur.

My question to you is: How can I achieve this? Could you explain me, how we should proceed? Tutorials or other Videos to watch? Or do you have a likewise example for us, so we can read the code and recreate something similar with an example database? (eg: live search)

Thanks in advance!

Answer 1

Ok, the term that you're looking for is called real-time. The theory behind this kind of application could seem a bit of complex for a beginner. So, I'll classify the key concepts that you should study to really understand and be able to apply them.

First concept: WebSocket.

https://www.linode.com/docs/development/introduction-to-websockets/

Second concept: Pub/Sub pattern.

https://aws.amazon.com/pub-sub-messaging/

Thrid concept: The Pusher web tool.

https://pusher.com/docs

And finally, you'll be able to apply theses concepts together and build your app following the link below.

https://medium.com/@danielalvidrez/laravel-pusher-lets-do-it-96bd23e76a7e