templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django data Testing</title>
</head>
<body align='center'>
    <h1 id='info'>Fetched item count from view</h1>
    <h2 id='app' style='font-size:72px;color:blue;'>{{ text }}</h2>

        <h2>From Database </h2>
    <ul id="content">
    
    </ul>
    <script>
        var socket = new WebSocket('ws://localhost:8000/ws/integer/')

        socket.onmessage = function (event){
            console.log("received updates")
            var data = JSON.parse(event.data)

            document.querySelector('#content').innerHTML = data.datas
        
           
            document.querySelector('#app').innerHTML = data.message
            document.querySelector('#info').innerHTML = "Updates Received"
        }


        socket.onopen = function(e){
            console.log("message", e)
        }

        socket.onerror = function(e){
            console.log("message", e)
        }

        socket.onclose = function(e){
            console.log("message", e)
        }

    
    </script>
</body>
</html>