Websockets in Laravel - Part 2: Setting up Comments API & AJAX
HTML-код
- Опубликовано: 27 июн 2024
- We are all anxious to get writing some code to interact with websockets, but first we need to build the foundation of code necessary to start submitting and displaying comments to our users. Once we have this part setup, then we can easily add websockets to it to enhance the experience even more.
This episode will create a small API for us to interact with and will create some structure to save our comments.
First we need to create a database migration to store our comments. This will require creating a migration, a model, and a controller for our comments.
We will make 2 API endpoints for our comments. The first is to display all comments for a specific post. The second endpoint will allow us to save a new comment via the API.
Then its time to use this API by setting up our frontend. We will create two Vue.js methods to handle this. The first is getComments() which gets all the comments for the current post, and the second is postComments() which will post a new comment for the current post.
Next up: We actually connect websockets to display new comments onto the page as they are submitted live!
==== WRITTEN TUTORIALS ====
"Mastering Websockets in Laravel" Master Series Page:
devmarketer.io/learn/laravel-...
Part 2: Setting Up Comments AJAX (Written Tutorial)
devmarketer.io/learn/websocke...
==== MORE FROM THIS SERIES . ====
Full Playlist for the "Mastering Websockets in Laravel" Series:
• Mastering Websockets i...
==== DOWNLOAD SOURCE CODE ====
Github Code Repo for this Series:
github.com/DevMarketer/Larave...
Download Source Code for this Episode:
github.com/DevMarketer/Larave...
==== FOLLOW ME ====
Subscribe for New Releases!
Subscribe to DevMarketer Insider (Email)
confirmsubscription.com/h/d/5...
Twitter - / _jacurtis
(ask me questions!)
==== QUESTIONS? ====
Leave a comment below and I or someone else can help you.
For quick questions you may also want to ask me on Twitter, I respond almost immediately.
Email me hello@jacurtis.com
Thanks for all your support! 
Хобби
You make the slightly complicated stuff look and sound easy and they actually turn out to be. Thanks for the simple vocabulary.
Alex, thank you so much for your work and for the video! Really cool, you explain everything very available and understandably.
Thanks for the websockets tutorials man, i really appriciate it! Big Thanks you are a good man!
awesome! you're the best, thanks for ur effort
great Instructor, big info and clear code, and save too much time to learn, really you are super instructor
Thanks for the great video!
Awesome!!! "Meraviglioso Tutorial"
wow ... awesome teacher & awesome tutorial
hi , is your project برنامج إنجاز open source ?
Very good videos for everyone to learn
you can use $comment->load('user') instead of line 22 (14:50)
nice tip dode
whoooow .... look im writing vue.... mindblowen
Thank u very much sir
I have a small question if you dont mind, what is better, to write the vue script inside the blade like you are doing here or write it in seperate component file? Seems easier to do it in blade since you get easy access to laravel data instead of having to make api calls for everything from the component, but this way youre making the code itself public right? which way is generally used in production?
Great Tutorial! I am wondering why one can post the api_key through axios and laravel knows, which user to save the comment to. At what point does laravel do the check for that? I can only see the body and user id in the mass assignment where the api_key is not mentioned at all 🤔.
Thanks for this great series!
Thanks again for this great series!
I see you went back to Bootstrap instead of Bulma. Can you tell us what the reason is?
Would you also be so kind to make a video about integrating Bootstrap 4 or mdbootstrap into Laravel?
Alex thanks for great tutorials, I am a newbie to Laravel and I learnt a lot with you! I just have a problem, I can not load the comments to a posts. It returns an error post 403(Forbidden)
Thanks again!
It would be wonderful if you will make another tutorial for multiple posts in a single page.
can you give me a video about how to send ajax request through api layer rest full api with jquery and laravel?
So in the show.blade.php by using the @{{ }} syntax that lets you use Vue directives instead of blade?
Is this tutorial still viable with Laravel 7? Can you still get user api_token and submit a comment the way you did?
I have some little problem , when I save a comment it is giving 500 error code in network and there written that the problem is with mass assignment though I have the same code as yours. What should I do to solve this problem?
i'm so new to this
so is it possible to do the commenting part without vu
like using ajax without vu
sorry if my question is little dummy :)
Hi, bro...
Do you have more contents for 2022?
echo.test is not working, I configured vhosts, databases and other required fields as administrator. someone please help..
Why it automatically show the new comment after you post the new comment?
Awesome tutorial, although I encounter an error: basically vue inspector cannot find any Vue component. even in network tab Vue.js is not pulled into the application. Any idea? I also tried to run npm run development again :S....with not results. I would appreciate any help with this! thanks :)
same problem here, it seems something is missed from the set up, did you solve it?
Yes, don't know why and how but I placed my asset(app.js) import statement at the end of the page and it worked.
What is the base url to connect socket with postman
Hey @DevMarketer checkout the written tutorial link, is wrong, I get it by going to your website and then searching for it.
Thanks. I have updated it. That was an old URL and then I updated it to boost SEO and forgot to change it on the RUclips page. Thanks.
I get only curly braces at comment {{comment.user.name}} ..
when I installed vue extension for chrome, it says "vue.js not detected"
I also added the cdn script tag inside app.blade.php . What can be the problem?
I have the same problem!
I didn't notice my console, I had a couple of typos.
does anyone know how to edit or delete a specific comment?
i want to know how to deploy on web serve
Im getting empty object in comments, does any one have a solution for that
me too, did you find a solution?
没有源代码吗
heres the vuejs devtools in firefox
addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
Wow, Thanks! Just what I needed. You're the best.
Gracias por el tutorial, pero hablas demaciado.
you talk way too much and repeat your notes it ain't necessary cuz it ain't a live lecture , this video could be summarized in 20 min but thanks anyways
You are just copying code, please try to explain it as well when you write some code from somewhere else
you are too slow man...
I would like to advise you to make short length tutorials and kindly check after a few lines of code so if a view is watching he/she does not have to go back to the beginning of the tutorial to check where they have made a mistake.