后端接收一条数据，前端显示table表显示一条数据，实时显示的最后十条

2，views中获取数据库的最后十条数据并传入前端

#获取最后10条数据
def last_data(request):
    ret = models.ToolsNet.objects.values().order_by("-id")[:10]
    ret = list(ret)
    return JsonResponse(ret,safe=False)

3，前端页面的表格

<table class="table table-bordered" id="tab">
	<thead>
	<tr>
	    <th>序号</th>
	    <th>工位名称</th>
	    <th>标识符</th>
	    <th>时间</th>
	    <th>拧紧状态</th>
	    <th>扭矩状态</th>
	    <th>角度状态</th>
	    <th>扭矩</th>
	    <th>角度</th>
	    <th>tightening_ID</th>
	    <th>操作</th>
	</tr>
	</thead>
	<tbody id="t_tab">
	
	{% for i in '0123456789' %}
	    <tr>
	        <td id={{ i }}>{{ forloop.counter }}</td>
	        <td id="station_name "></td>
	        <td id="vin_number"></td>
	        <td id="tightening_time"></td>
	        <td id="tightening_status"></td>
	        <td id="torque_status"></td>
	        <td id="angle_status"></td>
	        <td id="torque"></td>
	        <td id="angle"></td>
	        <td id="tightening_ID"></td>
	        <td>
	            <button class="btn btn-info del"><i class="fa fa-trash-o">查看曲线</i></button>
	            <!--
	            <button class="btn btn-info del">查看曲线</button>
	            <i class="fa fa-trash-o">删除</i> 这个是加了图标 在这个里面的
	            <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">-->
	        </td>
	    </tr>
	{% endfor %}
	
	</tbody>
	</table>

4，ajax自动刷新，把从数据库获取的最后10条数据填入表格

<script>
    //将数据库最后10条数据展示在页面
    setInterval(function () {
        $.ajax({
            url: "/last_data/",
            type: "GET",
            data: "123",
            success: function (datas) {
                //把数据填充到表格中
                table = document.getElementById('tab'); //获取列表
                for (var i2 = 1; i2 < table.rows.length; i2++) {//遍历多少行
                    td = table.rows[i2].cells[0];//取出第一行的td，就是序号
                    var id_num = td.textContent-1; //获取序号的值
                    var $current = $("#" + id_num).parent().children();//当前序号标签的父标签的儿子们，就是td
                    $current.filter("#torque").text(datas[id_num]["torque"]);
                    $current.filter("#station_name").text(datas[id_num]["station_name"]);
                    $current.filter("#vin_number").text(datas[id_num]["vin_number"]);
                    $current.filter("#tightening_time").text(datas[id_num]["tightening_time"]);
                    $current.filter("#tightening_status").text(datas[id_num]["tightening_status"]);
                    $current.filter("#torque_status").text(datas[id_num]["torque_status"]);
                    $current.filter("#angle_status").text(datas[id_num]["angle_status"]);
                    $current.filter("#torque").text(datas[id_num]["torque"]);
                    $current.filter("#angle").text(datas[id_num]["angle"]);
                    $current.filter("#tightening_ID").text(datas[id_num]["tightenting_ID"]);
                    $current.filter("#p_torque").text(datas[id_num]["torque"]);
                    $current.filter("#p_angle").text(datas[id_num]["angle"]);

                }
            }
        });
    }, 3000)
</script>

5，ajax自动刷新，判断是OK还是NG自动填充颜色

<!-- 根据OK，NG填充颜色开始 -->
<script type="text/javascript">
    //记得放到最后，因为必须等表格呈现之后才可以改变样式颜色
    setInterval(function () {
        table = document.getElementById('tab'); //获取列表
        for (var i = 1; i < table.rows.length; i++) {//遍历多少行
            for (var j = 4; j < 7; j++) { //第5行到第7列的状态
                td = table.rows[i].cells[j];//取出td
                if (td.textContent === "OK") {//判断是否大于0
                    td.style.backgroundColor = "green";
                } else {
                    td.style.backgroundColor = "red";//否则变成红色
                }
            }
        }
        if ($("#p_angle").html() === "OK") {
            $("#p_angle").parent.style.backgroundColor = "green"
        }
    }, 1000)
</script>
<!-- 根据OK，NG填充颜色开始 -->

效果如下

遇到的问题
问题：以上是靠ajax自动刷新的，浏览器经常卡死的状态，也不能做到“实时”显示的效果
我想实现的是：
使用websocket接收实时的数据，而不是自动刷新从数据中取数据，我现在能做到使用websocket显示一条数据
怎么使用websocket方式，让前端table实时显示最后10条数据，菜鸟一枚，求大神给点思路。