当数据库中插入新数据时，更新/重新加载特定的div。 Laravel 5.8

Question

当数据库更改自动更新div时，我想要一种使div像（实时）一样工作的方法。我看到了一种方法，该方法每隔x秒设置一次间隔以刷新div，但我认为这是一种不好的做法，因为它会导致服务器紧张。我还看到了laravel pusher和socket.io，但我认为这对我来说太难了。我想使用简单的代码，暂时不使用某些软件包。有人可以帮我弄这个吗？

shownews.blade.php（其中的注释显示在div commentarea中）

                  <h4 class="comments-title" > <span class="fas fa-comment-alt"></span>
                    {{$news->comments()->count()}}
                    Comments</h4>
                  <div class="row" >
                      <div class="col-md-12 col-md-offset-2" style="overflow-y: scroll; height: 400px;
                      width: 400px; " id="commentarea" >

                          @foreach($news->comments as $comment)
                            <div class="comment" style="background-color: #f6efef;" >
                          <div class="author-info">
                              <img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">

                              <div class="author-name">
                                   <h4>{{$comment->name}} </h4>
                                   <p class="author-time"> {{  date('F nS, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
                              </div>
                          </div>
                            <div class="comment-content">
                                    {{$comment->comment}}
                            </div>
                            </div>
                          @endforeach
                      </div>
                  </div>



 <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
         jQuery(document).ready(function(){
            jQuery('#ajaxSubmit').click(function(e){
               e.preventDefault();
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
               jQuery.ajax({
                  url: 'article' + {{$news->id}} ,
                  method: 'post',
                  data: {
                     name: jQuery('#name').val(),
                     email: jQuery('#email').val(),
                     comment: jQuery('#comment').val()
                  },
                  success: function(result){
                      //console.log(data);
                  }});
               });
            });

    </script>

CommentsController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Comment;
use App\News;
use App\Graph;
use Validator;
use Session;




class CommentsController extends Controller
{
    public function store(Request $request, $news_id)
    {
        //
        $this->validate($request, array(
            'name'=> 'required | max:255',
            'email'=> 'required| email | max:255',
            'comment'=> 'required | min:5'
        ));

        $news = News::find($news_id);

        $comment = new Comment();

        $comment->name = $request->name;
        $comment->email = $request->email;
        $comment->comment = $request->comment;
        $comment->approved = true;
        $comment->news()->associate($news);

        $comment->save();
        // return response()->json($comment);

        return redirect()->route('article', [$news->id]);

    }
}

Comment.php模型

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model
{

    protected $fillable = [
        'name', 'email', 'comment',
    ];
    //
    public function news(){
        return $this->belongsTo('App\News');
    }
}

News.php模型

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class news extends Model
{
    //
    protected $fillable = [
        'title', 'subtitle', 'body', 'image',
    ];


    public function comments(){
        return $this->hasMany('App\Comment');
    }
}