AngularJS communicating between server using websocket to reload automatically

Question

I want to do something like if in my database field happens any delete/get/post/put operation, these kind of change should be reflect in client side too without refreshing.

I mean, when any change occurs, the server should send an alert to client to refresh or reload the page automatically.

I achieved this kind of job with $interval but i know this is not a good practice. so i dont i want to achieve with this.

I want to achieve this with websocket or some other good way but not getting how to do it.

here you go for my current snippet that solved with $interval :

app.controller('crudCtrl', function($scope, $http) {

  $scope.getAllContact = function() {
    var data = $http.get("http://127.0.0.1:8000/api/v1/contact/")
    .then(function(response) {
      $scope.contacts = response.data;
      $scope.getAllContact();
      $interval($scope.getAllContact, 10000);
    }, function(response) {
      $scope.getAllContact();
      $interval($scope.getAllContact, 10000);
    });
  };
  $scope.getAllContact();

Above snippet works very nice to refresh the page in every millisecond but this is not good practice, coz, it hits to database with too GET request.

So i want to implement this with websocket or whatever other good way

But i am not getting how to do it and where.

Can anyone fix me this issue?

Optional: in my database, there are four field, userid, name, email, phone so i want to do refresh the page automatically if any of this field is edited/deleted/added or whatever change happens