johndoee's avatar

does still need websocket for realtime data tracking while I using jquery ajax in laravel

I want to know is I still need websocket for database change tracking in laravel when I using jquery ajax? The problem in jquery ajax is ,data update in authenticated user web page, but when this data change need to update in realtime to another user, it cannot update in another user web page. Example , John has sell order for one item , Jack buy this item . Jack has order history for buy after his buy this item .Order history show after his buy. John alos need to see his sell order history when jack bought this item in realtime. Jquery ajax cannot update to another user web page. How can I use websocket for this. here is example . when I enter sell click button, data enter into database and fetch this data to show on user web page by ajax jquery. but this data also need to show on another user web page at the same time,

$(document).on('click', '.sell', function (e) {
            e.preventDefault();

            var data = {
                'price': $('.sellp').val(),
                'amount': $('.sella').val(),
                'total': $('.sellt').val(),
               
            }
            console.log(data);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $.ajax({
                type: "POST",
                url: "/selllimit",
                data: data,
                dataType: "json",
                success: function (response) {

                  //console.log(response);
                  if(response.status==400){
                    console.log(response.errors.price);
                  }
                  else{
                    
                     console.log(response);
                      
                      sellordershow();
                  }
                 
                }
        });

        });

this data fetch by this ajax get method

                sellordershow();

                     function sellordershow(){
                     
                     $.ajax({
                             type: "GET",
                             url: "/sellorderdata",
                             dataType: "json",
                             success: function (response) {
                            // console.log(response.lastsellprice.price);
                             $('#marketprice').val(response.lastsellprice.price);
                             $('#price').val(response.lastsellprice.price);

                            

                          $('tbody.sell').html("");
                             $.each(response.sellorderdata,function(key,item){if(item.total!==0) {
                               $('tbody.sell').append('<tr>\
                                         <td class="red-bg-100">'+item.price+'</td>\
                                         <td class="pink-bg-90">'+item.amount+'</td>\
                                         <td class="white-bg-70">'+item.total+'</td>\
                                         </tr>');
                   
                             }       
                             });
           
                                     
                             }
                    
                     });
                     }

and place in click sell ajax call method

    success: function (response) {

                  //console.log(response);
                  if(response.status==400){
                    console.log(response.errors.price);
                  }
                  else{
                    
                     console.log(response);
                      
                      sellordershow();
                  }
                 
                }

So this data only show on sell user order page when click sell button on sell user side , not show on sell order page that can see by all users.

I want to solve this problem , How can I show all user can see every database change ,

0 likes
7 replies
tykus's avatar
tykus
Best Answer
Level 104

Laravel Echo is probably the route you want to go. As far as jQuery; it was never the best approach for data-driven UI, but you could trigger an AJAX request to fetch the new rendered HTML

tykus's avatar

@zwarkyaw sure, but you want to trigger that AJAX request using the websocket / Laravel Echo, right?

You could also just poll for the changes?

johndoee's avatar

@tykus here is example . when I enter sell click button, data enter into database and fetch this data to show on user web page by ajax jquery. but this data also need to show on another user web page at the same time,

$(document).on('click', '.sell', function (e) {
            e.preventDefault();

            var data = {
                'price': $('.sellp').val(),
                'amount': $('.sella').val(),
                'total': $('.sellt').val(),
               
            }
            console.log(data);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $.ajax({
                type: "POST",
                url: "/selllimit",
                data: data,
                dataType: "json",
                success: function (response) {

                  //console.log(response);
                  if(response.status==400){
                    console.log(response.errors.price);
                  }
                  else{
                    
                     console.log(response);
                      
                      sellordershow();
                  }
                 
                }
        });

        });

this data fetch by this ajax get method

                sellordershow();

                     function sellordershow(){
                     
                     $.ajax({
                             type: "GET",
                             url: "/sellorderdata",
                             dataType: "json",
                             success: function (response) {
                            // console.log(response.lastsellprice.price);
                             $('#marketprice').val(response.lastsellprice.price);
                             $('#price').val(response.lastsellprice.price);

                            

                          $('tbody.sell').html("");
                             $.each(response.sellorderdata,function(key,item){if(item.total!==0) {
                               $('tbody.sell').append('<tr>\
                                         <td class="red-bg-100">'+item.price+'</td>\
                                         <td class="pink-bg-90">'+item.amount+'</td>\
                                         <td class="white-bg-70">'+item.total+'</td>\
                                         </tr>');
                   
                             }       
                             });
           
                                     
                             }
                    
                     });
                     }

and place in click sell ajax call method

    success: function (response) {

                  //console.log(response);
                  if(response.status==400){
                    console.log(response.errors.price);
                  }
                  else{
                    
                     console.log(response);
                      
                      sellordershow();
                  }
                 
                }

So this data only show on sell user order page when click sell button on sell user side , not show on sell order page that can see by all users.

I want to solve this problem , How can I show all user can see every database change ,

tykus's avatar

@zwarkyaw Clicking the button in your browser, makes an AJAX request to the server; the server broadcasts (using Echo) to any other browser subscribed on the channel. This triggers the listening browser to make it's own AJAX request.

How can I show all user can see every database change

Every database change???

johndoee's avatar

@tykus as my explain in code, one user sell and another user can see this sell order on orderbook list in realtime, i mean this database change , if can see by echo , how can do that ,plz example. I am new to this

Please or to participate in this conversation.